Membuat Related Posts dengan Gambar Responsive

Cara Membuat Related Posts Widget for Blogger with Image Thumbnail. Tips Menampilkan Posting Terkait Berupa Gambar Thumbnail Responsive.

RELATED Posts, Related Articles, atau Posting Terkait merupakan salah satu widget yang wajib ada di blog. Umumnya ada di bawah tiap postingan.

Fungsi Related Posts adalah sebagai menu sekaligus internal links untuk meningkatkan pageviews dan mengurangi bounce-rate.

Untuk blog biasa, CB sarankan menggunakan related posts tanpa thumbnail gambar agar tidak memperlambat loading.

Namun, untuk blog toko online, blog foto, blog video, atau blog dengan posting yang didukung gambar yang keren, CB sarankan menggunakan Related Post plus Gambar Thumbnail agar lebih menarik sekaligus menjadi etalase di bawah postingan. (DEMO)

Cara Pasang

Tahapan Memasang atau membuat posting Terkait dengan Gambar Thumbnail di Bawah Postingan:

1. Template > Edit HTML
2. Copas kode berikut ini di atas kode </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-->

Ket: yang merah itu ukuran gambarnya. Bisa diubah.

3. Copas kode berikut ini di atas kode <div class='post-footer'>

Jika kode tersebut ada ada dua, simpan di atas kode 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> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://contohblognih.blogspot.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-->

Ket: 

- Yang merah bisa diubah. 5 jadi 7 misalnya. 

- Related Posts bisa diganti menjadi Related Photos, Videos, atau "Produk Lainnya".

4. Save Template!

Tips membuat Related Posts dengan Gambar Thumbnail Responsive ini sudah diujicoba dan sukses! Lihat DEMO.

Untuk tutorial membuat related posts lainnya bisa dicek di Label Tags Related Posts. Good Luck! (http://contohblognih.blogspot.com).*

Sumber