Cara Membuat Widget Random Post Bergerak di Blogspot

Seobers -  Cara membuat random post bergerak di Blogspot Blogger. Tutorial kali ini seocips akan membagikan tentang bagaimana cara membuat dan memasang widget random post bergerak di Blog kamu. Widget Random post ini berbeda dengan widget random post yang sudah dibagikan sebelumnya (tanpa gambar), karena widget ini disertai dengan gambar pada postingannya.

Dengan memasang widget random post maka kamu dapat menampilkan artikel di blog secara acak, artikel lama yang pernah di posting dapat ditampilkan kembali, bahkan di setiap halaman di blog. Ini berbeda dengan widget popular post, karena kita tahu bersama widget popular post hanya menampilkan artikel yang populer saja.

Widget Random Post Bergerak

DEMO

Cara Membuat dan Memasang Widget Random Post Bergerak

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.seocips.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.
6. Baca: widget random post bergerak versi 2.

UPDATE!

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

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 = 'https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhixPqdaL79jF3SYfyGXrliC1M5aqELwKnMVyxscby9dnVhr0RGMqyWpLdI2OafLwWLT7uR4Iq0qBdoXz8g7HCwLaic3xRQ-Xbub8ATYc9Kv8YQRV1h_uGW9uP9tYgjsni0ioJ1KzLJIfiI/d/noimagethumb.gif'
  }
  document.write('<li class="news-title clearfix">');
  document.write('<a href="http://www.seocips.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.

Jika kamu merasa widgetnya jadi makin panjang, kamu dapat mencoba menyimpan script dan cssnya di hosting gratis tempat menyimpan file, seperti; Github, Google drive, Site Google, Dropbox dan lain sebagainya.

Bagaimana, mudah bukan? semoga tutorial cara memasang widget random post bergerak ini bermanfaat.