Efek Rainbow Cake untuk Widget Popular Post pada Blogger ( Modifikasi ) - Pernah mendengar dan melihat Rainbow Cake ? Kue bolu dengan lapisan warna – warni seperti gambar dibawah ini :
Menarik bukan ?..... Rasanya sudah pasti lezat.
Ok, postingan kali ini kita tidak akan membahas bagaimana lezatnya kue rainbow cake, cara membuatnya ataupun resep yang digunakan untuk membuat kue tersebut. Sekarang coba perhatikan tampilan gambar dibawah ini :
Gambar diatas merupakan potongan halaman depan sebuah blog. Perhatikan bagian sebelah kiri dari gambar tersebut, tepatnya pada kolom Recent Post. Ya….. Recent Post yang merupakan widget untuk menampilkan potongan postingan terbaru pada sebuah blog ditampilkan dengan kreasi warna – warni persis seperti rainbow cake pada gambar diatas. Tertarik untuk membuatnya ?
Untuk membuat tampilan Recent Post seperti Raibow Cake, kita akan memanfaatkan widget HTML/Javascript sebagai tempat untuk meletakkan script program yang akan menampilkan Recent Post dengan efek seperti Rainbow Cake.
Script programnya adalah sebagai berikut :
<script type="text/javascript"> function showlatestpostswiththumbs(t)
{
document.write('<ul class="recent-posts-container">');
for(var e=0;
e<posts_no;
e++) {
var r,
n=t.feed.entry[e],
i=n.title.$t;
if(e==t.feed.entry.length)break;
for(var o=0;
o<n.link.length;
o++) {
if("replies"==n.link[o].rel&&"text/html"==n.link[o].type)var l=n.link[o].title,
m=n.link[o].href;
if("alternate"==n.link[o].rel) {
r=n.link[o].href;
break
}
}
var u;
try { u=n.media$thumbnail.url }
catch(h) {
s=n.content.$t,
a=s.indexOf("<img"),
b=s.indexOf('src="', a),
c=s.indexOf('"', b+5),
d=s.substr(b+5, c-b-5),
u=-1!=a&&-1!=b&&-1!=c&&""!=d?d: "https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh33XR-mSvWcrhqovr-Kap5EI7XRH4PYL6DZtwekMvv_kIJZqPcRYjXwkjgBPMviDGuO0-IOLwh1LG9Hlds4ZQHvRTcQwYeJZtCiCWa58vsI1TefLrc-33dMLtC57WT6YRHUho9nbRGER8z/s1600/no-thumb.png"
}
var p=n.published.$t,
f=p.substring(0, 4),
g=p.substring(5, 7),
v=p.substring(8, 10),
w=new Array;
if(w[1]="Jan", w[2]="Feb", w[3]="Mar", w[4]="Apr", w[5]="May", w[6]="Jun", w[7]="Jul", w[8]="Aug", w[9]="Sep", w[10]="Oct", w[11]="Nov", w[12]="Dec", document.write('<li class="recent-posts-list">'), 1==showpoststhumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumb" src="'+u+'"/></a>'), document.write('<div class="recent-post-title"><a href="'+r+'" target ="_top">'+i+"</a></div>"), "content"in n)var A=n.content.$t;
else if("summary"in n)var A=n.summary.$t;
else var A="";
var k=/<\S[^>]*>/g;
if(A=A.replace(k, ""), 1==post_summary)if(A.length<summary_chars)document.write(A);
else {
A=A.substring(0, summary_chars);
var y=A.lastIndexOf(" ");
A=A.substring(0, y),
document.write(A+"...")
}
var _="",
$=0;
document.write('<br><div class="recent-posts-details">'),
1==posts_date&&(_=_+w[parseInt(g, 10)]+" "+v+" "+f, $=1),
1==readmorelink&&(1==$&&(_+=" | "), _=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>', $=1),
1==showcommentslink&&(1==$&&(_+=" <br> "), "1 Comments"==l&&(l="1 Comment"), "0 Comments"==l&&(l="No Comments"), l='<a href="'+m+'" target ="_top">'+l+"</a>", _+=l, $=1),
document.write(_),
document.write("</div>"),
document.write("</li>")
}
document.write("</ul>")
}
</script>
<script type="text/javascript">
var posts_no=5;
var showpoststhumbs=false;
var readmorelink=false;
var showcommentslink=false;
var posts_date=false;
var post_summary=true;
var summary_chars=100;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<link href='https://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />
<style type="text/css">
img.recent-post-thumb { width: 50px; height: 50px; float: right; margin: 5px -5px 0px 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; padding: 3px; }
ul.recent-posts-container { list-style-type: none; background: #fff; padding: 0px; font: 14px 'arial', sans-serif; margin: 5px 5px 5px 0px; width:100%; }
ul.recent-posts-container li:nth-child(1n+0) { background: #F49A9A;background-position: center; }
ul.recent-posts-container li:nth-child(2n+0) { background: #FCD092;background-position: center; }
ul.recent-posts-container li:nth-child(3n+0) { background: #FFF59E;background-position: center; }
ul.recent-posts-container li:nth-child(4n+0) { background: #E1EFA0;background-position: center; }
ul.recent-posts-container li:nth-child(5n+0) { background: #B1DAEF;background-position: center; }
ul.recent-posts-container li { padding: 5px 10px; list-style-type: none; margin: 0 0 -5px; color: #666; }
.recent-posts-container a { text-decoration: none; }
.recent-posts-container a:hover { color: #222; }
.post-date { color: #e0c0c6; font-size: 11px; }
.recent-post-title a { font-size: 14px; color: #444; font-weight: bold; }
.recent-post-title { padding: 6px 0px; }
.recent-posts-details a { color: #222; }
.recent-posts-details { padding: 5px 0px 5px; }
</style>
Copy program diatas kemudian paste di widget HTML/Javascript seperti yang pernah dijelaskan pada postingan sebelumnya, yaitu : Cara Edit Search Box (Kotak Pencarian) Pada Blogger.
Penjelasan Program :
Agar kita sekalian bisa memodifikasi bentuk dan tampilan sesuai keinginan masing – masing , untuk memudahkan penjelasan terkait program tersebut, script program diatas kita bagi atas 3 kelompok warna, yaitu kelompok kuning, hijau dan biru.
Kelompok Kuning :
Script program pada bagian ini adalah yang bagian utama yang berisikan perintah-perintah untuk menampilkan recent post dan pernik - pernik lainnya, seperti kotak recent pos (recent-posts-container), gambar thumbnail ( var u; try {=n.media$thumbnail.url }, tanggal postingan (var p=n.published.$t), potongan artikel dan tombol read more(recent-posts-details). Pada bagian ini juga diatur susunan dari tampilan Recent Post sehingga formatnya menjadi seperti ini :
Kelompok Hijau :Script program pada bagian ini adalah yang bagian utama yang berisikan perintah-perintah untuk menampilkan recent post dan pernik - pernik lainnya, seperti kotak recent pos (recent-posts-container), gambar thumbnail ( var u; try {=n.media$thumbnail.url }, tanggal postingan (var p=n.published.$t), potongan artikel dan tombol read more(recent-posts-details). Pada bagian ini juga diatur susunan dari tampilan Recent Post sehingga formatnya menjadi seperti ini :
- <ul class="recent-posts-container">
- <li class="recent-posts-list">
- <div class="recent-post-title">....... </div>…… Bagian Judul
- <div class="recent-posts-details">….. </div>… Bagian potongan artikel, thumbnail, readmore dan tanggal postingan
- </li>
- <li class="recent-posts-list">
- <div class="recent-post-title">....... </div>
- <div class="recent-posts-details">….. </div>
- </li>
- <li class="recent-posts-list">
- <div class="recent-post-title">....... </div>
- <div class="recent-posts-details">….. </div>
- </li>
- <li class="recent-posts-list">
- <div class="recent-post-title">....... </div>
- <div class="recent-posts-details">….. </div>
- </li>
- <li class="recent-posts-list">
- <div class="recent-post-title">....... </div>
- <div class="recent-posts-details">….. </div>
- </li>
- </ul>
Merupakan status digunakan atau tidaknya script pada bagian kuning
- <script type="text/javascript">
- var posts_no=5; à mengatur jumlah recent post yang akan ditampilkan
- var showpoststhumbs=false; à true atau false untuk menampilkan gambar thumbnail pada recent post; true = ya, false = tidak
- var readmorelink=false; à untuk menampilkan tombol readmore; true = ya, false = tidak
- var showcommentslink=false; à untuk menampilkan link menuju daftar komentar dari postingan terkait; true = ya, false = tidak
- var posts_date=false; à memampilkan tanggal postingan; true = ya, false = tidak
- var post_summary=true; à Menampilkan potongan artikel; true = ya, false = tidak
- var summary_chars=100; à Jumlah maksimum karakter untuk potongan artikel pada var post_summary
- </script>
Kelompok Biru :
Pada bagian ini lah tampilan dari Recent Post dibentuk. Mulai dari bentuk kotak, lebar kotak dan warna. Warna inilah yang akan disesuaikan dengan tampilan seperti Rainbow Cake.
- img.recent-post-thumb { width: 50px; height: 50px; float: right; margin: 5px -5px 0px 0px; -webkit-border-radius: 50%; -moz-border-radius: 50%; border-radius: 50%; padding: 3px; } adalah tampilan kotak untuk thumbnail,
- ul.recent-posts-container { list-style-type: none; background: #fff; padding: 0px; font: 14px 'arial', sans-serif; margin: 5px 5px 5px 0px; width:100%; } lebar kotak untuk Tampilan Recent Post
- ul.recent-posts-container li:nth-child(1n+0) { background: #F49A9A;background-position: center; } warna background merah untuk Recent Post pertama
- ul.recent-posts-container li:nth-child(2n+0) { background: #FCD092;background-position: center; } warna background orange untuk Recent Post kedua
- ul.recent-posts-container li:nth-child(3n+0) { background: #FFF59E;background-position: center; } warna background kuning untuk Recent Post ketiga
- ul.recent-posts-container li:nth-child(4n+0) { background: #E1EFA0;background-position: center; }warna background hijau untuk Recent Post kekempat
- ul.recent-posts-container li:nth-child(5n+0) { background: #B1DAEF;background-position: center; }warna background biru untuk Recent Post kelima
Ok....... demikian postingan kalin ini.... silahkan mencoba dan bereksperimen....
