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.


tutorial blog Mbahyar

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. 

10 comments:

  1. Ijin Copas ! sangat bermanfaat !!! Terimakasih

    BalasHapus
  2. terimakasih banyak sobat, oh ya untuk wordpressnya gimana??

    BalasHapus
  3. info artikelnya sangat bermanfaat sob, salam kenal boleh kan

    BalasHapus
  4. Wah, makasih Mas Bro. udah jadi tuh di blog ane.

    BalasHapus
  5. gaaaaaaaaaaaaakkkkkkkkkkkk bisaaaaaaaaaaaaaaaa.......

    BalasHapus
  6. mantab gan,, izin pakek ya? kunjgannya

    BalasHapus
  7. mantap gan, tapi saya terlanjur membuat artikel terkait tnpa gambar ni, kalo digabungin sama ini tar malah terlihat jelek

    BalasHapus
  8. Makasi gan atas infonya! Tapi kok di blog ane ga berfungsi ya?
    Kunjungi Blog Ane!

    BalasHapus
  9. gan knp yh setiap kali sy mencoba membuat related pos dg gambar selalu gagal?

    BalasHapus

berikan komentar anda disini...
Terimakasih atas komentar anda...