Kali ini saya akan share tentang cara membuat random post bergerak pada sidebar blog Sobat,,dengan menambahkan Widget Random Post tentu saja akan memudahkan pengunjung untuk menemukan Artikel kita,,terlebih lagi kalau widget tersebut dibuat bergerak tentunya akan semakin menarik untuk dilihat Contohnya seperti dibawah ini


Langkah-langkah membuat random post bergerak :

  1. Login ke blogger
  2. Pilih Rancangan kemudian Tambah Gadget
  3. Pilih HTML/JavaScript
  4. Masukan Semua kode HTML dibawah


<div style="margin-bottom: 15px;">

<style type="text/css">

#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;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:70px;padding:1px;list-style:none;}

#rp_plus_img a{color:#3366ff;}

#rp_plus_img .news-title{display:block;font-weight:bold !important;margin-bottom:5px;font-size:14px;}

#rp_plus_img .news-text{display:block;font-size:11px;font-weight:normal !important;color:#282828;text-align:justify;}

#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:65px;}

</style>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>

<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>

<script type="text/javascript">

var speed = 450;

var pause = 4000;

$(document).ready(function(){

rpnewsticker();

interval = setInterval(rpnewsticker, pause);

});

</script>

<ul id="rp_plus_img">

<script style="text/javascript">

var numposts = 30;

var numchars = 60;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>

</ul>

</div>
Catatan :

*. Kode  adalah kecepatan untuk berpindahnya post ke post lain, sobat bisa ganti nomornya sesuai dengan keinginan sobat.
*. Kode  adalah waktu berhentinya post/di pause.., sama seperti diatas sobat bisa merubahnya sesuai dengan keinginan sobat.
*. Kode  adalah jumlah post yang akan di tampilkan di recent post. sobat bisa mengubahnya sesuka hati..

5.Kemudian tinggal di save dan sobat lihat hasilnya..

2 komentar:

 
Top