Artikel/Posting Terkait dengan Gambar dan Ringkasan Artikel

Pembaharuan 10 Juni 2015: Widget ini sudah usang. Lebih baik pakai yang ini.

Gambar di atas adalah contoh hasil tampilan aplikasi artikel/posting terkait blogspot dengan gambar dan deskripsi. Selain artikel/posting terkait tipe ini juga terdapat tipe artikel/posting terkait yang hanya terdiri dari gambar dan judul saja. 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 judul saja » baca tutorialnya di sini

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

• 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