cara membuat artikel terkait (related post) dalam blog

-contoh artikel terkait dalam sebuah blog-

Pada gambar di atas adalah sebuah contoh yang sering kita jumpai ketika kita sedang menjelajahi sebuah blog. Buat para blogger itu dinamakan dengan artikel terkait, karena terlihat dari judulnya di atas, he.. Terus selalu ada pertanyaan di benak saya , kenapa ya di setiap blog yang saya kunjungi selalu saja setiap di bawah postingannya selalu ada artikel terkait lainnya, ma'lum saya masih pemula dalam dunia blog. Setelah saya membaca berbagai referensi dari berbagai blog, ternyata penggunaan artikel terkait dalam sebuah blog itu sangatlah di perlukan, dan malahan sudah menjadi kewajiban karena sangat berpengaruh sekali terhadap SEO suatu blog. 

Nah disini saya ingin membagi sedikit dengan ilmu yang telah saya dapatkan tentang bagaimana cara memasang atau membuat artikel terkait setelah postingan atau di bawah postingan.

langsung saja ke langkah yang pertama..

Cara memasang Artikel terkait (related post) di bawah postingan.

1. kita harus log in dulu pada akun Blogger milik kita

2. Jika kita menggunakan tampilan blogger yang dulu kita klik "RANCANGAN"  kemudian klik "EDIT HTML". tetapi jika menggunakan tampilan yang baru. Kita klik "TEMPLATE", klik "EDIT HTML" kemudian klik "LANJUTKAN".

3. Jangan lupa setelah itu klik "Expand Template Widgets" yang berada di pojok kiri atas.

4. Cari kode </head>, biar cepat tekan F3 lalu masukan kode </head> ke dalam kotak pencarian

5. Setelah ketemu, letakkan kode HTML di bawah ini tepat di atas kode </head> tadi.

<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 .widget {padding-left:5px;margin-bottom:10px;}
#related-posts .widget h2, #related-posts h2 {font-size:1.6em;font-weight:bold;color:#000;font-family:Arial, Verdana;margin-bottom:0.75em;margin-top:0em;padding-top:0em;}
#related-posts a {color:#;}
#related-posts a:hover {color:#;}
#related-posts ul {list-style-type:none;margin:6px 0 10px 12px;padding:0;text-decoration:none;font-size:13px;}
#related-posts ul li {list-style-type:none;margin-bottom:5px;padding-left:25px;padding-top:0;display:block;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhLM6636QJNzWT2UONeyIftEafp91fdchS30KPfDPddFZgitqAVwVVHzxbP1YLLzwnn7pcPcepaQFAzMrnkEpP8HpgcP8Xu_og9Q2sV2CfsUiOjg8U3qY8QXVPGHrOzM7-48XdhURIQGjA/s400/arrowbullet.png) no-repeat;}
</style>
<script type='text/javascript'>
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='http://wandhy.googlecode.com/files/artikel-terkait-v2.js' type='text/javascript'/>
</b:if>

6. Kemudian cari lagi kode <data:post.body/>, jika terdapat dua kode. Maka letakkan kode di bawah ini tepat di bawah kode <data:post.body/> yang kedua.

<div id='related-posts'>
<b:loop values='data:post.labels' var='label'>
<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:loop>
<script type='text/javascript'>
var maxresults=7;
removeRelatedDuplicates();
printRelatedLabels(&:quot;<data:post.url/>&quot;);
</script>
</div>

7. klik simpan dan lihat hasilnya

keterangan :

Untuk kata Artikel terkait yang berwarna merah, rekan-rekan bisa mengubahnya dengan kata-kata keinginan sobat (misalnya, jangan lupa kunjungi juga, atau yang lainnya)

Dan untuk angka 7 yang berwarna biru itu adalah jumlah artikel yang akan di tampilkan pada artikel terkaitnya. Rekan-rekan bisa mengubahnya sesuai selera rekan-rekan semua.

Semoga berhasil dan semoga yang saya bagikan bisa menjadi berkah buat saya. Aminn..

Untuk rekan-rekan jangan lupa kllik like nya ya....

Posted in: Tutorial Blog