Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Ada Tiga Jenis Aplikasi Artikel terkait:

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

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, judul dan deskripsi. Anda tinggal memilih mana yang lebih menarik atau sesuai dengan Anda. Jika berminat dengan tipe aplikasi ini, tinggal ikuti langkah-langkah di bawah ini.

Membuat Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

• Masuk ke halaman editor HTML, kemudian cek Expand Template Widget agar seluruh elemen pembangun posting tampil.
• Salin kode di bawah ini, kemudian letakkan tepat di atas kode </head>:
  
  

  <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <style type='text/css'>
            #related_posts h4              {background:#1e4a76;color:#FFF;font:bold 11px Arial,Tahoma,Verdana;margin:0;padding:5px 7px 4px 10px;text-shadow:1px 1px #000;text-transform:uppercase;}
            #relpost_img_sum               {height:308px;overflow:auto;margin:0;padding:5px;line-height:16px;}
            #relpost_img_sum:hover         {background:none;}
            #relpost_img_sum ul            {list-style-type:none;background:none;margin:0;padding:0;}
            #relpost_img_sum li            {border-top:1px solid #fff;outline:1px solid #DDD5CD;background:#EDE9E4;overflow:hidden;margin:0;padding:5px;height:64px;list-style:none;}
            #relpost_img_sum li:hover      {background-color:#F0ECE9;}
            #relpost_img_sum .news-title a {color:#2C6BA8;}
            #relpost_img_sum .news-title   {font-family:Arial,Serif;font-weight:bold !important;display:block;margin-bottom:4px;}
            #relpost_img_sum .news-text    {display:block;text-align:left;font-weight:normal;text-transform:none;color:#333;}
            #relpost_img_sum img           {float:left;margin-right:14px;padding:4px;background:#fafafa;border:1px solid #ddd;width:55px !important;height:55px !important;}
       </style>
       <script type='text/javascript'>
            var relnojudul = 0;
            var relmaxtampil = 10;
            var numchars = 200;
            var morelink = "baca selengkapnya";
       </script>
       <script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.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.

  
  Salin kode di bawah ini, kemudian letakkan tepat di atasnya:
  
  

  <!-- Artikel Terkait dengan Gambar dan Ringkasan -->
  <b:if cond='data:blog.pageType == &quot;item&quot;'>
       <div id='related_posts'>
            <h4>Artikel Terkait</h4>
            <b:loop values='data:post.labels' var='label'>
                 <script expr:src='&quot;/feeds/posts/default/-/&quot; + data:label.name + &quot;?alt=json-in-script&amp;callback=relpostimgcuplik&amp;max-results=50&quot;' type='text/javascript'></script>
            </b:loop>
            <ul id='relpost_img_sum'>
                 <script type='text/javascript'>artikelterkait();</script>
            </ul>
       </div>
  </b:if>
  <!-- Akhir Artikel Terkait dengan Gambar dan Ringkasan -->

• 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 frase post-footer umumnya memang berada di bawah posting. Begitu saja logikanya.
  
• Jika sudah selesai, klik Simpan Template. Sekarang kita masuk ke tahap penyesuaian.

Penyesuaian-Penyesuaian:

• Atur ukuran thumbnail dengan mengubah nilai dalam selektor #relpost_img_sum img{ ... }, yaitu pada deklarasi width:55px dan height:55pxnya.
• var relmaxtampil adalah variabel untuk menentukan jumlah posting yang akan ditampilkan.
• var morelink adalah variabel untuk menentukan teks "baca selengkapnya". Kamu bisa mengganti "baca selengkapnya" dengan "read more" atau yang lainnya.
• var numchars adalah variabel untuk menentukan jumlah karakter ringkasan.
• Tentukan judul artikel terkaitmu dengan mengubah teks "Artikel Terkait" pada kode yang Saya beri tanda.

Sumber: http://modification-blog.blogspot.com

Sumber :

---

DAFTAR ISI

---