Cara Membuat Recent Post Di Blogger

Hallo sobat...

Kali ini saya akan menuliskan tutorial / cara membuat recent post di blogger, mulai dari recent post sederhana tanpa thumbnail (berdasarkan label dan tidak), hingga membuat recent post berdasarkan label di blogger (sederhana serta dengan thumbnail).

Oke, saya rasa tidak perlu panjang lebar menjelaskan widget ini, sebab saya yakin pasti sahabat sudah mengetahui fungsi widget ini, yaitu untuk menampilkan daftar artikel terbaru yang ada di blog kita, baik itu berdasarkan label yang kita pilih atau tidak.

Widget Recent Post Sederhana Berdasarkan Label Dan Tidak

Saya akan memulai dengan cara memasang widget recent post sederhana, dan langkah - langkah yang harus dilakukan yaitu sebagai berikut :

Masuk ke dasbor blogger
Buka halaman Tata Letak
Klik Tambahkan Gadget
Pilih gadget HTML/JavaScript
Masukkan isyarat widget recent post pada episode Konten
Simpan

Nah itulah langkah - langkah yang harus kita lakukan untuk memasang widget ini.

Adapun isyarat widget yang harus dipasang adalah

Kode Widget Recent Post Sederhana Loading Cepat

Berikut kodenya :

 <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 standardstyling = true;</script> <script type="text/javascript" src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts"></script>

Keterangan :

var numposts = 5; → Ganti angka 5 dengan jumlah artikel yang ingin sahabat tampilkan

Kode Widget Recent Post Sederhana Berdasarkan Label

Berikut kodenya :

 <script type='text/javascript'> function showrecentposts(t){for(var e=0;numposts>e;e++){var n,r=t.feed.entry[e],i=r.title.$t;if(e==t.feed.entry.length)break;for(var a=0;a<r.link.length;a++)if("alternate"==r.link[a].rel){n=r.link[a].href;break}i=i.link(n),standardstyling&&document.write("<li>"),document.write(i)}standardstyling&&document.write("</li>")} var numposts = 5; var standardstyling = true; </script> <div class='LatestPost'> <script type='text/javascript' src='/feeds/posts/default/-/blogger%20tutorial?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts'></script></div> <style type='text/css'>.LatestPost li{list-style:none;margin:0;padding:0.5em 0;border-bottom:1px dashed;}</style>

Keterangan :

var numposts = 5; → Ganti angka 5 dengan jumlah artikel yang ingin kau tampilkan
/feeds/posts/default/-/blogger%20tutorial → Ganti goresan pena blogger%20tutorial dengan nama nama label artikel yang ingin kau tampilkan. Baca Cara Mendapatkan Link/URL Halaman, Post, Label Di Blogger Untuk Menu dsb.

Lanjut....

Script Recent Post Dengan Thumbnail Untuk Blogger

Selanjutnya kita akan mencar ilmu cara membuat recet post dengan thumbnail di blogger baik berdasarkan label yang kita pilih atau tidak.

Di sini saya tidak akan menuliskan cara yang agak rumit, jadi saya ambil cara yang paling mudah saja.

Dan langkah - langkah yang harus sahabat lakukan untuk memasang widget recent post by label ini sama saja dengan cara di atas (cara memasang widget).

Adapun isyarat widget yang harus sahabat pasang yaitu ini

Recent Post Dengan Thumbnail + Ringkasan

Berikut kodenya :

 <script style="text/javascript">//<![CDATA[ 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/AVvXsEglxFEePb8s9DZTwM_okpJrMnnbuO1807NSMmO6vai8bABnfjezIcVoPVQccuh5aM-wAWJTZhZlsHpLSKgXwoOnNCjXbt4sRQmDP8HBn9VN8rlN5wlzhEshJyybRs302igQiFC35iP8Q8-H/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('<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==$&&(_+=""),"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 style="text/javascript"> var posts_no = 5; var showpoststhumbs = true; var readmorelink = true; var showcommentslink = true; 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=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 20px 10px 0; background: #fff; border: 1px solid #ddd;} .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 {position:relative;padding:5px 7px;min-height:65px; list-style-type: none; margin-bottom: 5px;border:1px solid #ddd} ul.recent-posts-container {color:#555;counter-reset: countposts;list-style-type: none;} .recent-posts-container a { text-decoration:none; } .recent-post-title a {font-weght:bold; text-transform: uppercase; color: #2aace3;} .recent-posts-details {margin: 5px 0px 0px 92px; } .recent-posts-details a{ color: #777;} </style>

Keterangan :

var posts_no = 5; → Ganti angka 5 untuk menentukan jumlah artikel yang sahabat mau
var showpoststhumbs = true; → Ganti true menjadi false kalau tidak ingin menampilkan thumbnail
var readmorelink = true; → Ganti true menjadi false kalau tidak ingin menampilkan goresan pena Read More
var showcommentslink = true; → Ganti true menjadi false kalau tidak ingin menampilkan jumlah komentar
var posts_date = true; → Ganti true menjadi false kalau tidak ingin menampilkan tanggal
var post_summary = true; → Ganti true menjadi false kalau tidak ingin menampilkan ringkasan
var summary_chars = 70; → Ganti angka 70 dengan jumlah huruf ringkasan yang sahabat mau.

Widget Recent Post Berdasarkan Label Dengan Thumbnail Di Blogger

Berikut kodenya :

 <script style="text/javascript">//<![CDATA[ function labelthumbs(t){document.write('<ul class="label_with_thumbs">');for(var e=0;e<numposts;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 m=n.link[o].title,l=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/AVvXsEgwaSqMSN53XyOCyJx6yXWjnGcHKToNUd7XUfQFP9NFh8VEwogz8l6GjksUaIIaURs3SO2ehGp1LbDXoHtkD-CrLkSk8lstpEpntfDdYXD6KmQZBPOQhwwsfksXelJb4fHXDbiV9w4y5jDS/"}var p=n.published.$t,f=p.substring(0,4),g=p.substring(5,7),w=p.substring(8,10),A=new Array;if(A[1]="Jan",A[2]="Feb",A[3]="Mar",A[4]="Apr",A[5]="May",A[6]="Jun",A[7]="Jul",A[8]="Aug",A[9]="Sep",A[10]="Oct",A[11]="Nov",A[12]="Dec",document.write('<li class="clearfix">'),1==showpostthumbnails&&document.write('<a href="'+r+'" target ="_top"><img class="label_thumb" src="'+u+'"/></a>'),document.write('<strong><a href="'+r+'" target ="_top">'+i+"</a></strong><br>"),"content"in n)var v=n.content.$t;else if("summary"in n)var v=n.summary.$t;else var v="";var y=/<\S[^>]*>/g;if(v=v.replace(y,""),1==showpostsummary)if(v.length<numchars)document.write(""),document.write(v),document.write("");else{document.write(""),v=v.substring(0,numchars);var k=v.lastIndexOf(" ");v=v.substring(0,k),document.write(v+"..."),document.write("")}var _="",x=0;document.write("<br>"),1==showpostdate&&(_=_+A[parseInt(g,10)]+"-"+w+" - "+f,x=1),1==showcommentnum&&(1==x&&(_+=" | "),"1 Comments"==m&&(m="1 Comment"),"0 Comments"==m&&(m="No Comments"),m='<a href="'+l+'" target ="_top">'+m+"</a>",_+=m,x=1),1==displaymore&&(1==x&&(_+=" | "),_=_+'<a href="'+r+'" class="url" target ="_top">More »</a>',x=1),document.write(_),document.write("</li>"),1==displayseparator&&e!=numposts-1&&document.write("")}document.write("</ul>")} //]]></script> <div class="rpplab"><script type='text/javascript'> var numposts = 4; var showpostthumbnails = true; var displaymore = false; var displayseparator = false; var showcommentnum = false; var showpostdate = false; var showpostsummary = true; var numchars = 50;</script> <script type="text/javascript" src="/feeds/posts/default/-/blogger%20tutorial?orderby=updated&alt=json-in-script&callback=labelthumbs"></script></div> <style type="text/css"> img.label_thumb{ float:left; padding:5px; border:1px solid #ddd;margin-right:10px; height:55px; width:55px; } img.label_thumb:hover{ background:#f7f6f6; } .label_with_thumbs { float: left; width: 100%; min-height: 70px; margin: 0px 10px 2px 0px; adding: 0; } ul.label_with_thumbs{margin:0;} ul.label_with_thumbs li {color:#555;padding:5px 0; min-height:65px; margin-bottom:10px;list-style:none;border-bottom:1px solid #ddd;} .label_with_thumbs a {color:#2aace3} .label_with_thumbs strong {} <style type="text/css">

Keterangan :

var numposts = 4; → Untuk menentukan jumlah artikel yang ditampilkan
var showpostthumbnails = true; → Ganti jadi false kalau tidak ingin menampilkan thumbnail
var displaymore = false; → Ganti jadi true kalau ingin menampilkan goresan pena Read More
var showcommentnum = false; → Ganti jadi true kalau ingin menampilkan jumlah komentar yang ada
var showpostdate = false; → Ganti jadi true kalau ingin menampilkan tanggal artikel
var showpostsummary = true; → Ganti jadi false kalau tidak ingin menampilkan ringkasan artikel
var numchars = 50 → Nilai untuk menentukan jumlah huruf pada ringkasan
/feeds/posts/default/-/blogger%20tutorial → Ganti goresan pena blogger%20tutorial dengan nama label yang sahabat mau (label yang ada pada blog sobat) Baca Cara Mendapatkan Link/URL Halaman, Post, Label Di Blogger Untuk Menu dsb.

Nah itulah cara membuat recent post di blogger beserta 4 isyarat widget recent post yang mampu sahabat pilih sesuai selera.

Memodifikasi tampilan dari widget tersebut silakan edit isyarat css pada masing - masing widget yang berada di antara isyarat <style type="text/css"> dan <style type="text/css">

Cari Blog Ini

blog cara dan tutorial