Senin, 18 Juni 2012

Membuat Recent Post Thumbnail Bergerak



Tampilan blog yang atraktif dan terlihat profesional menjadi daya tarik tersendiri bagi visitor. Salah satu upaya untuk itu dengan menampilkan Recent Post, fungsinya agar visitor lebih mudah melihat-lihat postingan melalui cuplikannya.

Setelah memposting Cara membuat Related Post yaitu widget yang berguna untuk mengarahkan pengunjung pada postingan yang sejenis, berikut ini cara membuat recent post thumbnail bergerak di blog :

  1. Login ke akun blogger.com.
  2. Pilih "Rancangan" atau "Design".
  3. Pilih "Add gadget" pada bagian "Page elements" dan lalu pilih "html javascript".
  4. Isikan judul widgetnya dan copas kode recent post di bawah ini ke kotak tersebut dan ganti tulisan merah dengan alamat blog sobat.
<center><style type="text/css">
#rp_plus_img{height:300px;overflow:hidden;border:solid 0px #fff;padding:6px 10px 24px 5px;background-color:transparent;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0}
#rp_plus_img li{border:1px; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:60px;padding:5px;list-style:none;}
#rp_plus_img a{color:#F68629;}
#rp_plus_img .news-title{display:block;font-size:14px;font-weight:bold !important;color:#F68629;text-align:justify;}
#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#000000;text-align:justify;}
#rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #F68629;width:95px;height:55px;}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="http://theplick.googlecode.com/files/newsticker-plick.js" type="text/javascript">
</script>
<script type="text/javascript">
var speed = 1000;
var pause = 2500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img"><script>
var numposts = 20;
var numchars = 0;
</script> <script src="http://techno-herry.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script> </ul>
</center>

Kemudian "Save" dan lihat hasilnya.

Selamat mencoba...

8 komentar:

Mobile mengatakan...

Terima kasih mas tutorialnya, dengan sedikit modifikasi jadi tampil manis di blog saya http://www.s7eep.com

Unknown mengatakan...

thanks gan infonya...

Edyn askar mengatakan...

Wah bisa gerak yah... langsung dicoba ajha dah... thank yah ilmunya...

topSpot | Find your top spot here mengatakan...

Mantab sob! Thanks buat tutorialnya :)

topSpot | Find your top spot here mengatakan...

Lumayan nih widget nya sob.. :)

MerongoZ mengatakan...

Terima kasih ya bang sdh dishare.

Klik Lowongan Pekerjaan mengatakan...

boleh jg widgetnya boss
dicoba dulu
sepatu kerennscu

Ciri Masa Subur mengatakan...

mau nyoba juga gan,siap tau bisa menambah keren blog ane

laptop
xiaomi