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
    Membuat Widget Artikel Terbaru Blog
  3. Akan tampil jendela kerja kosong seperti gambar berikut
    Membuat Widget Artikel Terbaru Blog
    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
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

2 Komentar untuk "Membuat Widget Artikel Terbaru Blog Keren"

  1. terima kasih bang, blog saya jadi keren banget nih. hehehe

    BalasHapus
  2. Mantap blog aing jadi lumayan Ajib.. bisa dliat di https://www.seputarpintar.com/

    BalasHapus

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel