Cara Membuat Recent Post Di Blogspot Mudah Dan Keren

hallo sahabat mamang setia , kali ini saya akan sedikit membagikan Cara Membuat Recent Post Di Blogspot Mudah Dan Keren . Menyusun Sebuah navigasi blog yang bagus akan membantu mandapatkan traffic yang banyak ke blog kamu, Begitupun Kamu harus menambahkan widget pendukung, selain untuk memperindah blog, beberapa widget tertentu yang wajib kamu pasang untuk pengunjung supaya betah berlama-lama di blog kamu . 

Dengan kata lain dengan memasang widget ini kamu bisa mengurang bounce rate blog kamu secara signifikan. Khusus untuk blogspot widget recent post tidak tersedia di widget default, kamu perlu sedikit usaha untuk mendapatkannya. Simak bagaimana Cara Membuat Recent Post Di Blogspot Mudah Dan Keren agar pengunjung tidak buru-buru pergi dari blog kamu.

Tampilan recent post yang ada di tutorial kali ini kurang lebih seperti gambar yang mamang beri tanda merah seperti diatas. Widget ini akan memberikan nomor urut otomatis, tergantung jumlah artikel yang ingin kamu tampilkan di widget recent post ini.

Langsung simak aja yu mang ke tutorialnya :)

Cara Membuat Recent Post Di Blogspot Mudah Dan Keren

Login ke akun blog kamu dan masuk ke tab layout, kemudian pada kolom sebelah kanan silahkan klik Add a Gadget, tcari gadget dengan nama HTML/JavaScript kemudain klik. Selanjutya masukkan kode dibawah ini ke dalam kolom kedua gadget tersebut.

<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://www.bangpahmi.com/2017/05/cara-membuat-recent-post-di-blogspot.html" rel="dofollow">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>

Yang perlu kamu perhatikan dari kode diaatas hanya tentang jumlah postingan yang ingin kamu tampilkan. Untuk mengubah jumlah postingan yang kamu tampilan silah kan cari kode var posts_no = 5. Selanjutnya ganti angka 5 dengan jumlah postingan yang kamu inginkan.

Nah , itulah Cara Membuat Recent Post Di Blogspot Mudah Dan Keren . silahkan kombinasikan dengan blog , kamu selamat mencoba dan semoga berhasil. Dan kalau kamu menemukan kesulitan untuk mengimplementasikannya di blog kamu, jangan sungkan-sungkan untuk berdiskusi dengan mamang yaa .

Share this post

ROBY NASURO GUNAWAN

-English My name is roby nasuro gunawan, I come from a small town, I am not notable in the real world but I am famous in cyberspace:) -INDONESIAN Nama saya roby nasuro gunawan , saya berasal dari kota kecil , saya tidak terkenal di dunia nyata tetapi saya terkenal di dunia maya :)

Berlangganan update artikel terbaru via email: