MEMBUAT POSTINGAN TERKAIT PADA BLOG

Untuk memaksimalkan kenyamanan pembaca blog kita, alangkah baiknya jika disediakan postingan terkait/related post di bawah isi postingan di blog kita. Hal ini memungkinkan para pembaca akan lebih teratrik membaca postingan kita lainnya yang ada sangkut pautnya dengan postingan yang sedang dibaca, tentunya postingan terkait ini terkelompok dalam satu label. Berikut screenshotnya :

Baiklah, untuk mempersingkat waktu maka yang perlu anda lakukan adalah :

1. Masuk ke halaman template
2. Lalu masuk ke halaman EDIT HTML
3. Carilah kode </head> dengan menggunakan CTRL+F
4. Lalu letakkanlah kode berikut tepat diatas kode </head>

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- 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-left: 5px;
}
#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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgla0WBFDPyjhRtYBJMfmrHVR7CznQLY0tFJiGa51Za1dVgQRb9Q-Mm4LJ-aixVilT6aezvXbZdwbXJ1VkU7wqMtn1-ANnwWBtQewzW5XNYMTAniTi_oKbPmfMHqli_jQXEN-9USe3RfH42/s1600/images.jpg&quot;;
var maxresults=10;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Postingan Terkait&quot;;
</script>
<script src='https://sites.google.com/site/seociyussite/file/post_terkait_dengan_gambar.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

5.   Setelah itu carilah kode <div class='post-footer-line post-footer-line-1'> atau <p class='post-footer-line       post-footer-line-1'> Jika ketemu, pastekan kode dibawah ini tepat di bawahnya : (jika terdapat dua               kode yang sama, maka anda harus meletakkan kode berikut ini tepat di bawahnya, jika hanya satu, ya           hanya satu saja)

<!--Postingan Terkait Dengan Gambar Kode Mulai-->
<!-- 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'>
</b:if></b:if>
<!--Postingan Terkait Dengan Gambar Kode Selesai-->

6.    Untuk mengatur posisi judulnya carilah padding-left: semakin besar semakin ke kanan. Untuk mengganti        judulnya edit tulisan Postingan Terkait. Sedangkan untuk mengubah warna hover cari dan editlah                    background-color: ganti sama warna yang sesuai dengan selera anda.
7.    Untuk kode var maxresult dan max-result berguna untuk mengedit jumlah maksimal postingan terkait            yang akan dimunculkan.
8.    Setelah itu, barulah save KODE HTML anda.
9.    Lalu lihatlah hasilnya dengan cara meng-klik salah satu postingan anda, dan lihatlah di bagian bawah              postingan anda, sudah muncul bukan? :)

Semoga artikel sederhana ini berguna, artikel ini saya tulis dari sumber aslinya yaitu seociyus.blogspot.com yang saya

modifikasi sedikit. Saya ucapkan terima kasih kepada seociyus.blogspot.com karena dari sanalah saya belajar banyak.

______________________________

Mungkin itu saja yang dapat saya share kepada anda semua, semoga bermanfaat.

Oleh : Wahyu qadarillah
______________________________