Selamat datang ke BelajarBlogs...
Home » » Random Post Widget Slide Effect

Random Post Widget Slide Effect



Tutorial Kali ini agak menarik dan kemungkinan anda berminat dengan random post slide effect dan apabila letakkan cursor pada random post, ia akan membuka beberapa lagi artikel utk dilihat. Jika anda ingin lebih memahami lagi bolehlah lihat Demo dibawah. Semoga berjaya.

 Pasang Slide Out Butang Follower
Pasang Beautiful Top Comment widget

Langkah 1) Dari Blogger Dashboard, pergi Layout and klik pada Add a Gadget link




Langkah  2) In the pop-up window, pilih  HTML/JavaScript widget




Langkah 3) Copy-paste kode dibawah ini. 

<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://sites.google.com/site/jeritanblog/javascript/jquery.min.js"></script>
<script type="text/javascript" src="https://sites.google.com/site/jeritanblog/javascript/rp2bblogs.js"></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.belajarblogs.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost">
</script
src="http:></ul>
</div> <!-- script end -->


Nota:


  • Tukar URL yang Berwarna oren dengan url blog anda


Langkah 4) Klik Save

13 ulasan:

  1. insyaAllahhh bleh apply di blog :)

    BalasPadam
  2. Balasan
    1. ermmm kalau berminat boleh letak hi3 :)

      Padam
  3. Nak cuba juga..! Terima kasih kongsi..! :D

    BalasPadam
  4. saya atas nama BPK. SAMSUL dari MADURA ingin mengucapkan banyak terimah kasih kepada MBAH KARYO,kalau bukan karna bantuannya munkin sekaran saya sudah terlantar dan tidak pernaah terpikirkan oleh saya kalau saya sdh bisa sesukses ini dan saya tdk menyanka klau MBAH KARYO bisa sehebat ini menembuskan semua no,,jika anda ingin seperti saya silahkan hubungi MBAH KARYO no ini 082301536999 saya yakin anda tdk akan pernah menyesal klau sudah berhubungan dgn MBAH KARYO dan jgn percaya klau ada yg menggunakan pesan ini klau bukan nama BPK. SAMSUL dan bukan nama MBAH KARYO krna itu cuma palsu.m

    BalasPadam