Cara Membuat Related Post Blogger

Membuat Related Post dengan Thumbnail pada Blogger bukan hal yang baru lagi bagi sahabat yang sudah sekian lama hidup di dunia blogspot. Related Post yang menyertakan image alias gambar secara thumbnail akan lebih mempercantik tampilan blog, dan diyakini dapat meningkatkan pageview pada blog sahabat yang mungkin saja bisa meningkatkan kualitas alexa pagerank atau tambahan recehan dolar. Berhubung kemarin ada sahabat blogger yang bertanya di blog sebelah, maka langsung saja saya share tips yang telah tersimpan dalam sanubari :embeerrrr:, untuk sedulur yang sudah lebih expert,” tidurlah selamat malam, lupakan sajalah.. aku..” biarkan pemula ini lagi belajar merangkak -glunthang- 😀

Cara Membuat Related Post dengan Image Gambar Posting adalah sebagai berikut:

1. Edit HTML Template Blogger

Silahkan login ke blogger.com

Klik Rancangan/Design, klik Edit HTML, kemudian checkmark alias contreng Expand Widget Templates

Membuat CSS Related Post lebih dahulu, salin kode berikut ini

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<style type="text/css">

#related-posts {

float:center;text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;

}

#related-posts h2{

font-size: 1.6em;font-weight: bold;color: black;

font-family: Georgia, &#8220;Times New Roman&#8221;, Times, serif;

margin-bottom: 0.75em;margin-top: 0em;padding-top: 0em;

}

#related-posts a{color:black;}

#related-posts a:hover{color:black;}

#related-posts a:hover {background-color:#d4eaf2;}

</style>

<script src='http://jiox.googlecode.com/files/sambung.js' type='text/javascript'/>

</b:if>

kemudian pasang/letakkan di atas kode </head>

3. Tekan F3, kemudian search atau cari kode ini

<div class='post-footer-line post-footer-line-1'>

kalau tidak ada, alternatifnya cari kode ini

<p class='post-footer-line post-footer-line-1'>

kemudian salin dan letakkan kode dibawah ini, setelah kode di atas

<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>

<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop><a href='https://alkatro.com/' style='display:none;'>simple tips</a>

<script type='text/javascript'>

var currentposturl=&quot;<data:post.url/>&quot;;

var jumlahpost=7;var judulnya="Artikel Terkait";

removeRelatedDuplicates_thumbs();printRelatedLabels_thumbs();

</script>

</div><div style='clear:both'/>

</b:if>

Keterangan:

text yang bercetak miring dan di bold : var jumlahpost=7

menandakan jumlah judul posting yang akan muncul, angka 7 silahkan sesuaikan dengan selera sahabat

Text Artikel Terkait, adalah kalimat judul yang akan muncul di atas daftar artikel posting terkait pada blog sahabat,silahkan ganti dengan kalimat yang lebih romantis dan mendayu dayu :halah:

Kalau Sudah silahkan “Save Template”

Bagaimana cotoh penampakannya silahkan sahabat klik image di atas.

Demikianlah tips memasang Related post blogger dengan thumbnail image alias gambar pada blogger ini 😀