Informasi Lowongan Kerja Bank dan BUMN
Temukan kami di Twitter #lokerupdate

WIDGET SEDERHANA RECENT POST / POSTINGAN TERBARU UNTUK BLOGGER


Hi bro, kali ini admin mau berbagi mengenai cara menambahkan widget sederhana untuk blog. Tadi widget postingan terbaru milik blog admin tiba tiba jadi kacau tampilannya, maka dari itu admin memutuskan untuk mengganti ke widget yang lebih sederhana. Widget blog ini sebelumnya dari segi tampilan sih keren, tapi buat apa keren kalau berat dan bisa berantakan sendiri, soalnya admin gak jago otak atik script.

Tadi sempat cari cari di google widget yang sederhana, dan pilihan jatuh ke widget sederhana milik blog Masyadi.com, thanks ya mas Yadi infonya. Admin copy script widgetnya, kemudian buka blogger, pilih Tata Letak ⇨ Tambahkan Gadget ⇨ HTML/Javascipt , Scriptnya di bawah ini, silahkan bro sekalian copy kalau butuh. hehe.

Widget Recent Post Simple Script

<script type="text/javascript">function showrecentposts(json){for(var i=0;i<numposts;i++){var entry=json.feed.entry[i];var posttitle=entry.title.$t;var posturl;if(i==json.feed.entry.length)break;for(var k=0;k<entry.link.length;k++){if(entry.link[k].rel=='alternate'){posturl=entry.link[k].href;break}}posttitle=posttitle.link(posturl);if(standardstyling)document.write('<li>');document.write(posttitle)}if(standardstyling)document.write('</li>')}</script><script type="text/javascript">var numposts = 5;var showpostdate = true;var showpostsummary = true;var numchars = 100;var standardstyling = true;</script><script type="text/javascript" src="http://bonbitcoin.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

Untuk mengganti jumlah postingan yang ditampilkan angka 5 pada numposts silahkan bro ganti dengan jumlah yang diinginkan, jangan lupa bonbitcoin.blogspot.com diganti dengan nama blog bro sekalian, lalu pilih simpan/save.

Sekian dulu ya bro coretan sederhana ini, semoga bermanfaat dan terima kasih sudah berkunjung ke blog yang sangat sederhana ini.

UPDATE : WIDGET RECENT POST TERBARU YANG SEKARANG SAYA PAKAI

<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 'Open Sans', sans-serif;}
ul.recent-posts-wrap li:nth-child(1n+0) {background: #FFE5BA; width: 94%}
ul.recent-posts-wrap li:nth-child(2n+0) {background: #FFE5BA; width: 94%}
ul.recent-posts-wrap li:nth-child(3n+0) {background: #FFE5BA; width: 94%;}
ul.recent-posts-wrap li:nth-child(4n+0) {background: #FFE5BA; width: 94%;}
ul.recent-posts-wrap li:nth-child(5n+0) {background: #FFE5BA; width: 94%;}
ul.recent-posts-wrap li {padding:5px 10px;list-style-type: none; margin: 0 0 -5px; color: #000;}
.recent-posts-wrap a { text-decoration:none; }
.recent-posts-wrap a:hover { color: #000;}
.post-date {color:#000000; font-size: 11px; }
.recent-post-title a {font-size: 14px;font-weight: bold;color: #000000;}
.recent-post-title {padding: 6px 0px;}
.recent-posts-details a{ color: #000;}
.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:"http://2.bp.blogspot.com/-C3Mo0iKKiSw/VGdK808U7rI/AAAAAAAAAmI/W7Ae_dsEVAE/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 = 15;
var showpostswiththumbs = true;
var insidereadmorelink = false;
var showcomments = false;
var posts_date = true;
var post_summary = true;
var summary_chars = 100;
</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' />

Baca juga : widget recent posts dengan bubble hijau 

CARA MEMASANG PADA BLOGGER


1. Pilih TATA LETAK 

2. TAMBAHKAN GADGET pada tempat yang diinginkan

3. Pilih HTML/JAVASCRIPT

4. Copy Paste Script Widget di atas

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel