Cara Menambahkan Widget Recent Post pada Blog

Widget recent post.

Widget Recent Post adalah widget yang berisi artikel-artikel atau post-post baru yang baru saja Anda publikasikan. Widget Recent Post atau Widget Artikel Terbaru merupakan kebutuhan juga dalam susunan tampilan blog. Hal ini akan membuat pengunjung tau, "oh ternyata Anda habis menulis ini dan ini." Hal tersebut dapat membuat pengunjung ingin membaca artikel-artikel terbaru Anda.

.

Widget yang akan kita peragakan nanti akan seperti pada gambar diatas. Kelebihannya adalah terdapat thumbnail atau gambar post blog Anda. Lalu terdapat pempublikasinya, jumlah komentar dan sebagian teks pada isi artikel Anda tersebut. Atau bisa dibilang summary atau ringkasan artikel Anda. Selain itu, Widget ini juga dapat memunculkan tanggal mempublishnya.

Cara Menambahkan Widget Recent Post atau Artikel Terbaru

• Pertama adalah login pada blog Anda, lalu silahkan klik Tata Letak. Pilih lah tempat yang hendak dijadikan tempat untuk Widget Recent Post diletakan. Lalu klik Tambahkan Gadget. Agar lebih mudah akan Rejak sertakan gambar.

• Setelah itu akan muncul pilihan seperti pada gambar. Silahkan pilih tambah HTML/JavaScript.

• Setelah itu akan muncul gambar seperti pada gambar diatas. Isilah judul sesuai dengan keinginan Anda. Contoh diatas adalah "Artikel Terbaru".
• Isi konten tersebut sesuai dengan kode html seperti dibawah ini. Silahkan download htmlnya disini saja agar lebih mudah dan tersimpan di komputer ataupun smartphone Anda, sehingga akan mempermudah Anda mengotak-ngatiknya kelak.

<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/AVvXsEiVXvTDUKnTRA55TltXj1zlY7StSjgVmZOCqfZ7OpU38G5YnIalEpTOCq-nMukCKOBb2Xo3VRcB1rerVsSZdBLjMb6GbBWLxFOtW7i3S2xycrUm0Cz4Cz096bXhsiJIUp_mQTf3dhuCBV8L/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>
<a style="font-size: 9px; color: #CECECE; margin-top: 10px;" href="http://www.indravedia.com/2015/04/menambahkan-widget-recent-post-blogger-mantab.html" rel="nofollow">Recent Posts Widget</a>
<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 10px 10px;border: 1px solid #69B7E2;}
.recent-posts-container {font-family:'Oswald', sans-serif;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 {content: counter(countposts,decimal);counter-increment: countposts;z-index: 1;position:absolute; left: 0px; font-size: 13px;font-weight: bold;color: #fff;background: #69B7E2;line-height:25px;height:25px;width:25px;text-align:center;-webkit-border-radius: 50%;-moz-border-radius: 50%;border-radius: 50%;}
.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>

• Tambahan info, ada beberapa hal disini yang dapat Anda rubah sesuai dengan kemauan Anda.

1. var posts_no = 5; - fungsinya untuk menunjukkan berapa artikel yang akan termuat. Silahkan pilih berapa, dan cukup mudah menggantinya, yaitu dengan merubah angka 5 tersebut menjadi angka semau Anda.
2. var showpoststhumbs = true; - fungsinya untuk menunjukkan gambar artikel Anda atau tidak. Jika anda tidak ingin maka rubah kata true menjadi false.
3. var readmorelink = true; - fungsinya sama, yaitu menunjukkan readmore atau tidak. Jika tidak gantilah kata true menjadi false.
4. var showcommentslink = true; - fungsinya juga untuk menunjukkan atau tidak. Dan ini untuk menunjukkan jumlah komentar. Rubahlah true menjadi false jika tidak ingin memperlihatkan.
5. var posts_date = true; - fungsinya untuk menunjukkan tanggal dipublishnya atau tidak. Jika tidak rubah kata true menjadi false.
6. var post_summary = true; - fungsinya untuk memperlihatkan bait kata yang ada di artikel Anda. Rubah false untuk menyembunyikannya.
7. var summary_chars = 40;</script> - fungsinya memilih jumlah kata summary pada artikel Anda. Rubah angka 40 menjadi angka kemauan Anda. Namun ini tidak akan berfungsi jika kodenya seperti ini var post_summary = false;.

• Klik simpan dan silahkan dicek pada blog Anda. Rejak sudah mencoba dan Alhamdulillah telah berhasil. Semoga Anda juga berhasil. Selamat mencoba, semoga bermanfaat.

• Sumber|www.indravedia.com|