Cara Membuat Related Posts Atau Artikel Terkait Bergambar

Cara Membuat Related Posts with Thumbnail

Untuk mempersingkat waktu langsung saja berikut ini adalah cara membuat related posts with thumbnail di blogspot, semoga bermanfaat untuk sobat semua.

1. 'Login' kedalam dasbor blog

2. Pilih 'template', untuk berjaga-jaga dari terjadinya error silahkan anda download template anda atau salin template terlebih dahulu.

3. Pilih 'edit html' kemudian simpan kode css berikut ini tepat diatas kode ]]></b:skin>

  /* Artikel Terkait Dengan Gambar Start
-------------------------------------------- */
#artikel-yg-nyambung h3{border-bottom:3px solid #666666;font-family:Arial;font-size:20px; color:#666666;padding-bottom: 0px;text-transform: uppercase;font-weight:normal;height:25px; margin-bottom:10px; margin-top:10px;}
#artikel-yg-nyambung ul {margin-bottom: 20px; padding:0px;list-style:none; }
#artikel-yg-nyambung ul li{float:left;height:160px;margin:0 8px 10px 0;width:144px;font-size:11px;font-weight:bold;}
#artikel-yg-nyambung img{padding:0 0;width:144px;height:90px;}
#artikel-yg-nyambung img:hover{opacity:0.7;}
#artikel-yg-nyambung ul li:nth-child(6n+6){margin-right:0;}

4. Masih dalam edit html, langkah selanjutnya adalah simpan kembali kode script berikut tepat di bawah kode <div class='post-footer'> Gunakan pencarian cepat untuk mencari kode tersebut dengan cara menekan tombol ctrl + f

 <!-- Artikel Terkait Dengan Gambar Start -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<div id='artikel-yg-nyambung'>
<script src="https://googledrive.com/host/0B91gOKs41YXtc2N4NFJCc201LW8" type="text/javascript"></script>
<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=19&quot;' type='text/javascript'/>
</b:loop>
<script type='text/javascript'>var maxresults=6;removeRelatedDuplicates();printRelatedLabels(&#39;<data:post.url/>&#39;);</script>
</div>
<div class='clear'/>
</b:if>
<!-- Artikel Terkait Dengan Gambar End -->

Keterangan: ubah tulisan yang berwarna Merah dan Biru yang terdapat dalam kode di atas tersebut sehingga menjadi seperti berikut:

Warna merah untuk mengubah lebar dan tinggi gambar thumbnail
Warna biru untuk merubah jumlah artikel yang akan tampil dalam artikel terkait

5. Pilih 'simpan template', 

Dan selesai sudah cara membuat related posts with thumbnail atau cara membuat artikel terkait dengan gambar di blogspot.