Artikel Terkait Cantik Untuk Blogspot

Sebenarnya beberapa bentuk tampilan artikel terkait sudah banyak dibahas, namun kali ini saya akan berikan satu model artikel terkait cantik untuk blogspot dari DTE. Artikel terkait ini tidak berat ketika di loading dan dilengkapi dengan thumbnail gambar serta ringkasan artikel. Disamping itu tampilannya dijamin menarik. Yang jelas...tampilan artikel widget ini tidak kalah cantinya dengan lainnya. Baiklah...sekarang mari kita bahas cara membuat artikel terkait cantik untuk blogspot. Ikuti langkah berikut.

 Log in ke blogger
Klik Template
Centang Expand Template Widget
Masukkan kode berikut di atas kode </head>

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style type='text/css'>
#related_posts h4{background:#BDBDBD; 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:#FAFAFA; overflow:hidden; margin:0; padding:5px; height:64px; list-style:none}
#relpost_img_sum li:hover{background-color:#F2F2F2}
#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 = &quot;baca selengkapnya&quot;;
</script>
<script src='http://reader-download.googlecode.com/svn/trunk/atdeskripsi.js' type='text/javascript'/>
</b:if>

Selanjutnya masukkan kode berikut di bawah kode div class='post-footer-line post-footer-line-1

<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'/>
          </b:loop>
          <ul id='relpost_img_sum'>
               <script type='text/javascript'>artikelterkait();</script>
          </ul>
     </div>
</b:if>

Catatan: anda juga bisa memasukkan kode ke dua di bawah kode <data:post.body/>. Bila template anda disertai readmore, maka terdapat dua kode <data:post.body/>, masukkan dibawah kode ke-2. 

Selanjutnya klik Simpan Template dan lihat hsailnya
Selamat mencoba dan sukses selalu.


Source Code: DTE :]

"keep spirits and do the best"