Membuat Artikel/Posting Terkait dengan Gambar/Thumbnail

artikel terkait blogspot

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:”).
Pos ini dipublikasikan di blog tutorial. Tandai permalink.

Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s