Pasang Related Posts With Thumbnail And Summary

Sebenarnya saya sudah pernah Memberikan Tutorial cara membuat related post di blogger, antara Lain :

1. Pasang Related Post (Artikel Terkait) Cantik Ala Utta'. dan
2. Pasang Related Post (Artikel Terkait) Thumbnails - Marquee (Berjalan).

Namun kali ini saya akan memberikan lagi tutorial cara membuat related posts with thumbnail and summary untuk blogger, tutorial ini sengaja saya buat untuk menjawab pertanyaan salah satu teman blogger kita yang menanyakan tentang bagaimana cara membuat artikel terkait yang ada gambar serta ringkasan nya.


Baiklah Saya tidak akan panjang lebar, langsung mulai aja yah sob. :D

1. Login ke Blogger.
2. Di halaman Dasbor, kita pilih Tata Letak.
3. Kemudian pilih Edit HTML
4. Beri tanda centang pada Expand Template Widget
5. Cari kode </head> , Lalu letakkan (copy paste) kode berikut ini di atasnya.

<b:if cond='data:blog.pageType == &quot;item&quot;'>
<style media='screen' type='text/css'>
/*----- http://ut2a-4down.blogspot.com/ Related Post -----*/
#akaUTta-related {width:100%;margin-left:5px}
.reltit {color:#333;font-family: Arial,Tahoma,Verdana;font-size: 16px;font-weight: bold;margin: 5px 0 0 0;padding: 5px 0;text-shadow: 1px 1px #eee;text-transform: uppercase;text-align:center;background:#111;}
#aU-related {float-left;margin: 0;padding: 5px 0;line-height: 16px;}
#aU-related ul {list-style-type: none;margin: 0;padding: 0;}
#aU-related li {width:46%;float:left;margin: 0 3px 0 3px;padding: 5px;height:auto;
list-style: none;border:1px solid #D3D3D3 !important;
-webkit-box-shadow:1px 1px 2px #CCC inset;box-shadow:1px 1px 2px #CCC inset;-moz-box-shadow:1px 1px 2px #CCC inset;height:145px;}
#aU-related li:hover {background-color: #f9f9f9;}
#aU-related a {text-shadow: 0 1px 1px #aaa;}
#aU-related .news-title {display: block;margin-bottom: 5px;display: block;font-size: 14px;text-align: left;}
#aU-related .news-text {display:block;font-size:12px;text-align:justify;font-weight: normal;text-transform:none;color: #333;}
#aU-related img {float:left;margin-right:5px;padding:4px;width:70px;height:70px;
border:1px solid #D3D3D3 !important;-moz-border-radius: 4px;-webkit-border-radius: 4px;border-radius:4px;-moz-box-shadow:1px 1px 2px #CCC inset;}
</style>
<script type='text/javascript'>//<![CDATA[
var relnojudul = 0;
var relmaxtampil = 10;
var numchars = 200;
var morelink = "Continue Reading...";
//]]></script>
<script src='http://ut2a-4down-blogspot-com.googlecode.com/files/relatednew_akaUTta.js' type='text/javascript'/>
</b:if>

KET:::
- Angka 10 adalah jumlah postingan yang ditampilkan, silahkan dirubah sesuai keinginan.

6. Selanjutnya cari lagi kode di bawah ini :

<div class='post-footer-line post-footer-line-3'/>

Atau jika tidak menemukannya cari kode berikut ini

<p class='post-footer-line post-footer-line-1'>

7. Jika sudah ketemu, taruh (copy paste) kode berikut ini di bawah salah satu kode di atas.

<div id='akaUTta-related'>
<p class='reltit'>Lihat Juga Artikel Terkait Lainnya :</p>
<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>
<a href='http://ut2a-4down.blogspot.com/' style='display:none;'>Blogger Tutorial + Template</a>
<ul id='aU-related'>
<script type='text/javascript'>akaUTtarelated();</script>
</ul>
</div>

8. Langkah Terakhir Simpan Template, dan selesai :D

Selamat mencoba sob, jika ada yang ingin ditanyakan ato masih bingung dgn cara diatas, silahkan tinggalkan komentarnya.Trims ^^ Please rate this article: