Hubungi KamiJika ada pertanyaan silahkan hubungi kami

Beginih Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog

Beginih Cara Buat Random Post Dengan Gambar (Thumbnail) di Blog-Jika kita berbicara tentang widget tentunya akan banyak widget yang bisa kita pasang pada blog seperti pada artikel sebelumnya saya juga pernah membahas beberapa widget, salahsatunya Cara Membuat Recent Comments (Komentar Terbaru).

Pada artikel ini masih berhubungan dengan widget namun kegunaannya tentu berbeda dengan widget sebelumnya (recent post), yaitu membuat widget random post menggunakan gambar (thumbnail) berikut dengan kutipan singkat taks.

Dengan adanya widget random post pada blog maka postingan/artikel akan secara acak tampil pada widget random post, tentunya dengan memasang widget ini postingan lama maupun baru akan bergiliran tampil dan memberikan kesempatan pengunjung untuk membaca postingan tersebut.

Selain itu tampilan widget ini juga terbilang cukup keren dan menarik sehingga akan memberikan daya tarik untuk pengunjung untuk melirik pada beberapa artikel yang tampil pada widget ini karna dilengkapi dengan adanya gambar(thumbnail).

Cara Buat Random Post Dengan Gambar

  • Pastikan Anda sudah login ke akun blogger
  • Pada dashboard pilih “Tata Letak”“Tambah Gaget”“HTML/JavaScript”
  • Masukan kode dibawah ini kedalam kotak “HTML/JavaScript”
Klik Untuk Membuka
<style>
.rp-post-link {
font-weight: bold !important;
font-size: 12px !important;
}
.rp-summary {
margin-bottom: 5px !important;
border-bottom: 1px dotted #686868;
font-size: 12px !important;
line-height: 20px !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:60px;height:60px;
}
.rp-pubdate {
font-style: italic !important;
margin-bottom: 3px !important;
}
</style>
<script type=”text/javascript”>
var randarray = new Array();
var l=0;
var flag;
var lengthsummary = 120;
var numofpost=10;
function randomposts(json){
var total = parseInt(json.feed.openSearch$totalResults.$t,10);
for(i=0; i < numofpost;){
flag=0;
randarray.length=numofpost;
l=Math.floor(Math.random()*total);
for(j in randarray){
if(l==randarray[j]){
flag=1;
}
}
if(flag==0&&l!=0){
randarray[i++]=l;
}
}
document.write(‘<div>’);
for(n in randarray){
var p=randarray[n];
var entry=json.feed.entry[p-1];
var item =””;
var posttitle = entry.title.$t || “[Untitled]”;
“[Untitled]”
for(k=entry.link.length -1; k >= 0 ; k–){
if(entry.link[k].rel==’alternate’){
item +=”<a class=’rp-post-link’ href='” + entry.link[k].href + “‘>” + posttitle + “</a>”;
break;
}
}
item += “<br”
item += “/>”

if(‘media$thumbnail’ in entry)item += “<img class=’rp-thumbnail’ src='” + entry.media$thumbnail.url + “‘>”
var summary = “”;
if (“content” in entry) {
summary = entry.content.$t;
}
else if (“summary” in entry) {
summary = entry.summary.$t;
}
var re = /<\S[^>]*>/g;
summary = summary.replace(re, “”);
item += “<p class=’rp-summary’>
” + summary.substring(0,lengthsummary) + ” …</p>
“;
document.write(item);
}
document.write(‘</div>
‘);
}
</script>
<script src=”http://regibrader-free.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts” type=”text/javascript”>
</script>

Keteragan:

  • var lengthsummary = 120; adalah panjang kutipan yang akan ditampilkan, silahkan ganti sesuai yang Anda inginkan

  • var numofpost=10; adalah total postigan yang akan ditampilkan nantiyasilahkan ganti jika ingin Anda sesuaikan.

  • Terakhirjangan lupaklik “Simpan”

Selamat sekarang blog Anda sudah terpasang widget random post, itu artinya tuorial kali ini sudah selesai 😀 Baca Juga: 2 Cara Memasang Widget Artikel Terbaru Di Blogger

Loading...

Add a Comment

Your email address will not be published. Required fields are marked *

More in Blogger
Beginih Cara Pasang Banner/Gambar Flash Di Blog

Beginih Cara Pasang Banner/Gambar Flash Di Blog-Mau tau gimana cara...

Close