Widget Random Post bergerak untuk Blog Blogger

HaiSobat apa kabar lagi? Pada kesempatan ini saya akan membagikan widget untuk kamu pengguna Blogspot, yaitu widget Random Post bergerak, iya sob, bergerak !, yah dari pada bergerak mungkin lebih cocok berganti-ganti, atau apalah yang cocok bisa kamu cek saja pada demonya nanti.

Widget random post ini menampilkan postingan blog kamu secara random, jadi postingan kamu yang sudah lama di posting bisa saja tampil kembali di widget ini.

Sebelumnya juga saya sudah membagikan widget random post, coba kamu lihat postingan ini: widget random post dengan gambar/thumbnails dan widget random post tanpa gambar.

Widget Random Post bergerak untuk Blogspot

Memasang Widget Random Post Bergerak For Blogspot
Widget Random Post Bergerak


Baca juga: Cara memasang slider otomatis keren di blog

Cara membuat dan memasang Widget Random Post ini di Blogger

1. Masuk ke Blogger.
2. Klik menu Tata Letak.
3. Tambahkan Gadget dan pilih HTML/JavaScript.
4. Masukkan kode dibawah ini.
<style type="text/css">
/*widget*/
#rp_plus_img{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#rp_plus_img ul{list-style-type:none;margin:0;padding:0;}
#rp_plus_img li{border:0; margin:0; padding:0; list-style:none;}
#rp_plus_img li{height:70px;padding:1px;list-style:none;}
#rp_plus_img a{color:#3366ff;}
#rp_plus_img .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#rp_plus_img .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#rp_plus_img img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}
</style>
<!-- start -->
  <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/random-post-bergerak-seocips.js"></script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://www.haisob.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
  <!-- /end -->
 Keterangan :
  • Angka yang bewarna merah adalah kecepatan berpindahnya post.
  • Angka yang bewarna Biru adalah waktu berhentinya setiap post sebelum berpindah lagi.
  • Angka yang bewarna Hijau adalah jumlah post yang akan ditampilkan.
  • Kode berwarna kuning diatas ganti sesuai dengan url/link blog kamu.
5. Simpan dan Selesai.

UPDATE!

Untuk menjawap pertanyaan saudara priyo nisme yang menayakan bagaimana cara mengganti gambar "no image" di widget Random Post bergerak ini.

komentar di Membuat Widget Random Post Bergerak For Blogger

Baca juga: cara membuat link suber otomatis ketika blog kamu di copas

Lihat kode berwarnah biru dibawah ini, nah itu adalah gambar "no image".  Copy code dibawah ini dan ganti kode berwarna biru dibawah dengan url link gambar yang kamu inginkan:
<script type="text/javascript">
function rpthumbnt(json) {
 document.write('<ul class="rp_plus_img">');
 for (var i = 0; i < numposts; i++) {
  var entry = json.feed.entry[i];
  var posttitle = entry.title.$t;
  var posturl;
  if (i == json.feed.entry.length) break;
  for (var k = 0; k < entry.link.length; k++) {
   if (entry.link[k].rel == 'alternate') {
    posturl = entry.link[k].href;
    break
   }
  }
  var thumburl;
  try {
   thumburl = entry.media$thumbnail.url
  } catch(error) {
   s = entry.content.$t;
   a = s.indexOf("<img");
   b = s.indexOf("src=\"", a);
   c = s.indexOf("\"", b + 5);
   d = s.substr(b + 5, c - b - 5);
   if ((a != -1) && (b != -1) && (c != -1) && (d != "")) {
    thumburl = d
   } else thumburl = 'http://lh3.ggpht.com/_xcD4JK_dIjU/SnamIh0KTCI/AAAAAAAADMA/hLjqmEbdtkw/d/noimagethumb.gif'
  }
  document.write('<li class="news-title clearfix">');
  document.write('<a href="http://www.haisob.com/" target="_blank"><img src="' + thumburl + '"/></a>');
  document.write('<a href="' + posturl + '" target ="_top">' + posttitle + '</a><br>');
  if ("content" in entry) {
   var postcontent = entry.content.$t
  } else if ("summary" in entry) {
   var postcontent = entry.summary.$t
  } else var postcontent = "";
  var re = /<\S[^>]*>/g;
  postcontent = postcontent.replace(re, "");
  if (postcontent.length < numchars) {
   document.write('<span class="news-text">');
   document.write(postcontent);
   document.write('</span>')
  } else {
   document.write('<span class="news-text">');
   postcontent = postcontent.substring(0, numchars);
   var quoteEnd = postcontent.lastIndexOf(" ");
   postcontent = postcontent.substring(0, quoteEnd);
   document.write(postcontent + '');
   document.write('</span>')
  }
  document.write('</li>')
 }
 document.write('</ul>')
}
function rpnewsticker() {
 last = $('ul#rp_plus_img li:last').hide().remove();
 $('ul#rp_plus_img').prepend(last);
 $('ul#rp_plus_img li:first').slideDown("slow")
}
</script>
Sekarang jika sudah diganti gambarnya, kembali pada kode widget yang pertama diatas, kemudian Replace kode :
<script type="text/javascript" src="https://cdn.rawgit.com/Brando07/share/master/random-post-bergerak-seocips.js"></script>
Dengan kode yang sudah kamu edit tadi.
Terakhir masukan ke widget html dan save.