Tutorial Letak Widget Recent Post Menarik Pada Blog

Assalamualaikum dan salam sejahtera

Tutorial kali ini adalah mengenai cara meletakkan widget recent post yang cantik dan bewarna warni. Untuk pengetahuan semua, sora template kebiasaannya ada menyediakan sekali widget recentpost, tetapi untuk template di blog ini , widget recent post tiada disekalikan. Bermakna aku terpaksa mencari sendiri widget itu di google.

Selain itu, bila mana aku tukar template yang lain, widget recent post ini akan hilang. Jadi untuk memudahkan pencarian di masa hadapan sekiranya aku berniat untuk menukar template baru, senang dan mudah sahaja. Aku hanya perlu merujuk ke entri ini sahaja. Kepada yang sama-sama berminat dengan widget ini bolehlah lihat cara-caranya dibawah.

1. Bahagian A ( Tambah Kod Widget Recent Post Pada Blog )

• Buka Dashboard blog anda, pilih bahagian Layout.
• Klik pada Add A Gadget

• Pilih HTML/Javascript
• Copy kod dibawah ini dan pastekan di bahagian html tersebut.

<style type="text/css">

img.recent-post-thumbnail{float:right;height:50px;width:50px;margin:5px -5px 0px 0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;padding:3px;background: #fff}

ul.recent-posts-wrap {background: #fff;list-style-type: none; margin: 5px 0px 5px 0px; padding: 0px;font:12px 'Ubuntu Condensed', sans-serif;}

ul.recent-posts-wrap li:nth-child(1n+0) {background: #FCD092; width: 94%}

ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE0B4; width: 94%}

ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFF59E; width: 94%;}

ul.recent-posts-wrap li:nth-child(4n+0) {background: #E1EFA0; width: 94%;}

ul.recent-posts-wrap li:nth-child(5n+0) {background: #B1DAEF; width: 94%;}

ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}

.recent-posts-wrap a { text-decoration:none; }

.recent-posts-wrap a:hover { color: #222;}

.post-date {color:#e0c0c6; font-size: 11px; }

.recent-post-title a {font-size: 14px;font-weight: bold;color: #444;}

.recent-post-title {padding: 6px 0px;}

.recent-posts-details a{ color: #222;}

.recent-posts-details {padding: 5px 0px 5px; }

</style>

<script type="text/javascript">

function showrpwiththumbs(t){document.write('<ul class="recent-posts-wrap">');for(var e=0;e<posts_number;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/AVvXsEh5y-ROYFmEMtdC3VPCEd71Oy47k7hvErWAlk_Z3gDx3iInkRVwEzH1hm8SUzuDywlszNyqYJ8cPQZlwuCOgcWitrQbup98Isor6dk3JgnOuOwxa_-tBF7jcUPca8Ern6kJeOaHmfJI62TR/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==showpostswiththumbs&&document.write('<a href="'+r+'"><img class="recent-post-thumbnail" 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==insidereadmorelink&&(1==$&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">Read more</a>',$=1),1==showcomments&&(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_number = 5;

var showpostswiththumbs = true;

var insidereadmorelink = true;

var showcomments = false;

var posts_date = true;

var post_summary = true;

var summary_chars = 70;

</script>

<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrpwiththumbs"></script>

<noscript>Your browser does not support JavaScript!</noscript>

<link href='http://fonts.googleapis.com/css?family=Ubuntu+Condensed' rel='stylesheet' type='text/css' />

• Jika anda sudah berpuas hati dengan warna dan sebagainya, anda boleh save dan lihat widget tersebut pada blog.

Jika anda mahu mengubah suai mengikut pilihan hati anda, teruskan dengan tutorial di bawah.

Mengikut kod widget recent post asal, widget anda akan dipaparkan sebegini diblog anda.

2. Bahagian B (Configuration)

Di sini ada beberapa pengubahsuaian yang boleh anda lakukan mengikut pilihan hati anda.nda.

Pertama : Warna pada bahagian widget recent post.

• Anda boleh menukar kod warna yang telah dibirukan ini kepada kod warna yang anda mahu. Untuk mencari kod , anda boleh lihat di  HTML Color Picker.

• Sebagai contoh, di dalam blog aku aku memilih untuk meletakkan warna biru sebagai warna tema. Jadi, aku mengambil kod warna biru daripada yang paling cerah kepada yang paling gelap.

Kedua : Jumlah Post Pada Widget Anda

• Pada bahagian berwarna hijau, anda boleh pilih berapa banyak post yang akan ditunjukkan pada widget.

Ketiga : Pilihan Gambar

• Pada bahagian berwarna jingga, anda boleh pilih sama ada mahu menunjukkan gambar entri anda atau tidak menunjukkan sebarang gambar pada widget ini.

var showpostswiththumbs = true; (tunjuk gambar)

var showpostswiththumbs = false; (tidak tunjuk gambar)

Keempat : Pilihan Summary

• Pada bahagian berwarna purple, anda boleh pilih sama ada mahu menunjukkan summary entri anda pada widget ini atau tidak menunjukkannya.

var post_summary = true; (ada summary)

var post_summary = false; (tiada summary)

Jika sudah siap dan sudah menepati citarasa dan pilihan hati , anda boleh save dan lihat pada blog.

Sekian

Sumber : Bloggersorigin