Cara Membuat Artikel Terkait dengan Gambar

Pada post yang sebelumnya saya pernah membuat artikel terkait, yaitu menampilkan postingan-postingan yang berkaitan dengan berdasarkan label yang sama. Jika yang kita pelajari dulu adalahdah pernah membuat artkel terkait, yaitu menampilkan postingan-postingan yang berkaitan dengan berdasarkan label yang sama. 

Dengan Artikel Terkait yang disertai gambar tentu saja akan menarik pembaca untuk meng klik dan melihat isi dari tulisan kita yang lain yang masih ada hubungannya dengan artikle yang mereka baca sebelumnya. Dan hasil akhir yang bisa kita dapatkan adalah page view blog kita jadi menungkat, orang akan betah untuk berlama-lama di blog kita.

Cara Membuat Artikel Terkait dengan Disertai Thumbnails
1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head>
6. Taruh (copy paste) kode berikut ini di atasnya

&lt;em&gt;Ampersands &amp; angle brackets need to be encoded.&lt;/em&gt;

&lt;!--Related Posts with thumbnails Scripts and Styles Start--&gt;

&lt;b:if cond='data:blog.pageType == &amp;quot;item&amp;quot;'&gt;

&lt;style type=&quot;text/css&quot;&gt;

#related-posts {

float:center;

text-transform:none;

height:100%;

min-height:100%;

padding-top:5px;

padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;

font-weight: bold;

color: black;

font-family: Georgia, &amp;#8220;Times New Roman&amp;#8221;, Times, serif;

margin-bottom: 0.75em;

margin-top: 0em;

padding-top: 0em;

}

#related-posts a{

color:black;

}

#related-posts a:hover{

color:black;

}

#related-posts  a:hover {

background-color:#d4eaf2;

}

&lt;/style&gt;

&lt;script src='http://blogergadgets.googlecode.com/files/relatedthumbs21.js' type='text/javascript'/&gt;

&lt;/b:if&gt;

&lt;!--Related Posts with thumbnails Scripts and Styles End--&gt;

7. Cari kode di bawah ini 

<div class='post-footer-line post-footer-line-1'>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

8. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawahsalah satu kode di atas (no.7)

<!-- 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=6&quot;' type='text/javascript'/></b:if></b:loop><a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html' style='display:none;'>Related Posts with thumbnails for blogger</a><a href='http://www.bloggerplugins.org/' style='display:none;'>blogger tutorials</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var maxresults=5;

var relatedpoststitle="Related Posts";

removeRelatedDuplicates_thumbs();

printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

<!-- Related Posts with Thumbnails Code End-->

9. Kita juga dapat menganti beberapa kode css, seperti berikut ini 

var maxresults=5; 

Berarti artikel terkait yang akan kita tampilkan adalah 5

var relatedpoststitle="Related Posts";

Judulnya adalah Related Posts

10. Simpan Template jika sudah selesai.

Selamat mencoba.... 

Artikel Terkait

Trik-trik Blog

• CARA MENDAFTAR DI CLICKSOR.COM
• Cara Membuat Banner dan Tukeran Link Banner
• Cara Membuat Artikel terkait dari setiap posting blog
• Cara Membuat / Memodifikasi Arsip Blog dengan Model Scroll
• Cara Daftar Domain Co.CC Gratis
• Cara membuat tukeran Link Blog dengan mudah dan cepat
• HOW TO CREATE A BLOG WITH BLOGGER
• Cara Membuat Blog dengan Blogspot
• Cara Mudah Membuat Posting Code HTML

Posted in: Trik-trik Blog