Belajar Blogging : Cara Membuat Related Post di Samping Postingan

Jika anda bermaksud mau membuat / pasang artikel terkait di samping postingan anda bisa ikuti langkah-langkahnya di bawah ini :

• Login Blogger>Rancangan>Edit HTML.
• Centang kotak Expand Template Widget.
• Cari kode script </head> agar pencarian lebih muadah tekan Ctrl+F jika sudah ketemu copy+paste kode dibawah ini tepat dibawah tag </head> .

<style type='text/css'> #related-posts { float : left; width : 100%; margin-top:20px; margin-left : 5px; margin-bottom:20px; font : 11px Verdana; margin-bottom:10px; } #related-posts .widget { list-style-type : none; margin : 5px 0 5px 0; padding : 0; } #related-posts .widget h2, #related-posts h2 { font-size : 20px; font-weight : normal; margin : 5px 7px 0; padding : 0 0 5px; } #related-posts a { text-decoration : none; } #related-posts a:hover { text-decoration : none; } #related-posts ul { border : medium none; margin : 10px; padding : 0; } #related-posts ul li { display : block; background : url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjB3R4iLM_gi65t-hk0JcWFTM07ypFRoOB2dQuWRrbf4SwvWJgCezTYaYQbwD6zjSNbiukcDeTBYGUGFHZcNovNy_OyfzMAam87GyysVVht9b9Uu8O0Lj_L0qLxXQn9ZVPYB29BxHNA91Y/") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 21px; margin-bottom : 5px; line-height : 2em; border-bottom:1px dotted #cccccc; } </style> <script src='http://belajarblogging.googlecode.com/files/relpost.js' type='text/javascript'/>

• Jika sudah, cari <data:post.body/> lalu pasang kode script dibawah tepat sebelum tag <data:post.body/>, jika ditemukan 2 buah kode, simpan di bawah kode yang ke 2 sebap kode yang pertama buat Readmore jika template kamu sudah terpasang Readmore

<div style='float:right;width:300px;height:250px;padding:0 0px 0px 0;'>
<--Simpan Kode dibawah disini--></div>

Lalu gantikan kode yang berwarna hijau <--Simpan Kode dibawah disini--> dengan kode script dibawah ini

 

<b:if cond='data:blog.pageType == "item"'>
<div id="related-posts">
<font face='Arial' size='3'><b>Related Posts : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><b:if cond='data:label.isLast != "true"'>,</b:if><b:if cond='data:blog.pageType == "item"'>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels&max-results=5"' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>

 

• Jika sudah selesai Save Template dan lihat hasilnya.

NB : Kode warna merah bisa diganti left bila ingin posisi related post di samping kiri posting.
Untuk kode warna biru menentukan panjang dan lebar lokasi related post bisa kamu ganti sesuai keinginan kamu.