Home » , , » Cara Membuat Random Post Thumbnail

Cara Membuat Random Post Thumbnail


Random post dibuat untuk menampilkan artikel-artikel kita yang terdahulu agar bisa dibaca kembali oleh pengunjung. Random post ini hampir sama modelnya dengan popular post, Polular post menampilkan post-post secara berurut berdasarkan trafik suatu postingan sedangkan Random post menampilkan post-post secara acak.

Random post sebenarnya mempunyai beberapa model, tergantung mood kita untuk memodifikasinya. Dan yang kita akan pelajari adalah membuat random post yang disertai summary yaitu ringkasan isi dan thumbnail atau cuplikan gambar.

1. Login ke blogger Anda
2. Pilih Tata Letak kemudian Tambah Gadget
3. Pilih HTML/JavaScript
4. Masukan kode HTML berikut ini:

<style>
.rp-post-link {
font-weight: bold !important;
font-size: 120% !important;
}
.rp-summary {
margin-top: 3px !important;
font-size: 100% !important;
line-height: 1.3em !important;
word-wrap: break-word !important;
}
.rp-thumbnail {
margin: 5px 5px 2px 0px !important;
float: left !important;
width:65px;height:65px;
}
.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 = 180;
var numofpost=5;
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 += "/>"
var pubdate = new Date(entry.published.$t).toDateString();
item +="<span class='rp-pubdate'>Posted On " + pubdate +"</span>";
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="/feeds/posts/default?alt=json-in-script&start-index=1&max-results=1000&callback=randomposts" type="text/javascript">

</script>

5. Sebelum kita Simpan, perhatikan angka-angka berikut ini !!!
width:65px;height:65px; -->  65 adalah ukuran thumbnail
lengthsummary = 180; --> 180 adalah jumlah karakter isi post
numofpost=5; --> 5 adalah jumlah post yang ditampilkan
6. Simpan

Semoga Berhasil !!!
Share this article :
Comments
1 Comments

1 comments:

  1. Terimakasih buat tutorialnya ini mas, sukses..

    http://herbalkuacemaxs.com/pengobatan-herbal-benjolan-di-ketiak/

    ReplyDelete

 
Support : Contact | Privacy Policy | Disclaimer
Copyright © 2014. Umstrie Duatiga.com - All Rights Reserved
Template Created by Mas Kolis Published by Umstrie23.com
Proudly powered by Blogger>