Buat Artikel Terkait Thumb Blog

Buat Artikel Terkait Thumb Blog

F-Three Vermelho - Salam blogging! Salam kompak dan sehat selalu untuk kita semua. Pada kesempatan kegiatan blogging hari ini Saya ingin kembali memberikan Tris Dan Tips seputar Desain Blog tentang Buat Artikel Terkait Thumb Blog yang sebelumnya pernah juga Saya membuat artikel serupa, hanya saja ada sedikit perbedaan untuk tips kali ini. Bisa di lihat postingan sebelumnya untuk Cara Membuat Artikel Terkait – Related Post

Buat Artikel Terkait Thumb Blog

Menggunakan Thumb Buat Artikel Terkait Di Bawah Postingan Blog

Kembali sedikit di bahas perbedaan tips untuk postingan sebelumnya untuk Cara Membuat Artikel Terkait – Related Post, memiliki perbedaan yang mana artikel terkait sebelumnya hanya menampilkan teks link postingan blog saja, dan untuk yang sekarang Saya akan coba tambahkan dengan bumbu kode variasi agar tampilan terlihat lebih menarik lagi untuk di lihat dan di pasang. Lihat contoh hasilnya seperti gambr berikut.

Cara Buat Artikel Terkait Thumb Di Blog

Berikut langkah-langkahnya yang harus di perhatikan dan di implementasikan jika Anda tertarik lanjutkan!

1. Masuk Blogger.com
2. Pilih icon "Go to post list" ->> Template
3. Back up template
4. Pilih Edit HTML ->> Proceed ->> Centang "Expand Widget Templates"
5. Tekan Ctrl+F untuk mencari cepat kode </head>
6. Letakkan kode berikut tepat di atas kode tersebut

<!--Related Posts with thumbnails Scripts and Styles Start-->
<!-- remove --><b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related-posts{float:center;text-transform:none;height:100%; width:auto;min-height:100%;padding-top:5px;padding-left:5px}#related-posts h2{font-size:1.6em;font-weight:bold;color:black;font-family:Georgia,&#8220;Times New Roman&#8221;,Times,serif;margin-bottom:.75em;margin-top:0;padding-top:0}#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=&quot;https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwoD3UnS5A0pqfjtyxHXsIdem6TjTyFWw3rRtIxNuw6tgmtxl-dY4ZiMQ08JdgIMzsUqOq_GAy6j7_VtqQtuAlzKqnYXRQcAEPA_Yo4D9jAob92oTgVXiNRQnA3eaAza59_9ocoNtkI4/s72/no-image.png&quot;;
var maxresults=7;
var splittercolor=&quot;#d4eaf2&quot;;
var relatedpoststitle=&quot;Artikel Terkait&quot;;
</script>
<script src='http://berbagi-kreativitas.googlecode.com/files/related-posts-thumb.js' type='text/javascript'/>
<!-- remove --></b:if>
<!--Related Posts with thumbnails Scripts and Styles End--> 

7. Berikutnya cari kode <div class="post-footer-line post-footer-line-1"> letakkan kode berikut ini tepat di bawah kode tersebut, atau sesuaikan dengan template blog Anda

<!-- Related Posts with Thumbnails Code Start-->
<!-- remove --><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'/>
<!-- remove --></b:if>

8. Pratinjau, jika tidak ada error lanjutkan
9. Simpan template

Keterangan:

Untuk kode yang bercetakkan tebal bisa Anda rubah.
Link gambar:
https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgvwoD3UnS5A0pqfjtyxHXsIdem6TjTyFWw3rRtIxNuw6tgmtxl-dY4ZiMQ08JdgIMzsUqOq_GAy6j7_VtqQtuAlzKqnYXRQcAEPA_Yo4D9jAob92oTgVXiNRQnA3eaAza59_9ocoNtkI4/s72/no-image.png
adalah gambar thumb jika postingan blog tidak menggunakan gambar, maka gambar tersebut akan muncul pada artikel terkait, lihat gambar yang Saya lingkari.
Untuk Maxresults=7; adalah jumlah artikel yang ingin di tampilkan.
Artikel Terkait: Bisa di ubah menjadi Related post dan lain sebagainya sesuai keinginan.

OK selamat mencoba semoga berhasil, jika ingin ada yang di tanyakan jangan ragu sekian dan Salam.