Artikel Terkait dengan Gambar/Thumbnail

Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan judul artikel. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang terdiri dari gambar, judul beserta ringkasan artikelnya. Kamu tinggal memilih mana yang menurutmu lebih menarik atau sesuai dengan karaktermu. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini. Tapi jika tidak, mungkin kamu akan suka dengan tipe aplikasi artikel terkait thumbnail dan deskripsi artikel » baca tutorialnya di sini

Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail

• Masuk ke tab Rancangan, kemudian pilih Edit HTML.
• Cek Expand Template Widget agar seluruh elemen pembangun widget posting tampil.
• Salin kode di bawah ini, kemudian letakkan di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>
        #at-gambar         {text-transform:none;height:100%;min-height:100%;padding-top:5px;padding-left:5px;}
        #at-gambar a       {color:#895F30;overflow-x:hidden;text-align:left;}
        #at-gambar a:hover {background-color:#EAE7DB;color:#666;}
        #at-gambar img     {width:84px !important;height:84px !important;}
    </style>
    <script type='text/javascript'>
        var defaultnoimage    = "http://1.bp.blogspot.com/-htG7vy9vIAA/Tp0KrMUdoWI/AAAAAAAABAU/e7XkFtErqsU/s1600/grey.GIF";
        var maxresults        = 5;
        var splittercolor     = "#EBEBEB";
        var relatedpoststitle = "Catatan Lainnya:";
    </script>
    <script src='http://reader-download.googlecode.com/svn/trunk/terkaitlib.js' type='text/javascript'></script>
</b:if>

• Selanjutnya temukan kode ini:

<div class='post-footer'>

TIP: Tekan CTRL + F kemudian ketik class='post-footer' untuk mempermudah pencarian.

Jika sudah ketemu, salin kode ini kemudian letakkan di atasnya:

<!-- Artikel Terkait dengan Gambar -->
<b:if cond='data:blog.pageType == &quot;item&quot;'>
    <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'></script>
        </b:loop>
        <script type='text/javascript'>
            removeRelatedDuplicates_thumbs();
            printRelatedLabels_thumbs(&quot;<data:post.url/>&quot;);
        </script>
    </div>
    <div style='clear:both'/>
</b:if>
<!-- Akhir Artikel Terkait dengan Gambar -->

• Atau kamu juga bisa meletakkan kode tersebut di bawah kode <div class='post-footer-line post-footer-line-1'> atau kode <p class='post-footer-line post-footer-line-1'>. Intinya, kita akan meletakkan artikel terkait tersebut di bawah posting. Dan sebagian besar kode dengan embel-embel post-footer umumnya memang berada di bawah posting. Begitu saja logikanya. Titik.
• Jika sudah selesai, klik Simpan Template. Sekarang kita tinggal melakukan beberapa penyesuaian.

Penyesuaian-Penyesuaian

• Atur ukuran thumbnail dengan mengubah nilai dalam selektor #at-gambar img{ ... }, yaitu pada deklarasi width:84px dan height:84px.
• var defaultnoimage adalah tampilan untuk thumbnail cadangan jika posting yang dimaksud tidak memiliki gambar (umumnya menggunakan gambar "No Image").
• var maxresults adalah variabel untuk menentukan jumlah posting maksimal yang akan ditampilkan.
• var splittercolor adalah variabel untuk menentukan warna garis batas.
• var relatedpoststitle adalah variabel untuk menentukan judul artikel terkaitmu (dalam hal ini adalah "Catatan Lainnya:").