Recent Post adalah widget pada blog yang menampilkan artikel
terbaru yang biasanya dipasang pada sidebar blog. Dengan memasang Recent Post,
maka pengunjung dapat mengatahui tampilan postingan terbaru, sehingga artikel
terbaru dapat mudah dibaca oleh pengunjung blog.
Recent Post Keren dengan
Thumbnail
1. Login
akun blogger anda.
2. Silahkan
Pilih “Tata Letak” lalu pilih “Tambah Gadget/Add Gadget” kemudian pilih
“HTML/JavaScript”. Maukkan kode berikut pada kolom yang tersedia.
3. Pastekan
kode dibawah ini didalam kotak tersebut.
<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/AVvXsEjyP9XQvDzpl-qeaz9-VFZZilsYi9lqBwXaEYwdwx8tW0gLbdpzoNR3ryKi3bHAGHoSmklrBXPm6bHYXX71DPKhEZB52x7hf1O3AnZDio_GJqVinQxvmXRJOj-aMfT455zXsIEc8eVvkVn6/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 = 3;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;</script>
<script
src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>
<noscript>Your browser does not support
JavaScript!</noscript>
<link
href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet'
type='text/css'/>
<style type="text/css">
img.recent-post-thumb{padding:2px;width:65px;height:65px;float:left;margin:0px
10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container
{font-family:'Oswald', sans-serif;font-size:12px;}
ul.recent-posts-container li{list-style-type:
none; margin-bottom: 10px;font-size:12px;float:left;width:100%}
ul.recent-posts-container {counter-reset:
countposts;list-style-type:none;padding:0;}
ul.recent-posts-container li:before {content:
counter(countposts,decimal);counter-increment: countposts;z-index:
1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background:
#69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius:
50%;-moz-border-radius: 50%;border-radius: 50%;}
.recent-posts-container
a{text-decoration:none;}
.recent-post-title {margin-bottom:5px;}
.recent-post-title a {font-size:12px;
text-transform: uppercase; color: #2aace3;}
.recent-posts-details {margin: 5px 0px 0px
92px;font-size:11px;}
.recent-posts-details a{color: #777;}
</style>
4. Selanjutnya
Simpan Template, dan lihat hasilnya.