Cara Membuat Widget Artikel Terbaru Keren dan Ringan di Blog

AA Sciences, Cara Membuat Widget Artikel Terbaru Keren beserta Nomor dan Ringan di Blog - Membuat widget sudah umum dikalangan kita semua terutama untuk kita kalangan para blogger baik di indonesia maupun luar indonesia.

Tutorial cara membuat artikel terbaru di blog tentu sudah banyak kita temukan baik dari website lainnya atau bahkan yang akan admin share di kali ini.

Hal ini terkait cara membuat artikel terbaru pun banyak ragam versi baik itu dengan gambar ataupun tidak di blogger.

Beragam widget artikel terbaru dengan yang simpel, keren, atau bahkan yang ringan sekalipun, hal itu tentu menjadi titik ukur agar para pengunjung atau kita sebagai user senang melihatnya.

Baca Juga: Cara Membuat Recent Post Valid AMP

Untuk cara membuat widget artikel terbaru dengan versi gambar umumnya sering dicari dan dicoba baik itu work 100% atau bahkan tidak work sama sekali.

Dengan mengetahui cara membuat widget artikel baik itu pilihan atau yang tidak tentu hal tersebut akan mendapat agar kita dapat memasangnya.

Membuat artikel terbaru atau cara membuat widget postingan terbaru banyak dicari oleh khalayak terutama khalayak blogger.

Mengapa? lantaran hal ini agar para pengunjung mengetahui postingan terbaru dari si pemilik tersebut.

Dengan adanya widget blog terbaru ini tentu menjadi keuntungan untuk para user blog agar meningkatkan bounce rate agar visitor blog lebih melonjak tentunya.

Baca Juga: Cara Memasang Lazy Load

Dengan menambahkan widget artikel terbaru tentu banyak hal yang disenangi untuk user dan pengunjung.

Atau dengan menambahkan terkait cara menambahkan gadget artikel terbaru kita tambahkan di laman blog atau website kalian.

Baiklah langsung saja berikut tutorial dari cara membuat widget artikel terbaru beserta nomor, warna nan keren dan ringan di blogger.

Cara Membuat Widget Artikel Terbaru Keren dan Ringan di Blog

• Pastikan kalian sudah login ke akun Blogger kalian
• Masuk ke Tata Letak atau Template atau tempat yang mau kalian tempatkan script artikel terbarunya
• Jika di Tata Letak, maka langsung saja klik Tambahkan Gadget -> HTML/Javascript
• Lalu copy and paste script widget artikel terbaru nya, berikut scriptnya:

Baca Juga: Box Facebook Berjalan Ala Mastamvan

<div style='height:190px;width:auto;overflow:auto;'>

<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 = 10;var posts_date = false;var post_summary = false;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: #43ce8e;margin-top:10px;" href="https://bit.ly/aldiweb" 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: #000;}

.recentpoststyle a:hover {color: #43ce8e;}

.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:#43ce8e; 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: #000;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 #30cc91; 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></div>

• Jika kalian ingin menyesuaikan warna, jarak, ukuran nya itu semau kalian yaa
• Oke jika sudah langsung saja save dan lihat hasilnya ^^

Share this post