Membuat Simple Recent Posts Widget untuk Blogger/Blogspot

Nah sesuai postingan saya sebelumnya yang berjudul "Baru", maka ini artikel kedua yang saya posting demi cita-cita mulia saya,haha..langsung ya :)

Tentu sebagian dari kita menginginkan posting terbaru muncul di layout sebuah web/blog. Biasanya, itu terdapat pada widget. Karena tidak di develope atau gimana, default widget blogger ini tidak menyediakannya. Nah untuk itu kita harus membuatnya sendiri dengan cara menambahkan custom html seperti berikut ini:

1. Log in ke Blogger Dashboard, kemudian pilih Layout dan pilih link Add a Gadget

 2. Dari pop-up window, scroll down dan pilih HTML/JavaScript

3. Copy code dari salah satu pilihan dibawah dan  paste ke new HTML/JavaScript:
Pilihan 1: Recent posts widget 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://your-blog.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/AVvXsEiWC59tx9qL-9-pWoJretjwoxxD1LZa6gMI6d1yg910Ypm-0lzKagp2K18CSbJ2MT6yflIIsGQsK_weuRfdTTV_WzOs12r2ZJw_h4biLmvOKdB9P_DHXgF8CB7IXssg69rIHAuv-2Z5Twc3/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>

Pilihan 2: Recent Posts Widget hanya menampilkan Post Titles

<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://your-blog.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/AVvXsEiWC59tx9qL-9-pWoJretjwoxxD1LZa6gMI6d1yg910Ypm-0lzKagp2K18CSbJ2MT6yflIIsGQsK_weuRfdTTV_WzOs12r2ZJw_h4biLmvOKdB9P_DHXgF8CB7IXssg69rIHAuv-2Z5Twc3/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>

4. Tambahan

• Ubah 5 (pilihan 1) and 10 (pilihan 2) dengan jumlah post yang ingin ditampilkan
• Ubah false ke true jika ingin menampilkan tanggal posting
• Ubah 100 (pilihan 1) jika ingin menambah kata yang ditampilkan
• Untuk mengubah warna dan ukuran huruf tautan, rubah value yang berwarna biru (links) dan  ungu (font-size)
• Untuk mengubah style post summary, rubah value yang berwarna hijau (color) dan orange (font size)
• Replace your-blog text dengan nama blog. Jika memmakai custom domain, rubah semua yang bergaris tebal dengan alamat web seperti contoh:

http://www.your-site.com/feeds/posts/default....

5. Save widget. dan that's it! Selesai!



sumber

silahkan bertanya jika masih memiliki kesulitan dengan meninggalkan komen dibawah

semoga bermanfaat,

salam