Cara Membuat Widget Recent Post Sederhana

Keuntungan utama pada widget ini Recent Posts bahwa hal itu akan menunjukkan tidak hanya judul posting saja tetapi juga memposting kutipan atau potongan dan mudah untuk menyesuaikan / menerapkan gaya yang berbeda di atasnya. Untuk gaya itu ke dalam desain Anda sendiri, Anda hanya perlu memodifikasi gaya CSS - Anda dapat mengubah link atau warna latar belakang, ukuran dan warna teks / link. 

Apa yang dapat Anda lakukan dengan widget ini: 

• menampilkan judul posting saja 
• mengubah jumlah posting 
• mengubah jumlah karakter posting potongan / kutipan 
• menunjukkan tanggal posting 

Lihat gambar di bawah: 

Bagaimana menambahkan Widget Recent Post ke Blogger 

Langkah 1. Login ke Dashboard Blogger Anda, kemudian pergi ke Layout dan klik pada link 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 tempel ke HTML baru / JavaScript: 

Opsi 1: Widget Recent Posts dengan Snippets 

<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://nawawipost.blogspot.com/feeds/posts/default?orderby=published&amp;alt=json-in-script&amp;callback=showrecentposts">
</script></div>
<div id="rpdr" style="font-family: arial, sans-serif; font-size: 9px;">
<a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRiC08FRHTXAnsl_wNPAxY1WxAkzBx0IKx2Hyo0TDxovkU4RUIj9N_MZMdtn5Rtg1lmU_MFhmyefuNk2UQVH8YNKy9uSw6YRJLrsvTLeakAWo7rPvf6sqpnpoV3MSp1QjTlw9TgJCPslJj/s1600/blogger.png) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#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: Widget Recent Posts Hanya Menampilkan Judul Posting

<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://nawawipost.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="rpdr"><a href="http://helplogger.blogspot.com/2012/04/recent-posts-widget-for-bloggerblogspot.html" title="Grab this Recent Posts Widget" target="_blank">Recent Posts Widget</a> by <a href="http://helplogger.blogspot.com" title="Recent Posts Widget">Helplogger</a></div><noscript>Oops! Make sure JavaScript is enabled in your browser.</noscript>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRiC08FRHTXAnsl_wNPAxY1WxAkzBx0IKx2Hyo0TDxovkU4RUIj9N_MZMdtn5Rtg1lmU_MFhmyefuNk2UQVH8YNKy9uSw6YRJLrsvTLeakAWo7rPvf6sqpnpoV3MSp1QjTlw9TgJCPslJj/s1600/blogger.png ) 0px 0px no-repeat; padding: 1px 0px 0px 19px; height:14px; margin: 5px 0px 0px 0px;line-height:14px;}
#rpdr, #rpdr a {color:#808080;}
.bbrecpost2 {
padding-top:6px;
padding-bottom:6px;
border-bottom: 1px #cccccc dotted; }
</style>

Langkah 4. 

• Ubah 5 (opsi 1) dan 10 (opsi 2) dengan jumlah posting yang ingin ditampilkan. 
• Mengubah false ke true jika Anda ingin tanggal posting muncul 
• Mengubah 100 (opsi 1) jika Anda ingin memperbanyak karakter yang akan ditampilkan. 
• Untuk mengubah warna dan ukuran font dari link, mengubah nilai dengan warna biru (link) dan ungu (font-size) 
• Untuk mengubah gaya tulisan ringkasan, mengubah nilai-nilai hijau (warna) dan orange (ukuran font) 
• Ganti nawawipost dengan nama blog Anda atau jika Anda memiliki perubahan custom domain semua garis tebal dengan alamat Anda seperti dalam contoh ini:

 http://www.nawawipost.com/feeds/posts/default....

Langkah 5. Simpan widget Anda. Dan itu saja! mudah bukan :D

KLIK DISINI UNTUK DOWNLOAD