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

Memasang Widget Random Post Bergerak For Blogspot
Widget Random Post Bergerak


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.

komentar di Membuat Widget Random Post Bergerak For Blogger

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.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.
37 Komentar untuk "Membuat Widget Random Post Bergerak di Blogspot"

nice share gan
kunjungi juga blog saya

www.korantech.bloggspot.com

terima kasih

ada demonya ga gan? hhe kunjungi blog ane ya :>) http://alvir-cb.blogspot.com/

Terima kasih gan, langsung dipraktekkan langsung bisa..

gankalau mau buat arah geraknya kekanan tau kekiri bagaimana

Untuk widget diatas yang paling cocok adalah bergerak dari atas kebawah, kalau bergerak dari kiri ke   kanan atau sebaliknya jadi gak cocok, tapi jika sobat pengen juga mungkin dapat mencoba kode dibawah ini :

<marquee behavior='scroll' align='center' direction='left' height='200px' onmouseout='this.start()' onmouseover='this.stop()' scrollamount='2' scrolldelay='10' width='100%'>Masukkan Teks atau script gadget disini</marquee>


Terima kasih ilmunya, kangsung coba dan bisa...

Kalo geraknya ke samping gimana sob? Thanks.

terima kasih atas ilmune mas,.. saya mau tanya, ada beberapa postingan di blog saya yang tidak ada gambar, ketika skip dari mas, alhamdulillah berhasil., tapi ketika berjalan ada GAMBAR X, nah bagaimana cara mengantingnya, semisal gambar foto saya mungkin. atau apakah setiap postingan harus wajib ada gambarnya... terima kasih atas ilmunya mas... salah. priyo http://priyonisme.blogspot.com/

Silahkan baca update diatas gan, karna lumayan sulit juga jika di jelasakan dikomentar blog maka sudah tambahkan bawah postingan.

dan misalnya klo post randomnya kita tentuin jdi gmana scriptnya ??

Tentuin gimana bro :-?, namanya juga random post

:-? kalau memunculkan gambar dan judulnya saja gmn gan caranya? jadi tanpa descreption gitu..

Pada bagian "var numchars" tepat di bawah "var numposts", ubah 60 jadi 0 dan untuk menghilang tiga titik, cari "document.write(postcontent + '...');" kemudian ubah menjadi " document.write(postcontent + '');" (tanpa tanda kutip dua)

Terimakasih atas ilmunya, kalo untuk menambah row/barisnya bagaimana ya? Karena pada kode tersebut hanya terdapat 5baris/row.

random post nya bagus bos,,, coba saya pasang di blog ku

Diatas ane masternya gan.. :))

bos mau nanya lagi deh ... tapi ini beda poin ga apa apa ya... related post nya juga bagus bos yang di pasang di , bikin artikel nya juga ga bos... mau nyoba related postnya bos..

boleh dicoba deh ini biar tampil beda blog baru ane hehehe

keren gan..
oya gan, gimana caranya agar widgetnya berisi postingan yang kita tentuin sendiri? yang bukan random.. misalnya kita mau isi 10 postingan yang bergerak...
jawab ya gan... thanks

ijin coba ya gan, smoga bisa jalan . . . .
makasih

Mas, makasih scriptnya bisa bikin random post gerak. Tapi kok di blog ane ibudanbapak.blogspot.com tulisannya jadi nabrak2 gak aturan ya? mohon pencerahan gan. hehehe

Terimaksih banyak ....tutorial ini sangat2 membantu. (h)

Mas, cara pasang kode diatas biar bisa ke kiri atau ke kanan, gimana ?

cari "document.write(postcontent + '...') di mananya gan

Mantap Broo... I like this Blog.. thans infonya.
Salam Kenal.

Wah terimakasih gan saya telah berhasil menerapkanya di blog ini : gividia.com

Terimakasih Gan, sukses pokoknya...