Cara membuat Related Post Bergambar Responsive

Membuat Related Post atau yang sering disebut dikalangan blogger yaitu artikel terkait pada sebua blog. Fungsinya adalah untuk meningkatkan interlink pada postingan dan juga dapat meningkat pageview pada blogger. Dengan memasang Related Post, maka secara tidak langsung akan mempermudah para pengunjung blog anda untuk membaca artikel-artikel yang terkait dengan yang anda saat ini baca. Sehingga dapat membuat pengunjung betah bertahan lama di blogger anda. Related Post atau Artikel Terkait banyak digunakan dikalangan para blogger, selain untuk mempermudah pengunjung melihat artikel-artikel yang berhubungan dengan yang dibaca, Related Post dapat memper-ganteng blogger anda^.^.

Sebelum melakukan praktekk, silakan anda backup terlebih dahulu Template anda. Karena jika tidak sesuai dengan keinginan anda, maka dengan mudah membalikan seperti semula lagi.

Cara Pasang:

1. Masuk ke Blogger anda.
2. Template -> Edit HTML.
3. Temukan kode </head>
4. Copy-Paste kode berikut ini, tepat diatas 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-->

5. Jika sudah dipasang diatas </head> . Temukan kode <div class='post-footer'>letakkan kode dibawha ini diatas kode  

NB: Kode <div class='post-footer'> ada dua, jadi kalian pasang saja keduanya!

<!-- 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://maycyber-download.blogspot.com'><img alt='Blogger Widgets' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinBTVcbP0AERINUBogsi0KZtzRMS8jYRtW0OKVmuwymcAPQFOIxwwMR_545Sf781-PCu_6wfqz52nfIeRc6OWztlojsTvGvAe46-MTI4soOPH7cC3pLUYbVxpx0edrr9gOipBMfU7y2VGC/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

NB: Maxresults=5; Jumlah postingan di Related Post, bisa diubah 7
        Related Post = Bisa diubah menjadi Artikel Terkait

6. Save Template!

Untuk melihat Related Post berbagai macam, Silakan lihat Label Tags Related Post

Demikianlah Tutorial Blogger kali ini, Sekian dari saya, Semoga Bermanfaat! Selamat Mencoba.