Cara Membuat Related Post di Sisi Kiri/Kanan Blog seperti Kompas.com

Tutorial ini saya bikin saat memodifikasi salah satu blog saya Artikel Islam. Melihat template nya saya berfikir related post yang sudah terpasang di bawah postingan blog alangkah bagusnya kalau berada tepat di bawah judul blog, di sisi kanan atau kiri postingan seperti yang bisa kita lihat di situs berita Kompas.com. Setelah cari-cari kesana kemari akhirnya ketemu juga solusinya.

Prinsip dasarnya sebenarnya sederhana,
Pertama, memasang related post yang biasa dilakukan oleh para blogger pemula seperti saya di bawah postingan, (dalam hal ini saya ambil turornya dari blog bdigg.blogspot.com
Kedua, memindahkan related post yang sudah terpasang ke sisi kanan/kiri tulisan di bawah judul blog (dalam hal ini saya ambil tutornya dari blog lostsector.blogspot.com

Untuk lebih jelasnya silahkan ikuti langkah-langkah berikut:

1.Log in ke akun Blogger
2.Klik Template
3.Edit Html » Centang kotak Expand template widget.
4.Cari kode </head> (gunakan CTRL + F). Kemudian letakkan kode berikut tepat diatas kode  </head>

<style> #related-posts { float : left; width : 300px; margin-top:2px; margin-left : 5px; margin-bottom:20px; font : 11px Arial;  color:#FF0080;margin-bottom:5px; } #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 { color:#116f9e;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/AVvXsEjN3JbQrnRNVb3wIE0Du_R1jObLleWwQwe06yxirOtdqgCFN2LiSLGjXwJ_jgo_UduYtHV9B8_44pH4QZdVICmcj3kbzsuS-dq_8x_CkKiVtNSgJIOaE8OovqGefTXieK5bSNkOtZ53WWc/s320/titik.png") no-repeat 0 0; margin : 0; padding-top : 0; padding-right : 0; padding-bottom : 1px; padding-left : 10px; margin-bottom : 5px; line-height : 1.5em; border-bottom:1px dotted #cccccc; } </style> <script src='http://yudatfort.googlecode.com/files/related%20posts%20b-digg.js' type='text/javascript'/>

5.Sekarang cari kode  <div class='post-body entry-content'> atau  <div class='post-header-line-1'/>
 Kemudian letakkan kode di bawah ini tepat di bawah kode tadi.

<div style='float:left; margin : 0px 10px 0px 0px'>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='2'><b> TERKAIT : </b></font><font color='#FFFFFF'><b:loop values='data:post.labels' var='label'><data:label.name/><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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div></b:if>
</div>

Kode Warna merah tersebut adalah perintah untuk menempatkannya di sisi kiri atau kanan. Untuk memindahkan ke kanan tinggal ganti float:left menjadi float:right

6. Save

Note: Untuk ukuran lebarnya bisa diatur sendiri dengan mengganti kode berwarna pink yang berada diatas kode </head>

Selamat mencoba