Cara Membuat Widget Recent Post Blogger Simple

Widget Recent post adalah widget yang biasanya di muncul pada sidebar blog yang berisi artikel terbaru dari sebuah blog. Widget ini akan menampilkan beberapa artikel terbaru yang baru saja di posting.
Selain untuk menampilan artikel terbaru, widget recent post juga berfungsi untuk menarik pengunjung. juga memudah kan pengunjung untuk mengetahui postingan terbaru sehingga tidak perlu ribet - ribet membuka Home Page blog.
Pada postingan kali ini, saya akan membagikan tutorial/kode untuk Membuat Widget Recent Post Blogger Simple.
Widget ini tergolong ringan, karena tidak terlalu banyak script ataupun gambar yang memberatkan loading blog.
Pada beberapa waktu lalu, saya pernah membagikan tutorial widget recent posts bawaan viomagz bisa sobat cek di Cara Memasang Widget Artikel Terbaru Di Blogger Ringan dan Simpel

Cara Membuat Widget Recent Post Blogger Simple

Saya akan membagikan 2 macam Widget yang juga simple

Widget Recent Post dengan Nomor

1. Buka Dasbor Blogger
2. Masuk ke Tema>Edit HTML
3. Cari kode ini ]]></b:skin>  lalu copas kode di bawah ini, paste tepat di atasnya

/* Recent Posts by masgimenz.com*/
#recent-articles .widget-content, #recent-articles ul{padding:15px 0 10px 0;counter-reset:count;margin:auto;max-width:300px;display:block}#recent-articles a:link{font:500 14px -apple-system, BlinkMacSystemFont, 'Roboto', 'Segoe UI', 'Oxygen-Sans', 'Ubuntu', 'Cantarell', 'Helvetica Neue', sans-serif}, #recent-articles a:visited{font-weight:normal}#recent-articles ul li{background-color:#fff;margin:0 auto;padding:0px 7px 8px 20px;margin-bottom:3px;list-style:none;position:relative;border-bottom:1px dotted #eaeaea}#recent-articles ul li:before{color:#000!important;counter-increment:count;content:counter(count);position:absolute;left:0;top:0;bottom:0;text-align:center;z-index:51;transition:all .4s;width:5px;font-size:120%!important;font-weight:500;text-align:center;padding:0;border-right:1px solid #fff;display:flex;flex-direction:column;height:100%}#recent-articles ul li:last-child{border:none}#recent-articles ul li a{font-weight:400;display:block;color:#222;text-decoration:none;line-height:1.4em}#recent-articles ul li:hover{background-color:#f5f5f5}#recent-articles ul li a:hover #recent-articles ul li:hover a{color:#2b71a2 !important}

4. Kalau sudah, lalu simpan, kemudian masuk ke Tata Letak>Tambahkan Widget>HTML/Javascript, dan copas kode di bawah ini tempelkan disitu.

<!-- Recent Posts by masgimenz.com -->
  <div class="recent-articles" id="recent-articles">
<script>
  function artikelterbaru(e){document.write("<ul>");for(var t=0;t<e.feed.entry.length;t++){for(var r=0;r<e.feed.entry[t].link.length&&"alternate"!=e.feed.entry[t].link[r].rel;r++);var n="
<li><a href="+("'"+e.feed.entry[t].link[r].href+"'")+'">'+e.feed.entry[t].title.$t+"</a> </li>
";document.write(n)}document.write("</ul>
")}
  </script>
  <script src="/feeds/posts/summary/?max-results=6&amp;alt=json-in-script&amp;callback=artikelterbaru"></script>
  </div>

Pada bagian max-results=6 adalah jumlah postingan yang akan di tampikan, sobat bisa ganti angka 6 tersebut sesuka sobat. agar ukuran widget tidak terlalu besar, saran saya maksimal sampai angka 7 saja.

Coba lihat hasilnya 
DEMO

Widget Recent Post dengan Gambar/Thumbnail

1. Caranya masih sama seperti di atas, cari kode ]]></b:skin> lalu copas kode css di bawah ini dan pastekan tepat diatasnya. 

/* Recent Posts by masgimenz.com*/
.artikel-terbaru ul{padding:0;border-radius:2px;border:0;position:relative;overflow:hidden}.artikel-terbaru ul li{box-sizing:border-box;list-style-type:none;background-color:#fff;font-size:14px;font-weight:bold;margin:0;padding:10px 10px 10px 75px !important;height:inherit;border-bottom:1px solid #e0e0e0;position:relative}.artikel-terbaru ul li:hover{background-color:#EEE}.artikel-terbaru ul li a{color:#424242;text-decoration:none}.artikel-terbaru ul li a:hover{color:#212121}.artikel-terbaru ul li img{width:50px;height:50px;position:absolute;padding:inherit;border-radius:50%;overflow:hidden;left:15px;border:0;display:inline-block;vertical-align:middle}

2. Kemudian masuk ke Tata Letak>Tambahkan Widget>HTML/Javascript, dan copas kode di bawah ini tempelkan disitu. 

<!-- Recent Posts by masgimenz.com -->  <div id='artikel-terbaru' class='artikel-terbaru'>
 <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/AVvXsEjJghn9-RjZLmxXL3uDj-cLJjhT5GyACyWlpbK3fgChtXeuL3JhimwingrzK2uqHJ5K7MGd9e2914bZ1mJaV1pvzz3VBavYVVFS2GZMcsTtsQnfK8tYCQ9-3OOW4P8vlygOdxwWXPbZbL1F/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 = false;
var showcommentslink = false;
var posts_date = false;
var post_summary = false;
var summary_chars = 70;
</script>
<script src="/feeds/posts/default?orderby=published&alt=json-in-script&callback=showlatestpostswiththumbs"></script>

3. Kemudian simpan, dan lihat hasilnya.

DEMO

Pada bagian var posts_no = 5 adalah jumlah postingan yang akan di tampikan, sobat bisa ganti angka 5 tersebut sesuka sobat. agar ukuran widget tidak terlalu besar, saran saya maksimal sampai angka 7 saja.

Sekian postingan kali ini tentang Cara membuat Widget Recent Post Blogger Simple, kalau masih terjadi error atau mugkin belum paham, bisa sobat keluhkan/tanyakan di kolom komentar.
Terima kasih.

Bagikan Artikel ini