Cara Membuat Artikel terkait (Related Post) Dengan Gambar/Tumbnail

Artikel terkait ini dilengkapi dengan gambar dengan ukuran sedang dan judul posting yang terletak tepat di bawah gambar. Survei juga membuktikan bahwa membuat artikel terkait / related post yang dilengkapi dengan gambar ini akan lebih banyak dilihat dan diklik oleh pengunjung / pembaca artikel, karena tampilannya yang keren dan membuat pengunjung penasaran dan terpukau, Lebay :D

Penerapan CSS & JavaScript Artikel Terkait Bergambar

Masuk / Login ke www.blogger.com
Pada Dashboard pilih Template → Edit HTML → Klik di dalam kotak EDIT kemudian tekan CTRL + F, dan cari code ]]></b:skin> 

Kemudian COPAS kode dibawah ini di atas kode ]]></b:skin>

    <b:if cond='data:blog.pageType == "item"'>
    <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,Times New Roman,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 type='text/javascript'>
    var defaultnoimage="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiWyUAHsIPstafWfBsQVkRgn6nKgIssyo1jaMseeNWIWVI02St_IaKrMrpE3-DQAE18ku8US7ODXBRbCIveMMeDeRfyakkDg53MI84NkzAY5Pw0HpeKUGv1xSLstgQLo476Zo6cv6piHlE/s400/noimage.png";
    var maxresults=5;
    var splittercolor="#d4eaf2";
    var relatedpoststitle="Related Posts";
    </script>
    <script src='http://artikel-terkait-bergambar.googlecode.com/files/artikel-terkait-bergambar.js' type='text/javascript'/>
    </b:if>

Penerapan Kode HTML Artikel Terkait Bergambar

Tahap ini merupakan tahap akhir pada tutorial membuat artikel terkait dengan gambar / thumbnail yang nantinya akan memunculkan artikel-artikel terkait dengan jumlah yang sudah ditentukan atau sesuai ketentuan pengguna, caranya

    Silahkan Anda cari kode <data:post.body/>
    Kemudian letakan kode di bawah ini setelah kode <data:post:body/>

    <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'/>
    </b:if>

    Simpan Template (Save Template)

Keterangan Terkait Kode Artikel Terkait Bergambar
1. Artikel terkait dengan gambar ini bekerja secara otomatis jadi Anda tidak perlu merubah atau menambahkan alamat feeds yang sudah ada.

2. Artikel terkait dengan gambar ini bekerja pada halaman postingan dan kode di atas tidak berlaku di halaman utama / Home Page.

3. Untuk merubah tampilan artikel terkait dengan gambar, Anda bisa merubah CSS sesuai keinginan jika Anda paham untuk mengeditnya,

4. var maxresults=5; Jumlah artikel terkait yang muncul pada setiap artikel / postingan.

5. var relatedpoststitle="Related Posts"; Judul artikel terkait dan muncul di bawah postingan.

Demikian tutorial tentang  Cara Membuat Artikel terkait (Related Post) Dengan Gambar/Tumbnail yang bisa saya share. dan semoga bermanfaat untuk sobat semua.