Blogger, Bunlarda ilginizi Çekebilir: Yayınlar Widget'i

Blogger için Küçük Resimli İlgili Gönderiler Widget 'ı blogger'ın mevcut yazının ilgili gönderilerini okuyucularınıza göstermesi iç...

...

Blogger için Küçük Resimli İlgili Gönderiler Widget'ı blogger'ın mevcut yazının ilgili gönderilerini okuyucularınıza göstermesi için bir widget'a sahip olması gerekir Bu size birçok yönden yardımcı olacaktır ve ilk şey, blogunuzun sayfa görüntülemelerini artırmanıza ve hemen çıkma oranını azaltmanıza yardımcı olmasıdır. Ayrıca bu iki avantajın yanı sıra harika bir görünüm oluşturur.

Küçük Resim İçeren İlgili Yazılar Blogger'a Nasıl Eklenir? 

ADIM: 1 - Arama kutusunu etkinleştirmek ve </head> etiketini bulmak için,  Blogger, Kontrol Paneli > Şablon "Tema" > sağ üstte üç nokta tikla ve HTML'yi Düzenle'ye gidin.

Uyarı Notu: İşlemlere başlamadan önce blogunuzun yedeğini kesin alın.

 

ADIM: 2 - CTRL + F 

ADIM: 3 - Aşağıdaki Etiketin hemen altına aşağıdaki kodları kopyala - yapıştır. 

</head>

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:left;width:auto;}
#related-posts a{border-right: 1px dotted #eaeaea;}
#related-posts a:hover{background: #f2f2f2;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#999999; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:4px solid #f2f2f2;width:100px;height:100px;transition:all 300ms ease-in-out;-webkit-transition:all 300ms ease-in-out;-moz-transition:all 300ms ease-in-out;-o-transition:all 300ms ease-in-out;-ms-transition:all 300ms ease-in-out;}
#related-title {color:#222;text-align:center;padding: 0 10px;font-size:14px Oswald; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:4px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://makingdifferent.github.io/blogger-widgets/related_posts_widget.js' />
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->. 


Önemli not:

Widget'ın yüksekliğini veya genişliğini değiştirmek için yukarıdaki kodda 100 piksel kırmızı renkli, yükseklik ve genişlik değerini düzenleyebilirsiniz.

İlgili yazı başlıklarının rengini ve boyutunu değiştirmek için Mavi renkli değeri düzenleyebilirsiniz. 

İlgili yazıların ana sayfada da görüntülenmesini istiyorsanız Yeşil renkli satırları kaldırın. Daha sonra karar değiştirirseniz bu makaleyi Favorilerinize ekleyin.

ADIM: 4 - CTRL + F kullanarak blogunuzun HTML'sinde aşağıdaki Etiketi bulun, aynı etiketi birkaç yerde bulacaksınız. Doğru sonucu alabilmek için ilk ikinci etiketten sonra denemeye başlayabilirsiniz. Kaydedin ve yeni sekmede açacağınız blogunuzda sonucu kontrol edin. Herşey yolunda ise, okumaya devam edin...

<div class='post-footer'>

ADIM: 5 - Şimdi, hemen üstüne, aşağıdaki kodu kopyalayıp yapıştırın.

<!-- Related Posts with Thumbnails Code Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != &quot;true&quot;'>
</b:if>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=related_results_labels_thumbs&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle=&quot;<b>Related Posts:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerwidgetgenerators.com'><img alt='Blogger Widgets' src='http://3.bp.blogspot.com/-K65p5zLLKQk/T3ObCINoP7I/AAAAAAAABmI/dF84-alnOu4/s1600/best+blogger+tips.png'/></a>
</b:if>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Düzenleme değeri 5  maxResults = 5 görüntülü olmasını istediğiniz mesajların sayısı ile. İlgili gönderinin ana sayfada da görüntülenmesini istiyorsanız yeşil renkli etiket satırlarını kaldırın. 

Related Posts : CRTL + F aratın, İlgili mesajlar yazın. Bu metinin hemen üstünde var maxresults=5; etiketini görüyorsanız doğru yerdesiniz.

ADIM: 6 - Şablonu kaydedin.

Süper tüm anlatım bitti şimdi makale altında Related Posts görülüyor mu? birkaç farklı yazı açarak kontrol edin.

11.07.2021 Pazar, 12:19'da Revize edilmiştir.

Kaynak:http://www.bloggerwidgetgenerators.com/2014/02/related-posts-widget-for-blogger-blogspot.html.