Home / Medium / Widgets

Membuat Wigets Recent Post / Artikel Terbaru di Blogspot

By Jin Kura Kura Post a Comment

Membuat Wigets Recent Post / Artikel Terbaru di Blogspot - Pada postingan kali ini, saya akan menunjukkan kepada Anda bagaimana cara menampilkan recent post / postingan terbaru di Blogger dengan berbagai kode dan pilihan. Anda akan menemukan semua trik posting terbaru untuk Blogger dalam tutorial ini.

Posting Terbaru Dengan Widget Resmi Blogger

Cara pertama & termudah untuk menampilkan posting terkini dengan mudah dalam widget adalah dengan menggunakan widget umpan asli Blogger untuk menampilkan entri terkini dari umpan blog.

Navigasikan ke Dashboard Anda >> Tata Letak/Layout >> Tambah Gadget >> Feeds Widget. Masukkan URL feed blog Anda dan klik Lanjutkan.



Sebagai contoh saya masukkan URL dari feedburner: http://feeds.feedburner.com/KuraHoliday



Sekarang, cukup konfigurasikan pengaturan tampilan posting. Anda dapat mengatur jumlah posting, judul widget, dan pengaturan lainnya. Berikut Tampilannya pada halaman dengan blogspot anda.


Widget Posting Terbaru Dengan Kode

Widget di atas hanya berfungsi di area widget Blogger Anda. Namun, berikut ini cara menambahkan widget ini ke bagian mana pun dari blog Anda dengan beberapa JavaScript.

Arahkan ke Dashboard Anda >> Theme >> Edit HTML. Cari dan tempel kode ini tepat di atas </head>:


<script type='text/javascript'> //<![CDATA[ function rp(json){document.write('<ul>');for(var i=0;i<numposts;i++){document.write('<li>');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);var readmorelink="(more)";readmorelink=readmorelink.link(posturl);var postdate=entry.published.$t;var cdyear=postdate.substring(0,4);var cdmonth=postdate.substring(5,7);var cdday=postdate.substring(8,10);var monthnames=new Array();monthnames[1]="Jan";monthnames[2]="Feb";monthnames[3]="Mar";monthnames[4]="Apr";monthnames[5]="May";monthnames[6]="Jun";monthnames[7]="Jul";monthnames[8]="Aug";monthnames[9]="Sep";monthnames[10]="Oct";monthnames[11]="Nov";monthnames[12]="Dec";if("content"in entry){var postcontent=entry.content.$t}else if("summary"in entry){var postcontent=entry.summary.$t}else var postcontent="";var re=/<\S[^>]*>/g;postcontent=postcontent.replace(re,"");document.write(posttitle);if(showpostdate==true)document.write(' - '+monthnames[parseInt(cdmonth,10)]+' '+cdday);if(showpostsummary==true){if(postcontent.length<numchars){document.write(postcontent)}else{postcontent=postcontent.substring(0,numchars);var quoteEnd=postcontent.lastIndexOf(" ");postcontent=postcontent.substring(0,quoteEnd);document.write(postcontent+'...'+readmorelink)}}document.write('</li>')}document.write('</ul>')} //]]> </script>


Pasang Widget dengan cara menuju ke Tata Letak/Layout >> HTML/Javascript, masukkan code dibawah:

<script>var numposts =5; var showpostdate = false; var showpostsummary = false; var numchars = 100; </script> <script src="http://YOURBLOGNAME.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=rp"> </script>

Pengaturan:

Berapa banyak posting yang harus dimasukkan dalam widget posting terbaru? Default-nya adalah 5.

numposts = 5;

Tanggal posting harus ditampilkan atau tidak? true atau false.

showpostdate = false;

Ringkasan posting harus ditampilkan atau tidak? true atau false.

showpostsummary = false;

Berapa banyak karakter yang harus ditampilkan dalam ringkasan posting? Default-nya adalah 100.

numchars = 100;

Lihat hasil recent post pada blog anda.


Recent Posts dengan Thumbnail

Jika anda mencari recent posts widget dengan gambar thumbnail, anda bisa menggunakan script ini.

Pasang Widget dengan cara menuju ke Tata Letak/Layout >> HTML/Javascript, masukkan code dibawah:
<script type="text/javascript"> 
  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/AVvXsEhh_hyphenhyphen-bmZ-wUm3lHSQM9mscfdksmkmS2JBoUXWP1yl_ecAhWyd1L6ry2-Uzc-pxyfiQD-CXpGf9ZIFMN6WwWZpmR3H_ZABZ_l6o2ZFauTdnE5A681gKK00etWlk0WLq5iTgmXgNu7_VWb8/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('<br><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==$&&(_+=" <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_no = 5; 
  var showpoststhumbs = true; 
  var readmorelink = true; 
  var showcommentslink = true; 
  var posts_date = true; 
  var post_summary = true; 
  var summary_chars = 40;</script> 
  <script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script> 
  <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-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 {display:none;} 
  .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>

Pengaturan: 
posts_no = 5;
Ganti angka 5 untuk mementukan jumlah post yang akan tampil
var showpoststhumbs = true;
Untuk menampilkan Thumbnail true atau false.
var summary_chars = 40;
Panjang kalimat summary.

Lihat tampilan widget recent posts pada blogspot anda.

Recent Post Border List

Recent Posts widgets berikut ini sudah sangat responsive, pasang Widget dengan cara menuju ke Tata Letak/Layout >> HTML/Javascript, masukkan code dibawah:
<script type="text/javascript">
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(p){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/AVvXsEhh_hyphenhyphen-bmZ-wUm3lHSQM9mscfdksmkmS2JBoUXWP1yl_ecAhWyd1L6ry2-Uzc-pxyfiQD-CXpGf9ZIFMN6WwWZpmR3H_ZABZ_l6o2ZFauTdnE5A681gKK00etWlk0WLq5iTgmXgNu7_VWb8/s1600/no-thumb.png"}var h=n.published.$t,f=h.substring(0,4),w=h.substring(5,7),v=h.substring(8,10),A=new Array;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="recent-posts-list">'),1==posts_date&&document.write('<div class="post-date">'+A[parseInt(w,10)]+" "+v+" "+f+"</div>"),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>");var g="",k=0;document.write('<div class="recent-posts-details">'),1==showcommentslink&&(1==k&&(g+=" <br> "),"1 Comments"==l&&(l="1 Comment"),"0 Comments"==l&&(l="No Comments"),l='<a href="'+m+'" target ="_top">'+l+"</a>",g+=l,k=1),1==readmorelink&&(1==k&&(g+=" | "),g=g+'<a class="readmorelink" href="'+r+'" class="url" target ="_top">Read more</a>',k=1),document.write(g),document.write("</div>"),document.write("</li>")}document.write("</ul>")}
</script>
<script type="text/javascript">
var posts_no = 5;
var showpoststhumbs = false;
var readmorelink = true;
var showcommentslink = true;
var posts_date = true;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

<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 {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 0px;}
ul.recent-posts-container {counter-reset: countposts;list-style-type: none;padding:0px;}
ul.recent-posts-container li:before {display:none;}
.recent-posts-container a { text-decoration:none; }
.recent-posts-container a:hover{color: #07A28D;}
.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 #07A28D; margin-top: 5px; padding-top: 5px;}
.recent-posts-details a{ color: #888;}
a.readmorelink {color: #07A28D;}
</style>
Pengaturan
var posts_no = 5;
Jumlah post yang ingin ditampilkan, ganti 5 dengan jumlah posting yang anda inginkan.
var showpoststhumbs = false;
Set true jika ingin menampilkan gambar.
var posts_date = true;
Untuk menampilkan date/tanggal posting.
 #07A28D;
Hex code diatas adalah warna, jika ingin menggantinya, silahkan lihat halaman color picker, copy dan paste hex code yang anda pilih untuk diseusaikan dengan template anda.

Lihat pada blogspot anda.



No comments for "Membuat Wigets Recent Post / Artikel Terbaru di Blogspot"

Post a Comment

Daftar Isi