Saturday, May 20, 2017

Cara Membuat Recent Post di Blogspot

Menyusun navigasi blog yang bagus akan membantu mandapatkan traffic yang banyak ke blog kamu, Begitupun dengan menambahkan beberapa widget pendukung, selain untuk memperindah blog, beberapa widget tertentu wajib kamu pasang agar pengunjung 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 agar pengunjung tidak buru-buru pergi dari blog kamu.

Cara Membuat Recent Post di Blogspot
Sumber Gambar : Dokumen Pribadi
Tampilan recent post yang ada di tutorial kali ini kurang lebih seperti gambar yang mimin beri tanda merah seperti diatas. Widget ini akan memberikan nomor urut otomatis, tergantung jumlah artikel yang ingin kamu tampilkan di widget recent post ini.

Cara Membuat Recent Post di Blogspot


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 klikSelanjutya 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="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:#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 sekarang kamu sudah tau kan cara membuat recent post di blogspot. Silahkan aplikasikan di blog kamu yah, selamat mencoba dan semoga berhasil. Dan kalau kamu menemukan kesulitan untuk mengimplementasikannya di blog kamu, jangan sungkan-sungkan untuk berdiskusi dengan mimin ya. Tinggalkan saja pertanyaan kamu di kolom komentar, dengan senang hati mimin akan coba menjawab untuk membantu permasalahn kamu seceptnya.
Previous Post
Next Post

Web Developer | Digital Marketing | Founder Eternysoft [Different Kind Of Digital Media Agency]

Contact me for some awesome project -> www.eternysoft.com

Related Posts

0 comments: