Widget ada banyak macam didalam blog, salah satunya yang akan admin bahas triknya kali ini ialah Widget Recent Post. Untuk mempercantik halaman blog dibutuhkan widget widget khusus, Seperti yang kita ketahui widget bawaan mungkin terlihat kurang menarik. inilah faktor para blogger memburu widget widget keren.Nah kali ini admin akan share tentang Tutorial bagaimana”Cara membuat widget Recent post keren dan ringan di Blog“
Seperti yang sudah dijelaskan, Apa itu widget Recent Post?? widget Recent Post adalah Widget blogger yang berfungsi sebagai penunjuk kepada Artikel terakhir dipublish atau baru saja dipublish, Nah didalam widget Recent post semua artikel terakhir yang anda publish akan menjadi satu. Bagaimana tertarik kah anda untuk mencoba widget recent post?? tenang saja yang admin share widget yang sangat responsiv dan ringan jadi jangan takut ya…
Oke Langsung saja admin share Tutorialnya berikut langkah langkahnya
Cara membuat widget Recent post keren dan ringan di Blog
1. Langsung saja Login kehalaman dashboard blogger anda pilih TATA LETAK=>Add Gadget=>Html Javascript=>
2. Setelah muncul halaman baru isikan judul dan copykan kode dibawah ini
<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://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('<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="https://menthorkita.blogspot.com/" 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;}
.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>NOTE : CATATAN
1. var numposts = 5 adalah jumlah post yang akan tampil dalam widget
2. var showpoststhumbs = untuk mengatur apakah akan menampilkan thumbnail atau tidak, jika tidak ingin tampilkan thumbnail, ganti tulisan “true” menjadi “false”
3. var showcommentslink = untuk menampilkan link komentar + Jumlah komentar dari postingan yang tampil.
4. var posts_date = > untuk pengaturan menunjukkan tanggal posting
5. var post_summary = > untuk pengaturan apakah ingin menampilkan summary atau tidak
6. var summary_chars = > mengatur jumlah karakter awal posting yang muncul dalam summary. Bisa dikurangi atau ditambah.
7. Intinya “true” berarti perintah tampilkan dan “false” perintah sembunyikan. Paste semua code di bagian isian konten.Kemudian klik Simpan.
Oke jika sudah silahkan di save javascriptnya dan kemudian liat hasilnya
Anda bisa berkreasi sendiri tentunya beberapa widget lainnya Mudah bukan ?? nah demikianlah tutorial admin tentang bagaimana “Cara membuat widget Recent post keren dan ringan di Blog” sekian dan terima kasih telah berkunjung..
terimaksih sudah membantu sudah saya pasang di blog
Mas widget artikel terbaru seperti punya nya mas tolong diposting yang responsive
Baik mas, kedepannya akan ditambahkan