Membuat Artikel Terkait Dibawah Posting Blog

Membuat Artikel Terkait Dibawah Posting Blog – tentu widget ini sudah tidak asing lagi keberadaanya didalam sebuah blog, widget yang sudah familiar dengan setiap artikel halaman blog dan banyak di gunakan oleh para blogger untuk menampilkan judul dari halaman artikel yang terkait atau istilah lainnya biasa di sebut-sebut related post. Memang sudah banyak widget artikel terkait yang lebih bagus dan dengan berbagai gaya, di antaranya mulai dari yang sudah dilengkapi icon thumbnail maupun tooltip dan yang lainnya. Namun pada tutorial ini saya akan membahas untuk membuat widget artikel terkait yang sederhana dan menurut saya lebih simple. Untuk memasang widget artikel terkait dibawah posting blog caranya cukup mudah. Apabila blog yang di gunakan belum terdapat widget artikel terkait bisa mengikuti langkah-langkah yang terdapat dibawah. Berikut tutorialnya untuk Membuat Artikel Terkait Dibawah Posting Blog.

1. Login ke akun blogger.
2. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>

#related-posts {clear: both;border:2px solid #52e052;}
#related-posts h2{color: #000;background-color: #52e052;padding:5px 5px 5px 10px;}
#related-posts ul{padding: 0;list-style: none;margin:0px;}
#related-posts ul li {border-top: 1px solid #333;border-bottom: 1px solid #111;background: #222;}
#related-posts ul li:first-child {border-top: none;}
#related-posts ul li:last-child {border-bottom: none;}
#related-posts ul li a {padding: 5px 5px 5px 10px;display: block;color: #fff;text-decoration: none;cursor: pointer; transition: padding-left 250ms ease-out;}
#related-posts ul li a:hover {padding-left: 20px;background: #111;}

3. Copy kode berikut ini lalu taruh di bawah kode <data:post.body/> atau bisa juga <div class='post-footer'>

<script type='text/javascript' src='http://faceblog-evolutions.googlecode.com/files/related-post.js'/>
<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 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&amp;max-results=5&quot;' type='text/javascript'/></b:if></b:loop>
<h2>Artikel Terkait</h2>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

4. Langkah terakhir Simpan template.

Perlu diperhatikan dalam langkah pemasangannya, biasanya didalam template blog terdapat 2 atau 3 kode <data:post.body/>. Anda bisa menaruh kode tersebut pada kode yang terakhir, namun apabila kurang sesuai maka silahkan di coba saja pada kode yang pertama atau kedua. Jika menaruhnya pada kode <div class='post-footer'> biasanya terdapat 2 kode tersebut. Anda bisa menaruhnya pada kode yang terakhir, namun apabila kurang tepat dengan template blog anda silahkan di coba saja pada kode yang pertama.