Cara Pasang Artikel Terkait Dengan Thumbnail

Kembali lagi dengan saya, setelah udah lumayan lama gk ngepost. Pada kesempatan kali ini saya mau ngasih tutorial lagi yaitu untuk cara membuat artikel terkait pake thumbnail (gambar). Sebelumnya saya juga udah membuat tutorial untuk buat artikel terkait ini tapi gk memakai gambar nih baca disini tutorialnya.

Nah jadi anda punya dua pilihan untuk membuatnya mau make yang pake gambar atau tidak sesuikan dengan selera. Oke kembali untuk membuat yang pakai gambar. Nah kira-kira seperti di bawah inilah penampakan artikel terkait tersebut.

Atau lebih jelasnya, pasti udah pada tau wujudnya kayak gimana untuk yang biasa berkunjung di blog ini. Oke buat yang udah gk sabar untuk membuatnya langsung saja ikuti langkah-langkah di bawah ini.

1. Pertama seperti biasa masuk dulu ke akun blogger anda.
2. Kemudian masuk ke template terus ke EDIT Html.
3. Kemudian cari kode </head> kalau sudah ketemu letakan kode di bawah ini tepat di atasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#at-gambar{text-transform:none;overflow:hidden;margin:0;padding:0}#at-gambar h2{font-size:17px;font-weight:bold;padding:0 0 8px;margin:0}#at-gambar a{color:#222;overflow:hidden;text-align:left;font-size:13px}#at-gambar a:hover{background:#999;color:#fff}#at-gambar img{width:100%;margin:0;padding:0}
</style>
<script> var defaultnoimage = &quot;http://bit.ly/ZVN3pG&quot;; var maxresults = 7; var splittercolor = &quot;#ddd &quot;; var relatedpoststitle = &quot;Artikel Terkait :&quot;; </script>
<script src='http://msugeng.googlecode.com/files/terkait6.js'/>
</b:if>

4.Setelah meletakan kode script tadi, mari anda cari lagi kode <data:post.body/>. Kalau sudah ketemu letakan kode di bawah ini di bawah kode tersebut.

<div id='at-gambar'>
<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=999&quot;' type='text/javascript'/> </b:loop> <script type='text/javascript'> removeRelatedDuplicates_thumbs(); printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;); </script>
</div>

Jika belum muncul artikel terkaitnya coba anda letakan kode di atas di <data:post.body/> yang kedua, karena kode <data:post.body/> banyak di dalam template. Ingat yang ke dua dari atas. Atau sesuikan saja pada template anda.

5. Terakakhir tinggal Klik 'SAVE TEMPLATE'.

Gimana mudahkan? Kalau masih ada yang kebingungan silahkan berkomentar untuk bertanya. Ohya buat yang templatenya belum ada read more nya bisa anda baca tutorialnya disini untuk cara memasangnya. Oke semoga bermanfaat dan terima kasih.