Cara Membuat Related Post dengan Thumbnail

Related post atau postingan terkait pasti sering loe liat di blog orang laen ya gak gan. Fungsinya bukan cuma pajangan doank tapi buat ningkatin pageview dari pengunjung blog kita gan. Dengan adanya related post atau postingan terkait di blog kita bikin pengunjung lebih mudah nyari konten yang berkaitan sama yang dia baca saat itu.

Cara Membuat Related Post dengan Gambar di Blogspot

1. Copy + Paste kode di bawah ini DI ATAS kode </head>

Copy Script Di Bawah :

<!--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 berwarna biru adalah ukuran gambar/foto yang akan ditampilkan, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.

2. Copy + Paste kode di bawah ini DI ATAS kode <div class='post-footer'> ada dua kode begini, pilih kode YANG KEDUA):

Copy Script Di Bawah :

<!-- 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: kode berwarna biru adalah jumlah related post, bisa diubah sesuai selera, bisa lebih besar atau lebih kecil.

Jangan lupa SAVE Template! Good Luck and Happy Blogging!