Cara Membuat Widget Random Post di Blog

Suardi13, Selamat datang kembali di blog saya. Di post ini saya akan memberikan Cara Membuat Widget Random Post tetapi Widget ini beda dari ...

Suardi13, Selamat datang kembali di blog saya. Di post ini saya akan memberikan Cara Membuat Widget Random Post tetapi Widget ini beda dari Widget yang lain nya. Widget ini dapat menampilkan Postingan dengan Bergerak. DEMO bisa dilihat di Random Post sebelah kanan kita. dia Bergerak dan terus bergerak dan mengganti setiap posting demi posting.

Widget Random Post ini berfungsi untuk Menampilkan Postingan kita Secara Random atau Acak. Widget ini SEO Friendly.

Cara Membuat Widget Random Post di Blog

1. Buka Blogger anda
2. Template > Edit HTML
3. Find kode ]]></b:skin> kemudikan Letakkan kode dibawah ini tepat di atas kode ]]></b:skin>

/* CSS Random Posts Moving */
#suardi_13{overflow:hidden;border:solid 1px #ddd;padding:10px; background-color:none;line-height:1.7em;}
#suardi_13 ul{list-style-type:none;margin:0;padding:0;}
#suardi_13 li{border:0; margin:0; padding:0; list-style:none;}
#suardi_13 li{height:70px;padding:1px;list-style:none;}
#suardi_13 a{color:#3366ff;}
#suardi_13 .news-title{display:block;font-weight:normal !important;margin-bottom:5px;font-size:14px;}
#suardi_13 .news-text{display:block;font-size:12px;font-weight:normal !important;color:#282828;text-align:justify;}
#suardi_13 img{float:left;margin-right:10px;padding:1px;border:solid 1px #cccccc;width:60px;height:60px;border-radius:4px;}

4. Simpan Tempalte
5. Kemudian buka Tata Letak
6. Tambahkan Gadget dan Pilih HTML/JavaScript kemudian Letakkan kode dibawah ini

<script type="text/javascript">
function rpthumbnt(json) {
document.write('<ul class="suardi_13">');
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/AVvXsEgqaQ5irFC5-Wl6qULmzu_wif0FrVHwnhwg1bl78FORrEEzFgjYdhrkW2ayzXIkZwLEV2CxHQ1HFEiFUpsoP6wkTzKGWDUeOzv4kvjESLvPElIBqx6BemjkTd5ms6lETMGdFpBrOLM3kQLH/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#suardi_13 li:last').hide().remove();
$('ul#suardi_13').prepend(last);
$('ul#suardi_13 li:first').slideDown("slow")
}
</script>
<script type="text/javascript">
var speed = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="suardi_13">
<script style="text/javascript">
var numposts = 5;
var numchars = 0;
</script>
<script src="http://suardi13.xyz/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>