Membuat related post dengan gambar

Sebelumnya saya telah diposting tentang bagaimana membuat judul posting terkait untuk menampilkan daftar posting yang berkaitan dengan pos utama. Sehingga memudahkan pembaca untuk menemukan topik terkait. Untuk mempelajari lebih lanjut tentang posting terkait baca di sini.

Nah hari ini saya ingin membahas bagaimana membuat related post lebih menarik dengan menambahkan thumbnail atau gambar di dalamnya. Agar lebih jelas lihat gambar di bawah.


Untuk membuat related post dengan gambar seperti di atas;

• Halaman DRAFT, klik EDIT HTML Tab.
• Checklist Tick / Tick / Tick atau apa pun yang Anda menyebutnya dalam sebuah kotak kecil di depan tulisan BUKA WIDGET TEMPLATE. Di bawah tulisan membentang kotak sempit yang berisi kode HTML yang membuat BLOG TEMPLATE sakit kepala.
• Cari kode </ head> di kotak HTML. Lakukan pencarian cepat menggunakan CTRL + (plus) huruf F pada keyboard Anda dan kemudian tekan ENTER yang akan menampilkan kotak HALUS di sudut kiri bawah browser Anda. Jenis berikutnya </ head> pada kotak. Itu menjadi kode?
• Salin kode HTML berikut:

 

<!--Related Posts with thumbnails Scripts and Styles Start-->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
<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, &#8220;Times New Roman&#8221;, 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 src='https://sites.google.com/site/bloggerbugis/js/relatedthumbsbloggerbugis4U.js' type='text/javascript'/>
</b:if>
<!--Related Posts with thumbnails Scripts and Styles End-->

• Masukan / Paste kode di atas </ head> template blog Anda.
• Kemudian melihat <div class='post-footer-line post-footer-line-1'> pada kode template blog Anda. Jika Anda tidak dapat menemukan kode dalam template blog Anda, cari kode ini:
  <p class='post-footer-line post-footer-line-1'>      Masukan / Copy dan paste kode di bawah BAWAH salah satu kode di atas. Berikut kode:

<!-- Related Posts with Thumbnails Code Start-->
<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>
<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_thumbs&amp;max-results=6&quot;' type='text/javascript'/></b:if></b:loop>
<script type='text/javascript'>
var currentposturl=&quot;<data:post.url/>&quot;;
var maxresults=5;
var relatedpoststitle="Related Posts";
removeRelatedDuplicates_thumbs();
printRelatedLabels_thumbs();
</script>
</div><div style='clear:both'/>
</b:if>
<!-- Related Posts with Thumbnails Code End-->

    Simpan Template

    Selesai ........

Widget Tulisan / Artikel Terkait dengan Gambar / thumbnail Terkait akan menampilkan 5 Artikel Terkait berbasis label artikel. Jika Anda ingin menambah atau mengurangi jumlah Terkait Pos dalam acara itu, silahkan ganti angka 5 (lima) pada var maxresults=5; menjadi lebih atau kurang.

Jika Anda ingin mengubah Posting terkait menulis dengan kata / kalimat lain, silahkan ganti tlisan Related Post (jangan menghapus tanda petiknya) pada kode var relatedpoststitle="Related Posts";


Semoga tutorialny berguna.