Cara Pasang Related Post di Samping Postingan

Berdasarkan survey saya kebanyakan blog atau website memasang Artikel Terkait/Related Post diakhir postingan, dan hanya beberapa blog atau web yang memasang Artikel Terkait itu disamping postingan. Nah disini saya coba buat pasang artikel terkait disamping postingan. Apa manfaatnya pasang artikel terkait itu sendiri disamping postingan? Manfaatnya adalah ada sebagian  pengunjung biasanya hanya buat baca artikel/postingan kita tidak sampai kebawah posting, alhasil artikel terkait kita gak sempet dibaca sama si pengunjung dan tidak menutup kemungkinan pageview kita akan berkurang. Dan coba kalau kita pasang disamping postingan, dari pertama pengunjug baca artikel kita saja pengunjungpun sudah bisa lihat artikel terkait. Dan menurut pakar SEO artikel terkait itu dapat meningkatkan SEO. Nah jika kamu tertarik buat pasang artikel terkait di samping postingan kamu 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/AVvXsEglpSwjwjsxSPDxMEHFILH1JcAS70wOXIfGECMdhEmVuAbViuxs9W_r8cA0BWKa2i1VaXtn5wK0_0IxhkRImu0fjF0-cDOYjgnCiYZcf3Pe1yjdHijelUb3v1t9jSEB0HQeQI6bHfZwjuM/") 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 Save Template dan lihat hasilnya.
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.
langkah-langkah di atas sudah pernah saya coba dan hasilnya sangat perfect..dan jangan lupa jika terjadi kegagalan atau eror kode bisa kasih tau saya lewat komentar dibawah.