Membuat Widget Artikel Terbaru Blog Keren

Membuat widget artikel terbaru Blog keren, widget dapat dipasang pada bagian sidebar kanan atau kiri, dan pada bagian footer, namun untuk widget blog keren dengan style tampilan nomor melayang di sebelah kiri ini hanya cocok dipasang pada bagian sidebar blog. Widget artikel terbaru akan menampilkan judul posting, ulasan dengan batasan karakter, read more, dan tanggal date posting, secara urut dari atas widget ini akan menampilkan artikel terbaru kemudian artikel lama dibagian bawahnya.Tujuan dari widget artikel terbaru ini adalah membuat pengunjung mengetahui artikel-artikel terbaru yang kita posting. kemudian bagaimana cara membuat widget artikel terbaru blog yang keren?

Oke…, langsung saja kita ke tutorial cara membuat widget artikel terbaru Blog keren dengan style tampilan nomor melayang di sebelah kiri

1. Masuk ke akun blogger Anda
2. Klik Tata Letak --> Tambahkan Gadget --> Pilih HTML/JavaScript

   

   Membuat Widget Artikel Terbaru Blog

3. Akan tampil jendela kerja kosong seperti gambar berikut

   

   Membuat Widget Artikel Terbaru Blog

4. Pada jendela kerja kosong diatas, tulis Judul “Artikel Terbaru”, kemudian di bagian konten, copy paste kode berikut:
   

   <div class="recentpoststyle">
   <script type="text/javascript">
   function showlatestposts(e){for(var t=0;t<posts_no;t++){var r,s=e.feed.entry[t],n=s.title.$t;if(t==e.feed.entry.length)break;for(var a=0;a<s.link.length;a++)if("alternate"==s.link[a].rel){r=s.link[a].href;break}n=n.link(r);var i="... read more";i=i.link(r);var l=s.published.$t,o=l.substring(0,4),u=l.substring(5,7),c=l.substring(8,10),m=new Array;if(m[1]="Jan",m[2]="Feb",m[3]="Mar",m[4]="Apr",m[5]="May",m[6]="Jun",m[7]="Jul",m[8]="Aug",m[9]="Sep",m[10]="Oct",m[11]="Nov",m[12]="Dec","content"in s)var d=s.content.$t;else if("summary"in s)var d=s.summary.$t;else var d="";var v=/<\S[^>]*>/g;if(d=d.replace(v,""),document.write('<li class="recent-post-title">'),document.write(n),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(d.length<summary_chars)document.write(d);else{d=d.substring(0,summary_chars);var f=d.lastIndexOf(" ");d=d.substring(0,f),document.write(d+" "+i)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+m[parseInt(u,10)]+" "+c+" "+o+"</div>")}}
   </script>
   <script type="text/javascript">
   var posts_no = 5;var posts_date = true;var post_summary = true;var summary_chars = 80;</script>
   <script src="/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showlatestposts">
   </script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="http://blog.rajaputramedia.com/2016/07/membuat-widget-artikel-terbaru-blog.html" rel="nofollow">Recent Posts Widget</a>
   <noscript>Your browser does not support JavaScript!</noscript>
   <style type="text/css">
   .recentpoststyle {counter-reset: countposts;list-style-type: none;}
   .recentpoststyle a {text-decoration: none;color: #49A8D1;}
   .recentpoststyle a:hover {color: #000;}
   .recentpoststyle li:before {content: counter(countposts,decimal);counter-increment: countposts;float: left;z-index: 1;position:relative;font-size: 15px;font-weight: bold;color:#fff;background:#69B7E2; margin:13px 5px 0px -6px;line-height:30px;width:30px;height:30px;text-align:center;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;}li.recent-post-title{margin-bottom: 5px;padding: 0;}
   .recent-post-title a {color: #444;text-decoration: none;font: bold 13px "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;}
   .post-date {font-size: 11px;color: #999;margin:5px 0px 15px 32px;}
   .recent-post-summ {border-left:1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 10px; font: 15px Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif;}
   </style></div>

5. Klik Simpan, selesai

Membuat Widget Artikel Terbaru Blog

Demikian tutorial bagaimana cara membuat widget artikel terbaru Blog keren dengan style tampilan nomor melayang di sebelah kiri. Jika masih kurang memahami tutorial ini, Anda dapat mengajukan pertanyaan melalui form komentar. Semoga bermanfaat

Bagikan Artikel ini