Assalamu’alaikum… Pada kesempatan kali ini akan saya share pengalaman saya bagaimana cara menambahkan recent post pada Blogger yang menarik dan dapat disesuaikan sesuai keperluan… Langsung saja, Lets check it out…
Thumbnail

Tipe Pertama
Buka “Tata Letak”
Main Menu Blogger
Pilih “Tambahkan Gadget”.
Di kolom tata ketal
Pilih “HTML/JavaScript”.
Beri judul sesuai keinginan dan tambahkan script dibawah ini pada form konten. 

function showlatestpostswiththumbs(t){document.write(‘

    • ‘);for(var e=0;e’),1==showpoststhumbs&&document.write(‘

    • ‘),document.write(‘
‘+i+”

“),”content”in n)var A=n.content.$t;else if(“summary”in n)var A=n.summary.$t;else var A=””;var k=/]*>/g;if(A=A.replace(k,””),1==post_summary)if(A.length

‘),1==posts_date&&(_=_+w[parseInt(g,10)]+” “+v+” “+f,$=1),1==readmorelink&&(1==$&&(_+=” | “),_=_+’Read more‘,$=1),1==showcommentslink&&(1==$&&(_+=”
“),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l=’‘+l+”“,_+=l,$=1),document.write(_),document.write(“

“),document.write(”

“)}document.write(”

“)}

var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 70;

/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs
<a style=”font-size: 9px; color: #CECECE; margin-top: 10px;” href=”http://alifpustaka.blogspot.com” rel=”nofollow”>Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<link href=’http://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;background: #fff}
ul.recent-posts-container {list-style-type: none; background: #fff;padding: 0px;font:12px ‘Ubuntu Condensed’, sans-serif;margin: 5px 0px 5px 0px;}
ul.recent-posts-container li:nth-child(1n+0) {background: #F49A9A; width: 100%}
ul.recent-posts-container li:nth-child(2n+0) {background: #FCD092; width: 95%}
ul.recent-posts-container li:nth-child(3n+0) {background: #FFF59E; width: 90%;}
ul.recent-posts-container li:nth-child(4n+0) {background: #E1EFA0; width: 85%;}
ul.recent-posts-container li:nth-child(5n+0) {background: #B1DAEF; width:80%;}
ul.recent-posts-container li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #777;}
.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>

  • untuk warna merah adalah background yang bisa diganti sesuai dengan keinginan anda
  • untuk warna biru adalah berapa jarak post yang menjorok kedalam

Hasilnya adalah sebagai berikut:

Sama seperti cara nomer satu sampai empat, namun script yang ditambahkan sebagai berikut :

function showlatestposts(e){for(var t=0;t]*>/g;if(d=d.replace(v,””),document.write(‘

  • ‘),document.write(n),document.write(‘

‘),1==post_summary)if(d.length

“),1==posts_date&&document.write(‘

“)}}
</script>

var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;
/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestposts<a style=”font-size: 9px; color: #CECECE;margin-top:10px;” href=”http://alifpustaka.blogspot.com” rel=”nofollow”>Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript>
<style type=”text/css”>
.recentpoststyle {counter-reset: countposts;list-style-type: none;}
.recentpoststyle a {text-decoration: none;color: #49A8D1;}
.recentpoststyle a:hover {color: #000;}
.recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
.recent-post-title a {color: #444;text-decoration: none;font: bold 13px “Avant Garde”,Avantgarde,”Century Gothic”,CenturyGothic,AppleGothic,sans-serif;}
.post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
.recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,”Baskerville Old Face”,”Hoefler Text”,”Times New Roman”,serif;}
</style></div>

 

    Dan hasil yang ditampilkan adalah sebagai berikut :
Recent Post

Tipe Ketiga Untuk tipe yang ini scriptnya sebagai berikut :

function showlatestpostswiththumbs(t){document.write(‘

    • ‘);for(var e=0;e’),1==showpoststhumbs&&document.write(‘

    • ‘),document.write(‘
‘+i+”

“),”content”in n)var A=n.content.$t;else if(“summary”in n)var A=n.summary.$t;else var A=””;var k=/]*>/g;if(A=A.replace(k””),1==post_summary)if(A.length’),1==posts_date&&(_=_+w[parseInt(g,10)]+” “+v+” “+f,$=1),1==readmorelink&&(1==$&&(_+=” | “),_=_+’Read more‘,$=1),1==showcommentslink&&(1==$&&(_+=”
“),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l=’‘+l+”“,_+=l,$=1),document.write(_),document.write(”

“),document.write(”

“)}document.write(”

“)}

var posts_no = 5;
var showpoststhumbs = true;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
var post_summary = true;
var summary_chars = 40;
/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs
<a style=”font-size: 9px; color: #CECECE; margin-top: 10px;” href=”http://alifpustaka.blogspot.com” rel=”nofollow”>Recent Posts Widget</a>
<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>

Dan hasilnya sebagai berikut :
Recent Post
Tipe Keempat

Scriptnya sebagai berikut (maaf ya, capek ngetik) :  

function showlatestpostswiththumbs(t){document.write(‘

    • ‘);for(var e=0;e’),1==posts_date&&document.write(‘

“),1==showpoststhumbs&&document.write(‘‘),document.write(‘

‘+i+”

“);var g=””,k=0;document.write(‘

‘),1==showcommentslink&&(1==k&&(g+=”
“),”1 Comments”==l&&(l=”1 Comment”),”0 Comments”==l&&(l=”No Comments”),l=’‘+l+”“,g+=l,k=1),1==readmorelink&&(1==k&&(g+=” | “),g=g+’Read more‘,k=1),document.write(g),document.write(“

“),document.write(”

“)}document.write(”

“)}

var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;

/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs
<a style=”font-size: 9px; color: #CECECE; float: right; margin-top: 5px;” href=”http://alifpustaka.blogspot.com”>Recent Posts Widget</a>
<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:35px;height:35px;float:right;margin: -14px 0px 0px 5px; border: 1px solid #cea5ac; border-radius: 10%;}
.recent-posts-container {font-family: ‘Oswald’, sans-serif;  float: left;width: 100%;min-height: 70px;margin: 5px 0px 5px 0px;padding: 0;font-size:12px;}
ul.recent-posts-container li {padding:5px 0px;min-height:65px; list-style-type: none; margin: 0px 10px 5px 35px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;}
ul.recent-posts-container li:before {content: counter(countposts,decimal);counter-increment: countposts;z-index: 2;position:absolute; left: 5px; font-size: 16px;color: #4D4D4D;background: #F7F7F7;padding: 9px 14px; border: 1px solid #efefef;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #4DACE3;}
.post-date {color:#e0c0c6; font-size: 11px; }
.recent-post-title a {font-size: 13px; text-transform: uppercase; color: #5C4D4D;}
.recent-post-title { margin: 5px 0px; }
.recent-posts-details {border-top: 4px solid #AC707A; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #4DACE3;}
</style>

Hasilnya sebagai berikut :

Recent Post

 

Sekian artikel saya kali ini, saya mohon maaf atas segala kekurangan dalam post kali ini… Jangan lupa kunjungi situs dibawah ini ya, mereka adalah sumber inspirasi saya:
Jika ada yang ingin mengedit lebih dalam untuk memperindah tampilan hati-hati ya… Assalamu’alaikum…