Cara Membuat Related Post Dengan Thumbnail Di Blog

My Dream ○ Hai sobat My Dream apa kabar?.semoga semuanya tetap sehat ya agar bisa selalu mengunjungi artikel-artikel terbaru dari My Dream.Oke sobat untuk artikel saya kali ini,saya akan sedikit membahas tentang Cara Membuat Related Post Dengan Thumbnail Di Blog.Nah artikel saya yang satu ini juga merupakan sebuah request dari sobat saya yang bertanya pada saya " Gan Bagaimana Sih Cara Membuat Related Post Yang Ada Gambarnya Aja".Nah dari sana saya sempat berjanji pada dia untuk membuat postingan ini.Tapi bukan berarti postingan ini hanya untuk orang itu aja ya hehehe bukan.Postingan ini juga dikhususkan untuk para Blogger yang mungkin ingin menambahkan Related post ini ke dalam Postingannya.
Nah sobat tau tidak fungsi dari Related Post?.Fungsi related post yaitu untuk menampilkan beberapa postingan kita yang terkait dengan postingan yang sedang dibaca oleh visitor.Tapi postingan yang ditampilkan pun harus sesuai dengan label postingannya.Jadi jika sobat belum tahu fungsinya maka jangan asal pasang ya sobat,ntar bukannya malah jadi tambah keren Blognya malah tambah hancur. :V.Oke sobat dari pada sobat makin penasaran kita langsung saja pada topik kita.Silahkan sobat ikuti tutorial berikut ini.

• Pertama masuk dulu ke Blog sobat.
• Setelah sobat masuk ke Blognya maka silahkan klik Template > Edit HTML.Dan carilah kode </head> agar lebih mudah gunakanlah CTRL+F di kotak HTML tersebut.
• Sekarang Copylah kode dibawah ini dan taruh tepat diatas kode </head> tadi.

<!--Related Posts with thumbnails Start-->
<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:2px solid #f2f2f2;width:100px;height:80px;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:#0033cc;text-align:center;padding: 0 5px;font-size:12px Arial; line-height:16px;text-shadow:0 2px 2px #fff;height:28px;width:100px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails End-->  

Catatan: Kode yang berwarna biru silahkan dengan ukuran yang sobat inginkan untuk ukuran foto/gambarnya,ubah saja sesuai selera.

•  Langkah keduasilahkan sobat copy kode dibawah ini dan pastekan diatas kode <div class='post-footer'>.Di beberapa Template kadang mempunyai 2 Kode ini silahkan pilih kode yang kedua.

<!-- 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>
<!-- Related Posts with Thumbnails Code End-->

Catatan: Silahkan sobat ganti Kode yang berwarna biru dengan jumlah postingan yang ingin sobat tampilkan dalam Related Post sobat. 

•  Terakhir silahkan sobat Save Template Sobat.

Inilah contoh SS related postnya dan mungkin sobat sukai......

Oke sobat sekian dulu Artikel dari saya dan semoga bisa bermanfaat untuk sobat semua.Jangan lupa untuk selalu meninggalkan komentar dan like sobat di Blog saya ini.Semoga berhasil sobat dengan tutorialnya.

Tweet