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 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