membuat widget recent post bergerak pada blog

widget recent post atau widget postingan terakhir yang di buat. berfungsi sebagai navigasi untuk memberikan informasi pembaca blog tentang postingan terbaru.

biasanya terletak di pinggir kanan atau kiri blog. widget ini memiliki animasi bergerak kebawah satu persatu. anda bisa lihat seperti di blog ini

cara pemasangannya cukup mudah yaitu :

1. buka blog anda terlebih dahulu

2. masuk ke menu tata letak

3. pilih tambahkan Gadget kemudian pilih    HTML/Javascript

4. copy pastekan code di bawah ini kedalam konten

<style type="text/css">
    #rp_plus_img{height:377px;}
    #rp_plus_img li {height:60px;padding:5px;list-style:none;
    background-color:#ffffff;
    border:solid 0px #000000;}
    #rp_plus_img a{color:#00000;}
    #rp_plus_img .news-title{display:block;font-weight:bold ;margin-bottom:4px;font-size:11px;
    text-align:justify;
    -moz-border-radius: 5px;}
    #rp_plus_img img{float:left;margin-right:14px;padding:4px;border:solid 1px #00000;width:55px;height:55px;}
   
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript">
</script>
<script src="https://sites.google.com/site/unwanted86/javascript/recentpost.js" type="text/javascript">
</script>
<script type="text/javascript">
    var speed = 1500;
    var pause = 3500;
    $(document).ready(function(){
    rpnewsticker();
    interval = setInterval(rpnewsticker, pause);
    });
   
</script>
<ul id="rp_plus_img"><script>
    var numposts = 5;
    var numchars = 0;
   
</script>     <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=rpthumbnt">
</script>     </ul>
<small><a href="http://nolproject.blogspot.com/2015/08/membuat-widget-recent-post-bergerak.html" target="_blank">get this widget</a></small>

5 .anda bisa mengedit kode tersebut misal jika anda ingin memberi border atau merubah background tinggal ganti kode :
     background-color:#f1f1f1;   // ganti kode warna background
     border:solid 1px #FFFFFF;   //mengubah border

Related Post