Tutorial Menciptakan Widget Recent Post Keren Dan Ringan Di Blog

Widget tersedia banyak macam dididalem blog, tidak benar sebuahnya nan mau admin bahas triknya kaliitu ialah Widget Recent Post. Untuk mempercantik halaman blog diperlukan widget widget khusus, Seperti nan kami ketahui widget bawaan dapat saja terlihat kurang menarik. inilah faktor para blogger memburu widget widget keren.Nah kaliitu admin mau share wacana Tutorial bagaimana"Cara membikin widget Recent post keren juga ringan di Blog"

Seperti nan rampung dijelaskan, Apa itu widget Recent Post?? widget Recent Post ialah Widget blogger nan berfungsi jadi penunjuk kepada Artikel terakhir dipublish ataupun gres saja dipublish, Nah dididalem widget Recent post semua artikel terakhir nan kalian publish mau jadinya sebuah. Bagaimana tertarik kah kalian sebagai mencoba widget recent post?? damai saja nan admin share widget nan sangat responsiv juga ringan jadi janganlah takut ya...

Oke Langsung saja admin share Tutorialnya berikut langkah langkahnya

Cara membikin widget Recent post keren juga ringan di Blog

1. Langsung saja Login kehalaman dashboard blogger kalian pilih TATA LETAK=>Add Gadget=>Html Javascript=>

2. Setelah muncul halaman gres isikan judul juga copykan isyarat 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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEib4JMvFk8T3Ktk-CN69bXL3af2Iday0x1evi1j6YeY7i4l4Tpko0pZZKhdzVF2evj7KHUD7gd4_jusyS671Ai_KLeORRxps8nZp8i3GGrI7esOhe0dQ_ZGFmgm8-Q40UY00mxEx5vbXSTM/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+'" sasaran ="_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" sasaran ="_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+'" sasaran ="_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://menthorkami.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 ialah jumlah post nan mau tampil didalem widget

2. var showpoststhumbs = sebagai mengatur apakah mau menampilkan thumbnail ataupun tidak, apabila belomingin tampilkan thumbnail, ganti goresan pena "true" jadinya "false"

3. var showcommentslink =  sebagai menampilkan link komentar + Jumlah komentar dari postingan nan tampil.

4. var posts_date =  > sebagai pengaturan mengatakan tanggal posting 

5. var post_summary =  > sebagai pengaturan apakah ingin menampilkan summary ataupun tidak

6. var summary_chars = > mengatur jumlah huruf awal posting nan muncul didalem summary. Bisa dikurangi ataupun ditambah.

7. Intinya "true" berarti perintah tampilkan juga "false" perintah sembunyikan. Paste semua code di bab isian konten.Kemudian klik Simpan.

Oke apabila rampung silahkan di save javascriptnya juga lalu liat hasilnya 

Anda dapat berkreasi sendiri pastinyanya  sebagian widget lainnya Praktis bukan ?? naahh demikianlah tutorial admin wacana bagaimana "Cara membikin widget Recent post keren juga ringan di Blog" sekian juga terima kasih telah berkunjung..