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.


Cara Membuat Random Post Bergerak Dengan Gambar Responsive Di Blog Terbaru


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

<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

2 komentar:

  1. thx infonya gan
    izin pake buat blog saya nih yang masih pemula

    Salam blogger !! http://infoinfogames.blogspot.co.id/

    ReplyDelete
    Replies
    1. Iya Sama - sama Mas Andre Eugenio

      Salam Blogger juga...

      Delete

Terimakasih sobat sudah berkunjung di Zerone Blog. Silahkan sobat beri komentar terhadap Artikel di atas!,

1. Jangan menggunakan kata - kata tidak baik
2. Di larang SPAM
3. Dan Harap tidak meletakan link Aktive

Terimakasih atas perhatiannya.