Cara Membuat Random Post Keren Dengan Thumbnail Bergerak

Cara Membuat Random Post Bergerak | dengan Thumbail Keren - Halo sobat Blogger. Kali ini saya akan membagikan sebuah tutorial Blogger yakni cara membuat widget random post dengan thubmail yang bergerak. Widget ini sangat bermanfaat untuk blog anda, membuat pengunjung lebih banyak mengunjungi artikel anda.


Berikut adalah tampilan random post :

Itulah tampilan widget random post dengan thubmnail. Untuk melihat langsung widget random post nya bergerak silahkan lihat langsung pada widget pada blog ini : demo

Yang istimewa dari tutorial yang saya berikan ini adalah :
  • Tanpa edit-edit, tanpa harus tambah css di template.
Jadi, tinggal buat widget, masukin html nya maka selesai deh. Silahkan ikuti tutorialnya :

Random Post Keren Dengan Thubmail Bergerak


  • Silahkan pilih blog anda.
  • Lalu kita menuju Tata Letak -> Tambahkan Gadget
  • pilih HTML/JavaScript
  • Copy script yang ada dibawah ini lalu paste kan ke kolom widget tersebut.
<div style="margin-bottom: 15px;">
<style type="text/css">
#rp_plus_img{height:287px;overflow:hidden;border:solid 0px #585858;padding:1px 5px 14px 1px;background-color:none;}
#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:bold !important;margin-bottom:5px;font-size:12px;}
#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:65px;}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<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.intiblog.co.id/" 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>
<script type="text/javascript">
var speed = 500;
var pause = 3000;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 0;
</script>
<script src="http://www.intiblog.co.id/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
 Keterangan : Ganti yang warna merah (URL blog saya) dengan Url blog anda.
  • Klik Simpan
Nah, selesai sudah. Silahkan dilihat, apakasih widgetnya sudah ada ? :) sudah pasti ada dong.
Jangan di otak atik yang lain supaya codenya tidak error.

Semoga artikel Widget Random Post ini bermanfaat bagi anda. Ada pertanyaan ? silahkan berkomentar ~

Apa yang saya suka, akan saya tulis di blog kecil ini. Semoga bermanfaat bagi semuanya ~ Salam hangat.

Share this

Related Posts

Previous
Next Post »

Terimakasih telah membaca artikel kami. Sobat dapat menyampaikan kritikan/kesalahan atau apresiasi untuk kami dengan mengisi kolom komentar dibawah ini.

Gunakan Emoticon Biar Asik ->