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 !!!
Semoga Berhasil !!!
Hi. I’m Designer of Blog Magic. I’m CEO/Founder of ThemeXpose. I’m Creative Art Director, Web Designer, UI/UX Designer, Interaction Designer, Industrial Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.
0 comments:
Post a Comment