-->

Ad Unit (Iklan) BIG

Cara Membuat Widget Recent Post Dengan Thumbnail Gambar

Post a Comment

image : pixabay

Blogger Media- Pada kesempatan kali ini saya akan share bagaiamana cara nya membuat sebuah widget recent post dengan thumbnail gambar yang menarik pada blog anda. Sebagai informasi saja pembuatan widget recent post ini menggunakan script HTML yang di share oleh mastimon dalam salah satu tutorial di blog nya.

Sebelumnya silahkan anda lihat contoh hasil dari widget recent post yang telah saya buat dengan menggunakan kode atau script dari mastimon tersebut di bawah ini.



Cukup menarik bukan ?

Lalu bagaimanakah caranya ? Tenang, untuk memasang widget tersebut caranya ternyata sangat mudah. Anda tidak perlu ribet harus menempatkan kode HTML pada mode edit HTML tema, karena anda cukup menempatkannya pada side bar blog pada menu add gadget HTML. Dan yang menarik script HTML di bawah ini bisa bekerja dengan baik di hampir semua templte blog lho. Jadi apapun template blog yang anda gunakan saat ini script tersebut bisa di pasang dan bisa bekerja dengan sangat baik.

Buat anda yang penasaran silahkan ikuti langkah – langkah memasang script tersebut pada template blog berikut ini .

Berikut ini caranya :

1. Log in ke dashboard blog anda



2. Scroll ke bagian tata letak



3. Copy script HTML berikut ini

<script type="text/javascript" src="//cloud.github.com/downloads/jhwilson/Create-a-Blogger-archive-page/Make-Blogger-Archive-Page.js"></script> <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:"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 = 5; var showpostswiththumbs = true; var insidereadmorelink = true; var showcomments = false; var posts_date = false; var post_summary = true; var summary_chars = 50; </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' />

4. Kembali ke menu tata letak, pilih sidebar add gadget


5. Pilih edit HTML / Java Script


6. Pastekan kode script HTML tadi di kotak yang tersedia


7. Berikan nama widget Recent post


8. Klik Simpan

9. Refresh blog dan lihat contoh hasilnya berikut ini


10. Widget recent post anda telah selesai di buat.

Ternyata membuat widget recent post yang menarik dengan tumbnail gambar sangat mudah bukan ? Selamat berkreasi dan mencoba.

Demikian sekilas artikel tentang cara mudah membuat widget recent post dengan thumbnail gambar, semoga bermanfaat dan berguna untuk anda. 

Terima kasih sudah berkunjung ke blog saya.

Related Posts

Post a Comment

Subscribe To Our Newsletter