Cara Membuat Widget Recent Post New (Artikel Terbaru) Pada Sidebar Blogger

Bagaimana cara membuat widget recent post new atau daftar artikel terbaru pada sidebar blogger agar terlihat rapih, keren, serta menarik pengunjung menurut versi larantuka gypsum.

Widget daftar artikel terbaru atau biasa di kenal dengan istilah recent post new yang akan dengan segera kita infokan, dan ini di dapat dari mbah google, karena kita bukanlah seorang ahli desain template.

Jadi setelah klik sana klik sini, kunjung sana kunjung sini, kadang berkunjung di blog yang tak jelas. Namun pada akhirnya dapat menemukan juga widget artikel terbaru yang di rasa cocok buat kita rekomendasikan.

Barangkali bro sis mau coba pasang di blognya, silahkan saja.

Kenapa di sebut keren dan menarik ? karena memang tampilannya terlihat lumayan rapih menurut kita, terutama pada jenis font, border bawah, lalu ada tanggal post, ada juga comment, dan read more.

Jika anda membaca di blog ini melalui desktop atau laptop, maka tampilan daftar artikel terbaru bisa di lihat pada bagian sidebar blog sebelah kanan.

Namun jika anda membaca artikel ini melalui hp maka bisa di scrool terus ke bawah, nanti akan terlihat tampilannya dengan judul widget "artikel terbaru".

Penasaran ingin mencoba widget daftar artikel terbaru di blog ? silahkan di ikuti langkah - langkah di bawah ini.

Cara Pasang Widget Artikel Terbaru

Ikuti langkah - langkah bagaimana cara pasang daftar artikel terbaru di sidebar blogger berikut ini :

1. Langkah Pertama

Persiapkan dulu kode widgetnya di bawah ini dengan cara di copy lalu pastekan di notepad ++ di laptop anda.

Keterangan kode :

var posts_no = 15; var showpoststhumbs = false; var readmorelink = true; var showcommentslink = true; var posts_date = true;

var post_no : jumlah artikel yang ingin di tampilkan
var showpoststhumbs : tampilkan gambar post ganti true
var readmorelink : ingin di hilangkan "read more" ganti true menjadi false
var showcommentslink : jika ingin di hilangkan tulisan "comment" ganti true menjadi false
var post_date : jika ingin di hilangkan tanggal, bulan, post terbit ganti true menjadi false

2. Langkah Ke dua :

Masuk di Dashboard blogger
Klik Menu, "Tata Letak".
Lalu Klik, "Tambahkan Gadget" pada widget / sidebar.
Pilih, "Html / Javascript".
Lalu masukan kode di atas.
Terakhir klik, "Simpan".

Maka tampilannya akan terlihat seperti pada gambar di bawah ini :

Yang paling kita sukai pada widget daftar artikel terbaru di atas adalah pada tampilan handphone atau mobile nya sungguh terlihat minimalis, rapih, dan enak di bacanya. Entah kalo menurut anda ?

5 Style Widget Artikel Terbaru Lainnya

Jika widget artikel terbaru di atas kurang di sukai atau tidak cocok, maka bisa anda coba atau style widget lainnya agar bisa di terapkan pada sidebar blog anda.

Adapun bagaimana langkah - langkah cara memasang atau membuatnya sama seperti yang sudah di jelaskan di atas yaitu :

Masuk di dashboard blogger
Klik menu tata letak,
Klik tambahkan gadget pada sidebar,
klik Html / Javascript
lalu masukan style widgetnya
Terakhir klik simpan.

Dan berikut di bawah ini 5 Style Widget Artikel Terbaru yang mang kita pilihkan untuk anda :

#Style Widget Artikel Terbaru Pertama

Tampilan widget artikel terbarunya akan terlihat seperti gambar di bawah ini :

#Style Widget Artikel Terbaru Ke dua

Style 2, tampilannya widgetnya akan terlihat seperti berikut ini :

#Style Widget Artikel Terbaru Ke Tiga

Style 3, tampilan widget artikel terbarunya terlihat seperti berikut ini :

#Style Widget Artikel Terbaru Ke Empat

Style 4, tampilan widget artikel terbarunya terlihat seperti berikut ini :

#Style Widget Artikel Terbaru Ke 5

<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&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href="https://mangwendy.blogspot.com/2020/07/membuat-widget-artikel-terbaru.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:#B45357;
margin:13px 5px 0px 0px;
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>

Style 5, tampilan widget artikel terbarunya terlihat seperti berikut ini :

Itulah Style atau cara buat widget Artikel Tebaru Yang Menarik, Keren, dan Rapih, untuk di pasang di sidebar blogger.

Apakah ini bisa membantu ? Sekian dan terima kasih atas kunjungannya, semoga dapat berguna.

Larantuka Gypsum

Cara Membuat Widget Recent Post New (Artikel Terbaru) Pada Sidebar Blogger

Menu Halaman Statis