• Translate

6/08/2015

Cara Membuat Widget Recent Posts Ringan dan Elegan di Blog

Tutorial Blogspot |

Advertisement

Cara Membuat Widget Recent Posts Ringan dan Elegan di Blog | Recent Posts atau ada yang menyebutnya juga Latest Posts atau Posts Terbaru yang sering kita lihat pada blog-blog yang kita kunjungi. Saya beri penjelasan sedikit mengenai fungsi dari Recent Posts ini di blog sobat.

Fungsi dari Recent Posts ini adalah untuk menampilkan artikel terbaru pada blog kita. nah, letak fungsinya dimana? begini ceritanya, saat seseorang searching di blog mencari artikel tertentu dan ternyata yang dicari itu mengarah ke link artikel yang ada diblog kita, nah otomatis seseorang tersebut tidak mengetahui kalau ada update artikel di blog kita karena tidak adanya Recent Posts di blog kita, mereka hanya membaca apa yang mereka cari dari search engine. disinilah fungsinya Recent Posts untuk menampilkan artikel terbaru di sidebar.

Biasanya kebanyakan blog hanya menampilkan menu Popular Posts di sidebar blog mereka, sekarang sudah saat nya kita menampilkan Recent Posts di sidebar blog, dengan bantuan menu Recent Posts ini akan membantu meningkatkan pageviews dan menurunkan bounce rate, pasti ada dong reader yang akan mencari tahu informasi terbaru dari blog kita dan pasti mereka akan melihat ternyata blog tersebut selalu up to date, sehingga bisa menjadi referensi mereka nantinya.

ini saya berikan Ilustrasi tentang Fungsi Recent Posts ini.


Cara Membuat Widget Recent Posts Ringan dan Elegan di Blog
nah, sekarang saatnya sobat copy-pastekan script Recent Posts ini di blog sobat, ikuti langkah-langkahnya sebagai berikut :
  • Login Blogger.
  • Buka opsi Tata Letak (Layout) → Add Gadget → HTML/Javascript
  • Copas Script Recent Posts dibawah ini :
<div class="recentpoststyle">
<script src="http://helplogger.googlecode.com/svn/trunk/helplogger/recentposts.js"></script>
<script>
var posts_no = 3;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>
</script><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://alltutorials.info" 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: #2c90c6;}
.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>

  • Save dan refresh blog sobat, hasilnya bisa sobat lihat di sidebar blog saya.
NB :
var posts_no = 3; // ganti jumlah Recent Posts sesuai dengan keinginan sobat
var posts_date = true; // untuk menampilkan tanggal, ganti "false" untuk menampilkan tanggal
var post_summary = true; // menampilkan isi content, ganti "false" untuk menampilkan judul saja
var summary_chars = 80; // jumlah huruf yang akan ditampilkan dalam content

Selesai juga sobat kita membahas mengenai Cara Membuat Widget Recent Posts Ringan dan Elegan di Blog, semoga bermamfaat.

Disclaimer: Images, Content of articles or videos that exist on the web sometimes come from various sources of other media. Copyright is fully owned by the source. If there is a problem with this matter, you can contact us here.
Disqus
Blogger
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>, and please parse the code in the parser box below.
Show Parser Box

2 comments Add Comment

Thanks gan tutorialnya udh aku terapkan diblog saya, mantabs

Reply

Terimakasih gan sudah berkunjung dan menggunakan widgetnya..

Reply

Comments not appropriate topic will sign SPAM.