Cara Menciptakan Widget Recent Post Responsive Di Blog

Cara Membuat, Memasang, Menampilkan Widget Recent Post Responsive di Blogger - Recent Post dalam arti Postingan Terbaru ini sangat diharapkan bagi para blogger atau website untuk mempermudahkan pengunjung melihat artikel yang gres saja terbit di blog atau web tersebut. Sehingga artikel yang gres terbit tersebut gampang untuk dibaca oleh pengunjung blog atau website.

Recent Post ialah salah satu widget yang sering dipasang dalam suatu blog atau website selain Populer Post dan Random Post

Baca Juga: Cara Memasang, Membuat, Menampilkan Random Post Responsive di Blog.

Cara Membuat Recent Post di Blog - Dalam fitur Blogger belum ada fitur untuk Membuat Recent Post, jadi anda harus berusaha sedikit untuk mencari cara menciptakan recent post di blogger. Ini beliau Cara Membuat Recent Post Responsive Fast Loading di Blogger. 

Sebelum memasang widget recent post, anda dapat melihat demonya diatas postingan ini. Jika anda tertarik pribadi saja coba :)

Cara Membuat, Memasang, Menampilkan Recent Post Responsive di Blog:

1. Pergi ke "Tata Letak" > "Add Widget atau Tambahkan Widget" > Pilih "HTML/Javascript"

2. Copy dan Paste Script Recent Post dibawah ini ke Widget yang sudah ditambahkan tadi.

<div class="recentpoststyle"> <!--<script src="https://cdn.rawgit.com/Brando07/share/newbe/recent-post-seocips-1.js"></script>--> <script type='text/javascript'> function showlatestposts(a){for(var b=0;b<posts_no;b++){var e,c=a.feed.entry[b],d=c.title.$t;if(b==a.feed.entry.length)break;for(var f=0;f<c.link.length;f++)if("alternate"==c.link[f].rel){e=c.link[f].href;break}d=d.link(e);var g="... read more";g=g.link(e);var h=c.published.$t,i=h.substring(0,4),j=h.substring(5,7),k=h.substring(8,10),l=new Array;if(l[1]="Jan",l[2]="Feb",l[3]="Mar",l[4]="Apr",l[5]="May",l[6]="Jun",l[7]="Jul",l[8]="Aug",l[9]="Sep",l[10]="Oct",l[11]="Nov",l[12]="Dec","content"in c)var m=c.content.$t;else if("summary"in c)var m=c.summary.$t;else var m="";var n=/<\S[^>]*>/g;if(m=m.replace(n,""),document.write('<li class="recent-post-title">'),document.write(d),document.write('</li><div class="recent-post-summ">'),1==post_summary)if(m.length<summary_chars)document.write(m);else{m=m.substring(0,summary_chars);var o=m.lastIndexOf(" ");m=m.substring(0,o),document.write(m+" "+g)}document.write("</div>"),1==posts_date&&document.write('<div class="post-date">'+l[parseInt(j,10)]+" "+k+" "+i+"</div>")}} </script> <script> 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> <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: 2;position:relative;font-size: 20px;font-weight: bold;color: #fff;background: #69B7E2; margin: 15px 5px 0px -6px; padding: 0px 10px; border-radius: 100%;} li.recent-post-title { padding: 5px 0px;} .recent-post-title { font-family: "Avant Garde",Avantgarde,"Century Gothic",CenturyGothic,AppleGothic,sans-serif;} .recent-post-title a {color: #444;font-size: 13px; text-decoration: none; padding: 2px; font-weight: bold;} .post-date {padding: 5px 2px 5px 30px; font-size: 11px; color: #999; margin-bottom: 5px;} .recent-post-summ { border-left: 1px solid #69B7E2; color: #777; padding: 0px 5px 0px 20px; margin-left: 11px; font-family: Garamond,Baskerville,"Baskerville Old Face","Hoefler Text","Times New Roman",serif; font-size: 15px;} </style></div>

3. Ganti Warna Merah dengan Nama blog anda dan berapa postingan yang ingin anda tampilkan di Recent Post tersebut.

Terima kasih sudah berkunjung ke artikel Cara Membuat Recent Post Responsive di Blog. Jangan lupa untuk berlangganan dengan kami dan jangan lupa untuk di share keteman-teman anda yang belum tau soal Recent Posts.

Bagikan Artikel ini