Cara membuat Random post bergerak di Blogspot Blogger. Tutorial kali ini spezer akan membagikan tentang cara membuat dan memasang widget random post di Blog. Widget Random post ini berbeda dengan widget Popular post.

Dengan memasang widget random post maka dapat menampilkan artikel di blog kamu secara acak, artikel lama yang sudah di publish nantinya dapat ditampilkan lagi di widget ini. Sangat berbeda dengan widget popular post hanya menampilkan artikel yang populer saja, widget recent post yang hanya menampilkan artikel terbaru saja.

Cara membuat Random pos bergerak di Blogspot Blogger

Cara Membuat dan Memasang Widget Random Post

Langsung saja sobat berikut tutorialnya!

1. Masuk ke Blogger.
2. Klik menu Tata Letak.
3. Tambahkan Gadget dan pilih HTML/JavaScript.
4. Masukkan kode dibawah ini.
<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" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.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 = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>
 Keterangan :
  • Angka yang bewarna merah adalah kecepatan berpindahnya post satu dengan lainnya
  • Angka yang bewarna Biru adalah waktu berhentinya setiap post sebelum berpindah lagi.
  • Angka yang bewarna Hijau adalah jumlah post yang akan ditampilkan di widget random post
  • Semua kode berwarna diatas dapat diganti sesuai dengan keinginan anda
5.  Simpan dan Selesai

Cara mengganti gambar "no image"


komentar di Membuat Widget Random Post Bergerak For Blogger

Mungkin jika sobat ingin mengedit langsung file java script yang disimpan di hosting tempat upload file : <script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script> sobat akan kesulitan karena kode ini telah di encript atau apalah istilahnya itu sehingga file sulit untuk di terjemahkan maka berikut adalah terjemahanan file ini:

<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://blog.spezer.net/" 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>

Nah Sekarang pertanyaan sobat priyo nisme adalah bagaimana mengganti gambarnya dengan gambar yang sobat inginkan?. sekarang lihat kode berwarnah merah diatas, nah itu adalah gambar "no image". silahkan diganti dengan gambar yang sobat inginkan.

Sekarang jika sudah diganti gambarnya, Replace bagian :
<script type="text/javascript" src="http://slide-down-recent.googlecode.com/files/Slide%20Down%20Recent%20Post.js"></script>
dengan kode diatas. Sehingga menjadi seperti kode dibawah ini.

<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://blog.spezer.net/" 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 = 400;
var pause = 3500;
$(document).ready(function(){
rpnewsticker();
interval = setInterval(rpnewsticker, pause);
});
</script>
<ul id="rp_plus_img">
<script style="text/javascript">
var numposts = 20;
var numchars = 60;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=rpthumbnt"></script>
</ul>
</div>

Bagian warna hijau adalah gambarnya. Nah sekarang tinggal masukan widgetnya ke mode HTML di blog deh.

Bagaimana sob, mudah bukan? semoga tutorial cara memasang widget randompost bergerak diatas bermanfaat, selamat mencoba.
37 Komentar untuk "Cara Membuat Widget Random Post Bergerak di Blogger"

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