Cara Simpel Membuat Releated Post Dengan Gambar

Cara Simpel Membuat Releated Post Dengan Gambar yang responsive Blogger. Apa sih yang dimaksud releated Post itu ?

Kalau menurut saya, releated post itu sama dengan Artikel yang terkait didalam Blog, dimana artikel-artikel tersebut di jadikan satu kategori tertentu, sehingga ketika kita membuka Artikel dari salah satu kategori tersebut, maka akan tampil artikel dari kategori tersebut, biasanya kan tampil sekita 5-10 artikel terkait sesuai dengan artikel yang ada di kategori itu.

Ingin Tahu bagaimana cara membuat Artikel terkait ini ? dengan Gambar Yang bisa dibilang responsive deh untuk template, lagiaan tidak bikin berat template/Blog sobat kok, karena sudah di optimasi oleh CB blog sendiri.

Cara Memasangnya Bagaimana ? ini dia

__________________________________

• Masuk Pada Menu Template
• Kemudian Edit HTML >> Cari kode </head> 
• Letakkan kode 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-->

____________________________________________________

• Yang berwarna Merah Ganti dengan ukuran Template anda

 
Kemudian setelah itu, cari kode ini <div class='post-footer'>, dan letakkan kode dibawah ini diatas kode <div class='post-footer'>.

<!-- 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='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVqKrPsaDPkMKhk9FQbMnVJsDjiW7ERNNJuz3kTANi5Ra2uOQEOmBrYzQXDeEgxQ6cialMezfqENI_sfvu4ya-ni0Q4vrWJfglL2U6EHPBJKMtyp_NTXrpJIzoHV2Z4rVjcufGB2nd99PR/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

NB : 
-Yang merah Bisa diubah, misal 5 menjadi 7
-Releated post ini bisa diganti dengan Releated Photos, Video dan lainnya.
-Jika sudah selesai Bisa di Save Template

Tips Membuat Releated Post dengan Gambar Responsive ini sudah Di uji coba di CB blogger, silahkan lihat langsung ke Blognya, jika masih bingung terkait dengan Tutorial ini, bisa ditanyakan.