Cara Membuat Related Posts atau Artikel Terkait di Blogspot Terbaru

Jika Anda mencari tutorial cara membuat Related Posts atau Artikel Terkait di Blogspot kebanyakan Anda akan menemukan artikel terkait untuk blog versi lama dimana kebanyakan masih menggunakan perintah untuk centang expand template widget. Untuk blog versi terbaru menu expand template widget saat ini sudah tidak tersedia lagi. Pertanyaanya adalah apakah tanpa perintah expand template widget ini masih bisa digunakan untuk blog baru jawabannya adalah bisa namun di sini kode HTML yang di gunakan akan sedikit berubah.

Langsung saja kita mulai tutorial Cara Membuat Related Posts atau Artikel Terkait Dengan Gambar di Blogspot Terbaru, langkah pertama masuk ke menu Template lalu klik Edit HTML. 

Langkah selanjutnya adalah klik di sembarang baris HTML pada kotak menu HTML terlebih dahulu kemudian tekan CTRL + F pada keyboard komputer atau laptop Anda. Kenapa hal ini perlu di lakukan karena jika Anda menekan menu CTRL + F tanpa mengklik di kotak HTML makan menu search tersebut akan mencakup semua menu di layar monitor bukan khusus di menu HTML. selanjutnya setelah muncul kolom search masukkan kode di bawah ini  

 

</head>

Pastekan kode berikut ini di atas kode </head>

 <!--Related Posts with thumbnails Scripts and Styles Start-->
<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: #EEEEEE;}
#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:2px solid #f2f2f2;width:110px;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;-webkit-border-radius: 5px;  -moz-border-radius: 5px; border-radius: 5px; }
#related-title {color:#666;text-align:center;padding: 0px 5px 10px;font-size:12px;width:110px; height: 40px;}
#related-posts .related_img:hover{border:2px solid #E8E8E8;opacity:.7;filter:alpha(opacity=70);-moz-opacity:.7;-khtml-opacity:.7}</style>
<script type='text/javascript' src='http://helplogger.googlecode.com/svn/trunk/relatedposts.js' />
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Keterangan :
Untuk tulisan berwarna merah adalah ukuran Panjang dan tinggi dari gambar, Anda dapat mengubah ukuran nya sesuai dengan keinginan Anda.

Langkah berikutnya cari kode  <div class='post-footer'> masih di kotak menu HTML Tempaltes Anda.

 <div class='post-footer'>

Saat Anda mencari kode diatas Anda akan menemukan dua kode yang sama persis pilihlah kode kedua, selanjutkan paste kan kode beikut ini di atas 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>
<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: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'/><div style="font-size: 9px;float: right; margin: 5px;"><a  style="font-size: 9px; text-decoration: none;" href="http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html" rel="nofollow" >Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan : Angka 5 adalah jumlah artaikel terkait yang Anda masukkan di postingan blog. Jumlah ini menyesuaikan dengan ukuran templates blog Anda , jika ukuran besar jumlah ini masih bisa di tambah lagi menjadi semakin besar.

Jika semua proses sudah benar Save template dan lihat hasilnya di blogspot Anda. Artikel terkait ini dibuat berdasarkan label postingan Anda jadi pastikan Anda sudah membuat label pada attikel blog anda.

Posted by my review data

Tweet