Cara Membuat Widget Recents Post / Artikel Terbaru yang Bergerak

Cara Membuat Widget Recents Post / Artikel Terbaru yang Bergerak ~ Widget blog dapat dimanfaatkan sebagai salah satu cara mempercantik blog. Apalagi dipadukan dengan model yang bisa bergerak (naik / turun ). Widget ini biasanya digunakan untuk menampilkan artikel terbaru / recents post untuk membuat blog tampil lebih menarik.

Nah, tehnik ini bisa Anda coba terapkan di blog kesayangan dengan mengikuti langkah-langkah di bawah ini :

1. Klik "show" untuk melihat script
2. Copy scriptnya
3. Buka Tata Letak / LayOut di dashboard blogger


Script Recents Post :

 <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://googledrive.com/host/0B0QN4wPK526IckdvdUU4SFVTSFU" 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>


4. Pilih Gadget yang ada di bagian samping, Kemudian klik tambahkan Gadget

5. Saat terbuka layar baru cari dan pilih HTML/JavaScript

6. Paste-kan kode script yang di atas di bidang kosong Konten

7. Pada bidang kosong bagian judul ketikkan Recents Post atau Artikel Terbaru
8. Klik Simpan

Nah sekarang lihat tampilan blog Anda.

Catatan : Jikalau di dalam template Anda sudah ada kode script jquery, maka cari dan hapus kode di bawah ini yang terdapat pada script recents post di atas.

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


Demikian cara membuat widget recents post / artikel terbaru yang bergerak, Semoga dapat bermanfaat.

Tweet