Cara Membuat Related Post Blogspot

Related post atau Artikel terkait adalah salah satu cara agar pengunjung blog kita lebih betah berlama - lama membaca setiap artikel atau konten pada blog kita. Mungkin beberapa dari kita masih bingung mengenai waktu yang dihabiskan pengunjung saat berseluncur di blog kita, jawabannya cukup mudah yaitu supaya ranking posisi blog kita pada mesin pencarian dapat meningkat dan tidak jarang juga yang sanggup meraih posisi rangking 5 besar dalam sebuah pencarian kata kunci tertentu. Sekarang bisa dibayangkan apabila blog kita bisa menempati posisi atas dan pastinya pada halaman pertama mesin pencarian, karena mayoritas pengunjung akan lebih memperhatikan hasil pencarian pada halaman pertama jadi kemungkinan pengunjung mampir ke blog kita sangatlah besar. Cara Membuat Related Post Blogspot ini tidaklah sulit hanya perlu menyelesaikan 3 tahap dan hanya cukup copy paste kode. Sekarang kita coba sedikit melakukan modifikasi template pada blog kita.

Langkah - langkah awal :

1. Buka Blogger
2. Login akun Blogger
3. Setelah berhasil masuk pilih bagian template
4. Pada menu template pilih tombol "Edit HTML"

Tahap I Memasang Script
Cari kode </head>  untuk mempermudah pencarian gunakan CTRL+F dan ketik kode yang ingin dicari. Copy kode di bawah ini dan paste 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: #424242;}
#related-posts h2{margin-top: 10px;background:none;font:18px Oswald;padding:3px;color:#FFFFFF; text-transform:uppercase;}
#related-posts .related_img {margin:5px;border:2px solid #f2f2f2;object-fit: cover;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:#00FF00;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 src='http://yourjavascript.com/3561196125/related-post-with-thumbnail.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

Keterangan tambahan pada tahap I :

1. Kode #eaeaea untuk mengganti warna garis dot pemisah antar artikel.
2. Kode #424242 untuk mengganti efek warna saat kursor mouse mengenai artikel.
3. Kode #FFFFFF untuk mengganti warna garis yang mengelilingi gambar artikel.
4. Kode #00FF00 untuk mengganti warna judul artikel

Tahap II Meletakan Widget Related Post Pada Post Footer
Cari kode <div class='post-footer'> untuk mempermudah pencarian gunakan CTRL+F dan ketik kode yang ingin dicari. Pada tahap ini kita akan menemukan 2 kode <div class='post-footer'> dan kita berhenti pada kode yang kedua. Copy kode bercetak miring di bawah ini dan paste di atas kode  <div class='post-footer'> yang kedua.

<!-- 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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle=&quot;<b>Artikel Lainnya:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan tambahan pada tahap II :

1. Tulisan Artikel Lainnya: untuk mengganti judul widget
2. Kode 8 untuk menentukan berapa artikel yang akan di tampilkan pada widget.

Tahap III Menampilkan Related Post Pada Mode Mobile View
Cari kode <div class='post-footer-line post-footer-line-2'> yang terletak di antara <b:includable id='mobile-post' var='post'> dan </b:includable> untuk mempermudah pencarian gunakan CTRL+F dan ketik kode yang ingin dicari. Copy kode bercetak miring di bawah ini dan paste dibawah kode <div class='post-footer-line post-footer-line-2'>

<!-- 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=8&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=8;
var relatedpoststitle=&quot;<b>Artikel Lainnya:</b>&quot;;
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div class='clear'/><div style='font-size: 9px;float: right; margin: 5px;'><a href='http://helplogger.blogspot.com/2012/03/how-to-add-related-posts-widget-to.html' rel='nofollow' style='font-size: 9px; text-decoration: none;'>Related Posts Widget</a></div>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

Keterangan tambahan pada tahap III :

1. Tulisan Artikel Lainnya: untuk mengganti judul widget
2. Kode 8 untuk menentukan berapa artikel yang akan di tampilkan pada widget.

Setelah selesai memasang kode - kode di atas pada halaman template edit HTML tentu langkah terakhir adalah menyimpan perubahan tersebut dan segera coba buka website kita sendiri. Widget related post akan muncul dibagian footer atau bagian bawah setelah isi konten. Sekian tips trik mengenai "Cara Membuat Related Post Blogspot" untuk menunjang SEO dan SERP website kita dan tetap ingat kemurnian atau kejujuran penulis untuk sebuah artikel itu adalah nomor 1.
Terima Kasih semoga artikel "Cara Membuat Related Post Blogspot" dapat berguna bagi kita pemilik blog.

Sumber :
Script untuk widget related post
http://helplogger.blogspot.co.id/2012/03/how-to-add-related-posts-widget-to.html

Teknik memunculkan widget pada mode mobile view
http://risalahatiku46.blogspot.co.id/2013/01/membuat-related-post-untuk-versi-mobile.html