Cara Membuat Widget Recent Post yang Bergerak

7:28 PM 2 Comments

Assalamu'alaikum sobat blogger...
Posting kali ini mrlutvie akan menjelaskan trik untuk membuat Recent Post yang bisa bergerak.
Widget ini akan bergerak secara otomatis ke bawah memunculkan posting-posting dari blog sobat yang terbaru.
Contoh hasil seperti pada sidebar blog ini.

Langsung saja langkah - langkahnya :
1. Log in ke akun sobat
    www.blogspot.com

2. Klik rancangan --> Elemen Halaman --> Tambah Gadget --> HTML/Javascript




3. Copy - Paste kan kode berikut :
<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 1px #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://blogmrlutvie.blogspot.com/2013/02/cara-membuat-widget-recent-post-yang.html" target="_blank">get this widget here</a></small>
4. Klik Save dan nikmati hasilnya

Akhirnya,
Tutorial ini tidak akan berguna jika tidak dipraktekkan...
Wassalam ...

Seorang Online Entrepreneur. Suka travelling, Online Marketing juga Networking.

2 comments:

  1. Postinganmu sangat bagus dan bermanfaat buat banyak orang gan. Thanks for sharing and keep blogging!

    ReplyDelete
  2. Betway casino & bonus codes 2021 - Wooricasinos.info
    Betway Casino. 토토 프로토 Betway Sportsbook, 토토 라이브 스코어 Casino & Games, Betway Sports, 바카라 총판 Sportsbook, Betway Poker, 식스 먹튀 Sportsbook, Betway Sportsbook, Betway 울산대딸 Casino

    ReplyDelete