Membuat Artikel Terkait Blog dengan desain yang keren dan dinamis

Apa itu artikel terkait? Artikel terkait merupakan daftar artikel yang berhubungan dengan artikel yang sedang dibaca. Dalam blog tentu berguna untuk memudahkan pembaca karena melihat daftar artikel yang berhubungan dengan artikel yang sedang dibaca oleh visitors atau ada artikel lain dari blog anda yang memikat visitors untuk membacanya. Ini berguna untuk blog anda karena visitors jadi tertarik untuk membaca artikel dalam blog anda dan meningkatkan jumlah visitors/pengunjung.
Artikel terkait saling mengaitkan satu sama lain menggunakan label / tag. Oleh karena itu jangan lupa memberi label / tag pada saat membuat postingan artikel. Serta selain label / tag untuk kata kunci pencarian juga untuk mengelompokkan artikel anda ke dalam kategori apa, sehingga akan rapi pengelompokkan artikel blog anda tidak bercerai-berai

!. Membuat artikel terkait blog dengan gambar berbentuk thumbnail seperti gambar dibawah ini :

2. Tentunya log in dulu ke dasbor blog anda kemudian pilih template -> Edit HTML

3. Jika sudah silahkan letakkan kursor pada tulisan kode html pada template anda kemudian tekan Ctrl + F nanti akan muncul kotak pencarian di pojok kanan atas. Copykan kode ini ]]></b:skin>
dan pastekan pada kolom tadi,

HTML Artikel Terkait

letakkan kode CSS / Java Script dibawah ini tepat dibawah kode ]]></b:skin> :

<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/AVvXsEjziPNHGe7EhgSHPqwViMMGWR1ubSYGyLhMx-d5a23NgcVa9LeZ3ppRNQrQKe6lI1IdjVcvBFo0Fyiq8QpLmI02S7K1OhJbf4bvcAA_YYHR6OzhbP2LpaDuL-S9_AvxJHC8HJPrM1_Q5cM/s400/noimage.png";
var maxresults=5;
var splittercolor="#d4eaf2";
var relatedpoststitle="Related Posts";
</script>
<script src='http://giovanialuha.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
</b:if>

var defaultno image : gambar yang akan nampak mewakili pada artikel terkait jika posting blog anda tidak ada gambarnya. anda bisa merubah dengan gambar lain sesuai keinginan anda

var maxresults : jumlah artikel terkait yang nampak di blog anda, andapun bisa merubah jumlah tersebut sesuai keinginan anda.

4. Sekarang tinggal tahap terakhir yaitu cari kode seperti ini <data:post.body/> atau silahkan copy dan pastekan dalam kotak pencarian html seperti tadi.

peletakan kode html yang benar

Letakkan kode html dibawah ini tepat setelah <data:post.body/> . bila ada banyak kode <data:post.body/> letakkan pada kode yang kedua atau ketiga semisal seperti gambar diatas :

<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'/>
</b:if>

Pada tulisan yang berwarna merah anda bisa menggantinya dengan Artukel Pos / terserah keinginan anda.

Klik Save Template dan lihat hasilnya :), jika anda belum berhasil lakukan dengan sangat hati-hati dan teliti . Sekian artikel singkat dari saya semoga bermanfaat untuk pembaca semua
Terima Kasih