Recent Posts Widget untuk Blogger / Blogspot

Keuntungan utama dari widget Recent Posts ini adalah tidak hanya dapat menampilkan judul, tetapi juga memasukkan kutipan atau potongan, dan sangat mudah untuk menyesuaikan atau menerapkan gaya yang berbeda di atasnya. CSS dapat dimodifikasi sesuai dengan selera anda sendiri dan dapat mengubah link atau latar belakang warna, ukuran dan warna teks / link.

Apa yang dapat Anda lakukan dengan widget ini:

Menampilkan Judul Posting
Mengubah jumlah posting
Mengubah jumlah karakter dari pos potongan / cuplikan
Menunjukkan tanggal posting

Lihat gambar di bawah:

Bagaimana menambahkan Recent Posts Widget untuk Blogger

Langkah 1. Log in ke Blogger Dashboard > "Layout" dan klik "Add a Gadget"

Langkah 2. Dari jendela pop-up, gulir ke bawah dan pilih HTML/JavaScript

Langkah 3. Pilih & Salin kode dari salah satu pilihan di bawah ini dan paste ke dalam baru HTML/JavaScript:

Opsi 1: Recent Posts Widget dengan Cuplikan

<div id="hlrpsa">
<script src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-snippets.js">
</script>
<script>
var numposts = 5;var showpostdate = false;var showpostsummary = true;var numchars = 100;var standardstyling = true;
</script>
<script src="http://blog-address.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script>
</div>
 
<a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Recent Posts Widget</a>
<noscript>Your browser does not support JavaScript!</noscript> 
 
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} 
#rpdr, #rpdr a {color:#808080;}
#hlrpsa { color: #999999; font-size: 11px; border-bottom:1px #cccccc dotted; margin-top:-10px; padding-bottom:10px;}
.hlrps a {font-weight:bold; }
.hlrpssumm {}
</style>

Opsi 2: Recent Posts Widget Hanya Menampilkan Posting Judul

<div id="hlrpsb">
<script style="text/javascript" src="http://helplogger.googlecode.com/svn/trunk/recent-posts-with-titles-only.js"></script>
<script style="text/javascript">var numposts = 10;var showpostdate = false;var showpostsummary = false;var numchars = 100;var standardstyling = true;</script>
<script src="http://blog-address.com/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div><a style="font-size: 9px; color: #CECECE; float: right; margin: 5px;" href="http://helplogger.blogspot.com/2012/04/simple-related-posts-widget-for-blogger.html" rel="nofollow" >Recent Posts Widget</a> 
<noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
 
<style type=text/css> 
#hlrpsb a {color: #0B3861; font-size: 13px;} 
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Langkah 4. Sesuaikan:

Ubah 5 (opsi 1) dan10 (opsi 2) dengan jumlah posts yang ingin ditampilkan.
Ubah false ke true jika ingin menampilkan tanggal posts.
Ubah 100 (opsi 1) jika ingin menampilkan jumlah karakter yang lain.
Untuk mengubah warna dan ukuran huruf dari links, modifikasi warna biru (links) and violet (ukuran huruf)
Untuk mengubah style dari cuplikan posts, modifikasi warna hijau (color) and orange (ukuran huruf)
Ganti http://blog-address.com dengan URL blog anda.