Cara Membuat Recent Post Di Blogger - BBT: Cara membuat recent post di blogger dengan dengan tampilan sederhana serta membuat recent post berdasarkan label dengan thumbnail.

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), sampai membuat recent post berdasarkan label di blogger (sederhana serta dengan thumbnail).

Oke, saya rasa tidak perlu panjang lebar menjelaskan widget ini, karena saya yakin pasti sobat 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.

Membuat Recent Post Sederhana Berdasarkan Label Dan Tidak

membuat recent post
Saya akan memulai dengan cara memasang widget recent post sederhana, dan langkah - langkah yang harus dilakukan adalah sebagai berikut :
  1. Masuk ke dasbor blogger
  2. Buka halaman Tata Letak
  3. Klik Tambahkan Gadget
  4. Pilih gadget HTML/JavaScript
  5. Masukkan kode widget recent post pada bagian Konten
  6. Simpan
Nah itulah langkah - langkah yang harus kita lakukan untuk memasang widget ini.

Adapun kode 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 sobat 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 :
Lanjut....

Membuat Recent Post Dengan Thumbnail Di Blogger

Selanjutnya kita akan belajar 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 sobat lakukan untuk memasang widget recent post by label ini sama saja dengan cara di atas (cara memasang widget).

Adapun kode widget yang harus sobat pasang adalah ini

Widget Recent Post Dengan Thumbnail Di Blogger

recent post thumbnail
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:"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==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 sobat mau
  • var showpoststhumbs = true; → Ganti true menjadi false jika tidak ingin menampilkan thumbnail
  • var readmorelink = true; → Ganti true menjadi false jika tidak ingin menampilkan tulisan Read More
  • var showcommentslink = true; → Ganti true menjadi false jika tidak ingin menampilkan jumlah komentar
  • var posts_date = true; → Ganti true menjadi false jika tidak ingin menampilkan tanggal
  • var post_summary = true; → Ganti true menjadi false jika tidak ingin menampilkan ringkasan
  • var summary_chars = 70; → Ganti angka 70 dengan jumlah karakter ringkasan yang sobat mau.

Widget Recent Post Berdasarkan Label Dengan Thumbnail Di Blogger

recent-post-by-label
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:"http://2.bp.blogspot.com/_IKigl6y9hFA/TMdcT1jzo5I/AAAAAAAAAHA/hAKuT9rJpFU/noimage.jpg"}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 jika tidak ingin menampilkan thumbnail
  • var displaymore = false; → Ganti jadi true jika ingin menampilkan tulisan Read More
  • var showcommentnum = false; → Ganti jadi true jika ingin menampilkan jumlah komentar yang ada
  • var showpostdate = false; → Ganti jadi true jika ingin menampilkan tanggal artikel
  • var showpostsummary = true; → Ganti jadi false jika tidak ingin menampilkan ringkasan artikel
  • var numchars = 50 → Nilai untuk menentukan jumlah karakter pada ringkasan
  • /feeds/posts/default/-/blogger%20tutorial → Ganti tulisan blogger%20tutorial dengan nama label yang sobat 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 kode widget recent post yang bisa sobat pilih sesuai selera.

Memodifikasi tampilan dari widget tersebut silakan edit kode css pada masing - masing widget yang berada di antara kode <style type="text/css"> dan <style type="text/css">
loading...
Lihat / Tinggalkan Komentar
- All Rights Reserved. Powered by Blogger. Membuat Blog

Terimakasih telah membaca , semoga artikel tentang Cara Membuat Recent Post Di Blogger yang ada di blog ini bermanfaat buat sobat