Cara Membuat Related Posts untuk Blogger

Menampilkan link ke posting terkait bersama dengan posting yang sesuai akan membantu anda meningkatkan tampilan halaman / pengguna. Pengguna akan tergoda untuk melihat posting terkait ketika mereka disajikan berita atau artikel. Ini adalah salah satu media yang dihasilkan oleh blogger untuk setiap posting.

Untuk menampilkan widget Related Posts ini, saya akan menggunakan gambar upload untuk posting yang menggunakan gambar blogger(dari editor posting) Related Posts Widget dengan Thumbnail untuk Blogger. Berikut adalah langkah-langkah selengkapnya untuk menginstal widget/script posting terkait untuk blogger :

1. Pertama masuk ke dashboard blogger anda dan arahkan ke Layout >> Edit HTML dan centang kotak "Expand Template Widget"

2. Sekarang cari kode </head> dengan menggunakan Ctrl + F dan copy paste kode berikut sebelum kode </head>

<!--Related Posts with thumbnails Scripts and Styles Start-->

<!-- remove --><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 type='text/javascript'>

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWcGNZy2UPNrPnrlXurSozq-p6ROeovcZuuERy4X60iyIACAAMu1cbJDDd6NvJS-Anj6gAcTadbpQIczA_d0xF_NkIstjgaIMxFn2h9i3YC5RQ9WmwgpzgCnYle3jMRBHSpsMJgB55Cw/s400/noimage.png";

var maxresults=5;

var splittercolor="#d4eaf2";

var relatedpoststitle="Related Posts";

</script>

<script src='http://blogergadgets.googlecode.com/files/related-posts-with-thumbnails-for-blogger-pro.js' type='text/javascript'/>

<!-- remove --></b:if>

<!--Related Posts with thumbnails Scripts and Styles End-->

</head>

3. Sekarang silahkan cari kode berikut :

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

Dan jika anda tdk menemukan kode diatas maka anda bisa mencari kode berikut ini

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

Setelah salah satu kode tsb ketemu, tempatkan potongan kode berikut ini setelah kode diatas

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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=6&quot;' type='text/javascript'/></b:loop>
<script type='text/javascript'>
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
</script>
</div><div style='clear:both'/>
<!-- remove --></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'><img style="border: 0" alt="Related Posts Widget For Blogger with Thumbnails" src="http://image.bloggerplugins.org/blogger-widgets.png" /></a><a href='http://bloggertemplates.bloggerplugins.org/' ><img style="border: 0" alt="Blogger Templates" src="http://image.bloggerplugins.org/blogger-templates.png" /></a>
</b:if></b:if>
<!-- Related Posts with Thumbnails Code End-->

4. Anda juga dapat menyesuaikan jumlah maksimum dari posting terkait yang ditampilkan dengan mengedit kode di baris ini :

var maxresults=5;

5. Untuk mengedit judul widget, anda dapat mengubah kode dibaris ini :

var relatedpoststitle="Related Posts";

6. Untuk mengubah thumbnail aslinya, anda dapat mengedit kode dibaris ini :

var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhlWcGNZy2UPNrPnrlXurSozq-p6ROeovcZuuERy4X60iyIACAAMu1cbJDDd6NvJS-Anj6gAcTadbpQIczA_d0xF_NkIstjgaIMxFn2h9i3YC5RQ9WmwgpzgCnYle3jMRBHSpsMJgB55Cw/s400/noimage.png";

7. Untuk mengubah warna baris pemisah, silahkan edit :

var splittercolor="#d4eaf2";

untuk mengubah warna yang lain maka anda harus mengubah/memodifikasi kode CSSnya. Saya harap anda mau memberikan saya saran tentang cara untuk meningkatkan widget ini.

Tentang bagaimana untuk menampilkan posting terkait pada setiap halaman dan tidak hanya pada halaman posting, anda hanya perlu menghapus dua baris yang dimulai dengan <!-- remove --> dari kedua langkah no. 3 dan langkah no. 2 Seperti ini :

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

Dan

<!-- remove --></b:if>