Membuat Recent Post Dengan Thumbnail 2

Mirip dengan yang saya posting beberapa waktu yang lalu dan jika anda belum membacanya silahkan baca artikel tersebut yang berjudul Membuat Recent Post Dengan Thumbnail.

Dalam tutorial kali ini sebenarnya mirip saja dengan yang pertama bedanya hanya pada cuplikan artikel, kalu yang kemarin yang tampak hanya Thumbnail dan Judul Postingan saja akan tetapi untuk yang kali ini saya posting ada tambahan Cuplikan artikel.

Bedakan gambar berikut dengan gambar yang ada di postingan yang lalu: 

Cara membuatnya:

1. Login ke akun blogger anda

2. Klik menu Tata Letak

3. Klik Add Gadget

4. Pilih Html/Javascript

5. Copy dan paste kode berikut pada kotak yang muncul:

<style type="text/css"> 

#rp_plus_img{height:282px;overflow:hidden;border:solid 0px #585858;padding:6px 10px 14px 5px;background-color:none;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#000;}
#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:4px;font-size:11px;}
#rp_plus_img .news-text{display:block;font-size:10px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 0px #585858;width:55px;height:55px;}
</style>
<script
 type="text/javascript" 
src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script
 type="text/javascript" src=" 
http://bl1t4r.googlecode.com/files/recentpostscroolthum.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 25;
var numchars = 75;
</script>
<script src="URL BLOG ANDA/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
 

Catatan: Yang saya cetak merah ganti dan sesuikan dengan blog dan keinginan anda.

Selamat Mencoba!...

• Tweet
• Share
• Share
• Share
• Share