Buat Artikel Berkaitan Cantik dan Unik dengan Ikon Blogger

Sebelumnya saya pernah menulis tentang membuat artikel berkaitan tanpa plugin yang mana khusus untuk blog berbasis wordpress. Adapun kali ini saya akan berbagi mengenai cara membuat related post/ artikel berkaitan untuk blogger. Kalau untuk fungsi dan kegunaannya sepertinya tak perlu saya bahas lagi karena sudah saya bahas sebelumnya, dan saya yakin sobatpun sudah paham.
Ada dua tipe umum related posts atau artikel berkaitan, menggunakan thumbnail/ gambar dari postingan atau hanya dengan list/ daftar post artikel serupa. Nah, tipe kedua ini lebih sederhana namun sebenarnya lebih baik dari pada menggunakan thumbnail. Tipe kedua ini dapat melisting konten lebih banyak, juga membuat page loaded lebih cepat dan halaman terasa ringan. Biasanya style pada artikel berkaitan cantik blogger ini menggunakan tipe list standar, yaitu menggunakan nomor dan bullet. Namun kita dapat membuatnya lebih menarik dengan menambakan ikon situs/ blog kita sebagai isi listnya, atau bisa juga dengan gambar lain sesuai dengan keinginan kita. Tuh kayak di gambar bawah.

Cara membuat artikel berkaitan blogger dengan icon ini mudah saja, cukup dengan 2 langkah mudah:
Pertama, log in ke dashboard bloggermu- klik Design – Edit HTML dan check “Expand Widget Templates” supaya kodenya nggak ngumpet. Cari kode </head> dan tambahkan kode di bawah ini sebelum kode </head> tadi. Kira-kira seperti ini jadinya:

<!-- Mulai Kode-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{width:100%;font-size:12px tahoma;margin: 15px 0 7px 0;}
#related-posts .widget{list-style-type:none;margin:5px 0 5px 0;padding:0;}
#related-posts .widget h2, #related-posts h2{font-size:20px;
font-weight:normal;margin:5px 7px 0; padding:0 0 5px;}
#related-posts a{text-decoration:none;}
#related-posts a:hover{text-decoration:none;}
#related-posts ul{border:medium none;margin:16px;padding:0;}
#related-posts ul li{display:block;background:url(/favicon.ico) no-repeat;
padding:0 0 1px 21px;margin-bottom:3px;line-height:1.6em;
border-bottom:1px dotted #cccccc;}
#related-posts ul li a{background:#fff;display:block;}
#related-posts ul li a:hover{background:#E9F5FB;}
</style>
<script src='https://storage.googleapis.com/google-code-archive-downloads/v2/code.google.com/dvslabs/relatedpost-icon.js' type='text/javascript'/>
</b:if>
</head>

Kalau gambarnya ingin dirubah, tinggal ganti saja favicon.ico dengan url image yang kamu kehendaki

Kedua, Cari kode berikut

<data:post.body/>

Kode itu berfungsi untuk menampilkan isi post/ konten. Untuk beberapa template mungkin ada beberapa kode serupa, tapi pastikan cari kode itu untuk bagian single post atau halaman posting biasa (bukan homepage/ static), dan biasanya ditandai dengan id “item”. Setelah itu tambahkan kode di bawah setelah kode tadi:

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='related-posts'>
<font face='Arial' size='3'><b>Related Posts : </b></font>
<font color='#FFFFFF'><b:loop values='data:post.labels' var='label'>
<data:label.name/><b:if cond='data:label.isLast != &quot;true&quot;'>,</b:if>
<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=7&quot;' type='text/javascript'/></b:if></b:loop> </font>
<script type='text/javascript'> removeRelatedDuplicates(); printRelatedLabels();
</script>
</div>
</b:if>

Kode max-results=7 (lihat line 7) menunjukkan jumlah post maksimal atau artikel berkaitan yang akan tampil pada setiap halamannya, sesuaikan saja sesuai kehendakmu, dan selesai. Untuk widget keren lainnya, silahkan baca juga Widget Navigasi Halaman Cantik untuk Blogger. Oke deh, selamat mencoba! Adapted from my EN version : Related Post with Icon Widget for Blogger