Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail

Ada Tiga Jenis Aplikasi Artikel terkait:

1. Alikasi artikel/Posting terkait tanpa gambar/thumbnail.
2. Alikasi artikel/Posting terkait dengan gambar dan judul saja.  (Yang akan anda baca saat ini)
3. Alikasi artikel/Posting terkait dengan gambar, judul, dan deskripsi.

perbedaannya hanya pada tiga komponen penting yaitu Gambar/Thumbnail, Judul Artikel, dan Deskripsi Artikel.

Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait dengan gambar dan judul artikel.. Jika berminat tinggal ikuti langkah-langkah di bawah ini.

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:").

Sumber :

---

DAFTAR ISI

---