Related Posts atau artikel terkait dengan gambar (thumbnail) perlu dipasang di blog untuk mempermudah pembaca blog dalam melihat artikel lain di blog anda. Ada banyak macam widget related posts atau artikel terkait yang bisa dipasang di blog dan biasanya para blogger meletakkan artikel terkait berada di bawah postingan blog, seperti related posts dengan scroll atau related post link witihin dan lain-lain. Nah sekarang simak bagaimana cara membuat dan memasang related posts atau artikel terkait dibawah postingan blog.
Baca juga : Membuat Related Posts Link Within
Cara Membuat dan Memasang Related Posts Thumbnail di Bawah Postingan
1. Buka blog anda
2. Pilih Template
3. Pilih Edit HTML
4. Tekan Ctrl+F, cari kode
</head> dan letakkan kode berikut diatasnya<b:if cond='data:blog.pageType == "item"'> <style type='text/css'> #related-posts { float:center; text-transform:none; height:100%; min-height:100%; padding-top:5px; padding-left:5px; } #related-posts h2{ font-size: 18px; letter-spacing: 2px; font-weight: bold; text-transform: none; color: #5D5D5D; font-family: Arial Narrow; margin-bottom: 0.75em; margin-top: 0em; padding-top: 0em; } #related-posts a{ border-right: 1px dotted #DDDDDD; color:#5D5D5D; } #related-posts a:hover{ color:black; background-color:#EDEDEF; } </style> <script type='text/javascript'> var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJwlmpTZt_UDfJbhrfQcIWHdaGki43XkMc5XQrboHW3xMHiglclZ9XVERUcvfa3IxIX1aZzFNlAilvBD362irAO1K_xp8_wd8xG2t6fOIDLMPKdfQvLgmuIcxc5odP3goSLhDZaacMR2xn/s1600/no_image.jpg"; var maxresults=5; var splittercolor="#DDDDDD"; var relatedpoststitle="Related Posts"; </script> <script src='https://sites.google.com/site/lintastutor/rudy/related-posts-thumbnails.js' type='text/javascript'/></b:if>
5. Cari kode
<div class='post-footer-line post-footer-line-1'>6. Letakkan kode berikut dibawahnya
<b:if cond='data:blog.pageType == "item"'> <div id='related-posts'> <b:loop values='data:post.labels' var='label'> <b:if cond='data:label.isLast != "true"'> </b:if> <script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=5"' type='text/javascript'/></b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs("<data:post.url/>"); </script> </div><div style='clear:both'/> <!-- remove --></b:if> <b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'> <a href='http://lintas-tutor.blogspot.com'><img alt='Terlintas' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicz2qce-SKhr5RDYwFwhavDV_wULrenmHJEFxUm7Fz0NTQj4_a1yTM8_fysmZvYbqa-lnraXEk-LG6Nl0WjtmsADr5PrtXDKQhb8p2nPzo1CVvKliK1fRQXdhrnY48zU6cfUiToH9BDC9b/s1600/best+blogger+tips.png'/></a> </b:if></b:if>
Keterangan :
- max-results=5 adalah jumlah artikel yang ditampilkan
- Ganti teks warna biru
7. Simpan Template
Demikianlah cara membuat artikel terkait / related posts dengan gambar, silahkan dicoba.
