Cara Membuat Related Post dengan Icon Gambar Keren dan Responsive Banget

Sobat. Dalam kesempatan ini, akan kita ulas beberapa hal yang berkaitan dengan "salah satu" faktor sebuah blog dikatakan SEO. Hal tersebut adalah pengelolaan desai tampilan di dalam sebuah template. Selain daripada itu, faktor user friendly menjadi pamungkas faktor tersebut.

Dalam hal user friendly, hal yang sering dilupakan para pemakai template blog adalah kurang memperhatikan adanya fitur related post yang tersemat di dalam sebuah template bawaan yang mereka dapatkan dari hasil download atau murni dari blogger. Bahasan kali ini, lebih pada bagaimana cara memodifikasi link related post yang awal mula berupa teks diganti dengan gambar responsive. Tips kali ini juga salah satu tips dari mas CB.

Jika masih bingung topik bahasan kali ini, silakan sobat buka salah satu artikel di dalam blog ini. Pada bagian bawah akan terlihat bagian related postnya. Misalkan saat rekan membuka bagian judul artikel kelebihan dan kekurangan blogspot dan wordpress.

Masih belum faham juga? Hmm. Silakan simak langkah-langkahnya di bawah ini!

LANGKAH-LANGKAH MEMBUAT RELATED POST DENGAN GAMBAR
1. Buka akun blogger
2. Pilih template > Edit Html
3. Copas kode di bawah ini dan tempatkan tepat 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-->

***.Note: warna biru merupakan ukuran gambanya. Sobat dapat merubah sesuai selera

4. Copas kode di bawah ini dan tempatkan tepat di atas kode <div class='post-footer'> Jika kode <div class='post-footer'> ada dua, simpan di atas kode yang kedua ya.

<!-- 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/AVvXsEh0h5M8Wv1QzB7WZFbiPxVAFlflde8AAK4lJcObPymNMTnAQbw8dh1wXYATfs6i_166RSFvACbLJl4vdp3qBm6TBU5ZGATqIlZZy9zOhPIn8sB6sdH2vp-OrZVkBXLRZinf1MZZQqo-mr60/s1600/best+blogger+tips.png'/></a> </b:if> </b:if> <!-- Related Posts with Thumbnails Code End-->

***.Note: 

- Warna biru merupakan jumalah related post yang mau ditampilkan

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

4. Save Template!

Demikian Guys. Mudah bukan? Semoga bermanfaat