Cara Memasang Recent Post Bergerak Otomoatis Pada Blog

Cara Memasang Recent Post Bergerak Otomoatis Pada Blog - Postingan saya kali ini merupakan postingan kedua dengan tema pembahasan Recent Post. Tentu saya tidak akan membahas apa itu recent post atau semacamnya karena sudah pernah saya beberkan jauh sebelum postingan ini dibuat.

  

  Disini kita akan mencoba memberi sedikit sentuhan atraktif dalam blog anda dengan memasang recent post bergerak secara otomatis. Banyak alasan mengapa anda harus memilih widget ini salah satunya karena kebosanan anda melihat tampilan blog diam tanpa pergerakan terlepas dari itu widget ini juga mampu menampung lebih banyak daftar postingan tanpa harus banyak memakan tempat.

Sebelum dan sesudah disorot cursor

• Recent Post Bergerak Otomatis

---

1. Login ke akun Dasbor Blogger anda.

2. Jika sudah masuklah ke halaman Tata Letak.

3. Pilih Tambahkan widget "Add Gadget".

4. Klik HTML/Javascript

5. Letakkan kode dibawah ini didalamnya.

<style> #BDRSimage-slide { height:112px; overflow:hidden; padding:0; background-color:#fff; width:auto; border:solid #ddd 1px; box-shadow:0 0 5px #eee; } #BDRSimage-slide:hover { height:325px; overflow:hidden; padding:0;width:auto; border:solid #ccc 1px; box-shadow:none; } #BDRSimage-slide ul { list-style-type:none; margin:0; padding:0; } #BDRSimage-slide li { list-style:none; height:80px; padding:10px; border:dashed #ddd 1px; margin:5px; background-color:#FFFFFF; } #BDRSimage-slide li:hover { border:solid #ddd 1px; } #BDRSimage-slide a { color:#222; font-family:Verdana; font-size:12px; font-weight:bold; text-decoration:none; } #BDRSimage-slide .news-title { margin-bottom:5px; font-size:12px; color:#990000; } #BDRSimage-slide .news-text { font-size:10px; color:#333; text-align:left; font-family:Verdana; font-style:italic; font-weight:normal; padding-bottom:10px; } #BDRSimage-slide img { float:left; margin-right:10px; margin-top:10px; width:60px; height:60px; border-radius:50%; border:1px solid #e06666; box-shadow:0 0 2px #e06666; } </style> <script type="text/javascript" src="https://googledrive.com/host/0B2syg3utB8PxZjlockw0eEhJNU0/"></script> <script type="text/javascript" src="https://googledrive.com/host/0B2syg3utB8PxMXMycWhEWUhFMzA/"></script> <!-- script start --> <script type="text/javascript"> var speed = 400; var pause = 3500; $(document).ready(function(){ rivaiscript(); interval = setInterval(rivaiscript, pause); }); </script> <div > <ul id="BDRSimage-slide"> <script style="text/javascript"> var numposts = 50; var numchars = 0; </script> <script src="http://www.margopblog.blogspot.co.id</feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"> </script src="http:></ul> </div> <!-- script end -->


6. Langkah terakhir simpan setelan tata letak anda dan lihat hasilnya.



Note:

• Ganti http://www.margopblog.blogspot.co.id</feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost dengan URL atau alamat blog anda sendiri.
• Agar tidak membingungkan berikan judul ketika anda menambahkan widget pada halaman tata letak.

Sekian Tutorial singkat kali ini, jika ada yang ingin ditanyakan silahkan poskan di komentar Mudah-mudahan saya siap membantu. Tinggalkan jejak kalau anda berhasil ya sob..

Semoga Bermanfaat
Thank's