Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog Terbaru

Pada kesempatan kali ini Zerone Blog akan memberikan Tutorial Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog, Random post sendiri berguna untuk menampilkan artikel secara acak,dengan tujuan menarik pengunjung agar berminat untuk membaca artikel sobat yang sudah lalu maupun yang baru saja di tulis.

Random post yang akan saya bagikan kali ini sangat keren dan Responsive dan juga mudah untuk penerapanya sobat tidak harus mengutakatik Template sobat, Untuk sobat yang ingin menggunakan Random Post Bergerak dengan gambar responsive ini silahkan di simak langkah - langkahnya di bawah ini.

Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog

• Silahkan sobat masuk ke blogger

• Lalu sobat pilih menu Tata letak > Tambahkan Widget/Gatget > HTML/javascript

• Kemudian Copy kode di bawah ini

JS<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="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/rp2-seocips.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://zeroneblogg.blogspot.com/feeds/posts/default/?orderby=published&alt=json-in-script&callback=randompost"></script>
</ul>
</div> <!-- script end -->

• Ganti tulisan yang berwarna merah dengan alamat Blog sobat

• Kemudian Save widget.

Demo Click here

Demikian Tutorial Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog Terbaru yang dapat Zerone Blog berikan semoga bermanfaat. Terimakasih