Cara Membuat Widget Random Post Bergerak Dengan Tampilan Sederhana di Blogger

Pada kesempatan ini admin 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.

Widget Random Post Bergerak

Cara memasang Widget Random Post Bergerak di Blogger

1. Di Blog Blogger
2. Pilih Tata Letak ➔ Tambah Gadget ➔ HTML / Javascript

Tata Letak → Tambah Gadget → HTML / Javascript

3. Masukan kode di bawah 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>

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

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.

4. Save dan Selesai.

DEMO SHOW

UPDATE!

Untuk menjawap pertanyaan yang menayakan bagaimana cara mengganti gambar "no image" di widget Random Post bergerak ini?

Komentar

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/AVvXsEiY0lKsiTMDILxx2K7htuY7onQ-eKXV0NIiXEc7J4IHQWlFMBxoLIeItsnZMYISLHnuNN3RhvwzOk5YN7cIp6fpn171Rv2A3h7e20j8GZFriwTE4vVEwPS0RShZZsal_VPf46I5uyhGrAhU/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>