Bagaimana Cara Membuat Related Post untuk Blogger?

Image via CrunchBase

Bagaimana Cara Membuat Related Post untuk Blogger? Menampilkan link ke posting terkait atau related post dengan thumbnail  yang sesuai akan membantu Anda meningkatkan tampilan halaman / pengguna. Pengguna akan tergoda untuk pergi untuk posting terkait ketika mereka disajikan menarik dengan thumbnail.

Posting terkait dengan Widget Thumbnail untuk Blogger
Berikut adalah langkah-langkah rinci untuk menginstal widget posting terkait untuk blogger dengan thumbnail

1.First dari semua Login ke dashboard blogger Anda dan arahkan ke Layout >> Edit HTML dan centang "Expand Template Widget" kotak centang.

2. Sekarang Cari :

</head>

dan gantikan dengan script berikut ini :

<b:if cond='data:blog.pageType == "item"'>
<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, “Times New Roman”, 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 type='text/javascript'>
var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvM-oU0vLOdSgg-cBQOFHmktN8fhEropPeLk6n-FwvJGkUaOLprr-dr9vcBtECgvwkVyusTIsGN-0iM7XWrqTTMq6oCt1uWlx35nEd-zyFLogkWNBf9Q6210xexwHbAdBxjyNa-SYEw6Q/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://bloggergadgets.googlecode.com/files/related_posts_with_thumbnails_min.js' type='text/javascript'/>
</b:if>

</head>

3. Temukan kode :

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

Jika kode di atas tidak ada, cari kode script berikut ini :

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

Setelah itu letakan kode di bawah ini tepat di bawah kode tersebut.

<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>
</b:if> 
<b:if cond='data:blog.url == data:blog.homepageUrl'><b:if cond='data:post.isFirstPost'>
<a href='http://www.bloggerplugins.org/2009/08/related-posts-thumbnails-blogger-widget.html'>

'http://bloggertemplates.bloggerplugins.org/' > </b:if></b:if>

4. Untuk mengatur jumlah related postnya, ubah kode berikut ini :


var maxresults=5;

coba juga dengan mengubah kode berikut ini.

max-results=6


5. Untuk mengubah judul "Related Post" nya ganti aja pada kode :


var relatedpoststitle="Related Posts";



6. Untuk mengubah default thumbnail, ganti kode script berikut ini :


var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvM-oU0vLOdSgg-cBQOFHmktN8fhEropPeLk6n-FwvJGkUaOLprr-dr9vcBtECgvwkVyusTIsGN-0iM7XWrqTTMq6oCt1uWlx35nEd-zyFLogkWNBf9Q6210xexwHbAdBxjyNa-SYEw6Q/s400/noimage.png";


7. Untuk mengganti warna garis gantikan kode berikut ini :


var splittercolor="#d4eaf2";