Menambahkan You Might Also Like/Related Post Blogger

Related Post pada akhir artikel dapat menjadi hal yang sangat penting untuk mendapatkan traffic atau kunjungan dari para surfer atau pembaca. Ini yang akan kita buat pada tutorial kali ini. Bagaimana cara membuat atau menambahkan related post atau menambahkan You Might Also Like di posting. Pada tutorial ini, saya akan memberikan cara yang dapat di modifikasi, tidak menggunakan layanan website seperti http://linkwithin.com. Cara yang saya gunakan juga memungkinkan widget ini tidak muncul di halaman utama. Hanya di halaman posting saja.

Baiklah, langsung saja ke tutorial. Segeralah mendapat pengunjung, SEO is good.


Langkah pertama yang harus di lakukan, login ke blogger. Kemudian masuk ke Design --> Edit HTML. Kemudian klik pada checkbox expand widget template.

Kedua, cari kode </head> Kemudian copy code dibawah ini tepat di atas code tersebut.

<b:if cond='data:blog.pageType == "item"'>
<style type='text/css'>
#related-posts {
float:center;
height:100%;
min-height:100%;
padding-top:10px;
padding-left:15px;
padding-right:15px;
}

#related-posts h2{
font-size: 1.3em;
color: black;
font-family: Arial;
margin-bottom: 0.75em;
}

#related-posts a{
color:black;
}

#related-posts a:hover {
background-color:#eeeeee;
}
</style>
<script type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUOUV_0J7iPJvMb4tz2-naCb6T3oUPgYYvrFstA4peMniAkORoawToYVwqWXRAssmLp02M5tILKxm9rTI29ftHS2Z80bvTjUFx5c_vOSyUxN3kOeHUaevnHgPPi3a_zTJly2AMGPXeOmTM//";
var maxresults=5;
var splittercolor="#cccccc";
var relatedpoststitle="You might also like:";
</script>
<script src='http://hbhost.googlecode.com/files/related-posts-with-thumbnails-for-blogger.js' type='text/javascript'/>
</b:if>

Kemudian, cari kode <div class='post-footer-line post-footer-line-1'> Copy code di bawah ini tepat di bawah code tadi.

<b:if cond='data:blog.pageType == "item"'>
<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.isLast != "true"'>
</b:if>
<script expr:src='"/feeds/posts/default/-/" + data:label.name + "?alt=json-in-script&callback=related_results_labels_thumbs&max-results=6"' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs("");
</script>
</div><div style='clear:both'/>
</b:if><br/>

Anda bisa memodifikasi bagaimana widget akan ditampilkan. Seperti berapa banyak related post yang akan ditampilkan, bagaimana mengatur lebar untuk menyesuaikan dengan template kita. Anda bisa langsung mengedit berapa related post yang akan ditampilkan dengan mengganti angka pada code "var maxresult=5;" sesuai dengan banyaknya data yang ingin ditampilkan.