Cara Membuat Widget Random Posts Untuk Blog

Cara Membuat Widget Random Posts Untuk Blog

Widget Random Post bisa jadi sesuatu yang cukup bemanfaat dan menarik pada sebuah blog, sebab dengan adanya Random Post para Pengunjung dapat melihat dan mengetahui postingan-postingan kita yang sudah ada lebih dulu maupun postingan-postingan yang baru, dan tentunya ini mempermudah kegiatan para pengunjung Blog untuk melihat dan mencari tahu informasi yang ingin dicarinya dalam suatu Blog. Ok, Berikut ini adalah Cara membuat Widget Random Post pada Blog. Semoga bisa memberikan manfaat bagi yang membutuhkannya…Adapun langkah-langkahnya adalah sebagai berikut, disimak dan yang terpenting dipraktekan.Ok,Ok…

1. Masuk ke akun Blogger sodara.
2. Klik bagian Tata Letak pada Blog Sodara.
3. Kemudian Klik Tambahkan Gadget.
4. Pilih HTML/Javascript.
5. Setelah Itu Masukan kode berikut.

<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 = 100;
var numofpost=8;
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://ajariselalu.blogspot.com/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">
</script>


Keterangan : 

Ubahlah kode warna merah dengan URL Blog sodara. Ubah juga jumlah postingan yang akan ditampilkan dengan mengganti kode warna Pink. Dan ganti yang berwarna kuning untuk jumlah huruf yang akan ditampilkan pada deskripsi postingan pada widget Blog sodara.
Adapun tinggi Widget ditentukan oleh banyaknya jumlah Postingan yang ditampilkan yakni kode warna Pink..OK.ok.

6. Setelah semuanya selesai, selanjutnya klik simpan., dan widget sudah berhasil anda tambahkan pada blognya, dan lihatlah hasilnya.


Demikian artikel sederhana ini, semoga memberikan manfaat, sekian dan terimakasih.

Wassalam….