Dengan kata lain dengan memasang widget ini kau mampu mengurang bounce rate blog kau secara signifikan. Khusus untuk blogspot widget recent post tidak tersedia di widget default, kau perlu sedikit usaha untuk mendapatkannya. Simak bagaimana cara membuat recent post di blogspot supaya pengunjung tidak buru-buru pergi dari blog kamu.
 |
| Sumber Gambar : Dokumen Pribadi |
Tampilan recent post yang ada di tutorial kali ini kurang lebih menyerupai gambar yang mimin beri tanda merah menyerupai diatas. Widget ini akan menawarkan nomor urut otomatis, tergantung jumlah artikel yang ingin kau tampilkan di widget recent post ini.
Cara Membuat Recent Post di Blogspot
Login ke akun blog kau 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 arahan 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&alt=json-in-script&callback=showlatestposts">
</script><a style="font-size: 9px; color: #CECECE;margin-top:10px;" href=" " 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 kau perhatikan dari arahan diaatas hanya perihal jumlah postingan yang ingin kau tampilkan. Untuk mengubah jumlah postingan yang kau tampilan silah kan cari arahan var posts_no = 5. Selanjutnya ganti angka 5 dengan jumlah postingan yang kau inginkan.
Nah sekarang kau sudah tau kan cara membuat recent post di blogspot. Silahkan aplikasikan di blog kau yah, selamat mencoba dan semoga berhasil. Dan jika kau menemukan kesulitan untuk mengimplementasikannya di blog kamu, jangan sungkan-sungkan untuk berdiskusi dengan mimin ya. Tinggalkan saja pertanyaan kau di kolom komentar, dengan senang hati mimin akan coba menjawab untuk membantu permasalahn kau seceptnya.