Memasang Widget Recent Post Sederhana di Blog

Berbicara tentang widget recent post, anda tentunya sudah sangat familiar tentang widget yang satu ini. Yap, saat anda blog walking bila anda memperhatikan dengan seksama, anda tentunya sering menemukan widget ini terpampang di sidebar halaman blog. Widget recent post ini biasanya menampilkan cuplikan judul-judul postingan terbaru di blog. Tentu saja, ini akan sangat membantu mempromosikan artikel-artikel anda yang masih "fresh", sehingga akan membuat pengunjung selalu bisa mengetahui artikel-artikel terbaru di blog anda. Apakah anda tertarik untuk memasang widget recent post sederhana di blog anda? Berikut ini adalah cara memasang widget recent post sederhana di blog dengan snippet dan tanpa snippet. Nah, bagi anda yang tidak terlalu menyukai hal yang ribet, maka cara berikut ini mungkin akan cocok bagi anda.

Memasang Widget Recent Post di Blog

• Widget Recent Post dengan Snippet

Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript

<div id="recentsnip">
<script src="http://the-kampoeng-blogger.googlecode.com/files/recent%20post%20dengan%20snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="recsn" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://thekampoengblogger.blogspot.com/2013/03/Memasang-Widget-Recent-Post-Sederhana-di-Blog.html" target="_blank" title="Grab this Widget">Widget Recent Posts</a> by <a href="http://thekampoengblogger.blogspot.com" title="Widget Recent Posts">The Kampoeng Blogger</a></div>
<noscript>Browser anda tidak support JavaScript!</noscript>
<style type="text/css">
#recentsnip a {color: #666666; font-size: 14px;font-weight:bold;} #recsn {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhJaY1o6P8blKny-XXQcWwBKSlmBh0MFqz05xbZ2TN0sDjGfcS6oWH-LnDEj37-5d_HIPbJUfgjnS2r9YlUdSeQIVixjO0S_Qi3GhDhtqDITUEXj0ZrKz-o61sY6f9UZCpB_-oux4l8s/s15/calendars.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#recsn, #recsn a {color:#808080;}
#recentsnip { color: #666666; font-size: 12px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.recentsnip a {font-weight:bold; }
.recentsnipsumm {}
</style>

Step 3

Save

• Widget Recent Post Tanpa Snippet (Hanya Judul)

 Step 1

Masuk ke halaman dashboard > Layout > Add gadget > HTML/JavaScript

Step 2

Letakkan kode berikut ke dalam halaman HTML/JavaScript 

<div id="titleonly">
<script style="text/javascript" src="http://the-kampoeng-blogger.googlecode.com/files/recent-post-judul-saja.js"></script>
<script style="text/javascript">var numposts = 5;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://bloganda.blogspot.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<div style="font-family: arial, sans-serif; font-size: 9px;" id="rectitle"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Widget" target="_blank">Recent Posts Widget</a> by <a href="http://thekampoengblogger.blogspot.com/" title="Widget Recent Posts">The Kampoeng Blogger</a></div><noscript>Maaf! Pastikan bahwa JavaScript terpasang di browser anda.</noscript>
<style type=text/css>
#titleonly a {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKIKNfe_Ys1Gw-FiGBDkjgNCp7Lj2POV-efu0nphIKNK-NSOS5ARkpEa78SWP4BmLtZ1KaX2BzLY_oM5o9YUNr0E3j5rWuRDbcODEV-awjM8viGObW9Fhy9_LzCzUA3nZPGkBn015fbwE/s16/1362763742_arrow_right.gif) 0px 0px no-repeat; color: #666666; font-size: 13px; padding: 1px 0px 0px 19px; margin: 5px 0px 0px 0px;line-height:25px;} #rectitle {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjzhJaY1o6P8blKny-XXQcWwBKSlmBh0MFqz05xbZ2TN0sDjGfcS6oWH-LnDEj37-5d_HIPbJUfgjnS2r9YlUdSeQIVixjO0S_Qi3GhDhtqDITUEXj0ZrKz-o61sY6f9UZCpB_-oux4l8s/s15/calendars.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rectitle, #rectitle a {color:#808080;}
.titlepost {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Step 3

Save

Catatan!

1. Untuk mengubah banyaknya post/artikel yang tampil pada recent post, ganti angka 5 sesuai dengan jumlah post/artikel yang ingin anda tampilkan
2. Untuk menampilkan tanggal post/artikel, ganti false dengan kata true
3. Ganti angka 100 dengan jumlah karakter yang anda ingin tampilkan
4. Untuk mengubah warna huruf judul post/artikel ganti kode warna yang diberi warna biru, dan bila anda ingin mengubah ukuran hurufnya cukup mengubah ukuran yang diberi warna oranye
5. Ganti http://bloganda.blogspot.com dengan alamat blog anda

Selesai! Anda dapat melihat hasilnya di bawah ini.

Recent post tanpa snippet

Recent post dengan snippet

Semoga bermanfaat.
Wassalam.

Written by: Rysmah Zainal Arifin

The Kampoeng Blogger, Updated at: 9:08 PM

Posted in: Recent Post , Sidebar , Widget