Cara Buat Widget Recent Post dan Komentar Terbaru

Di Blogger / Blogspot tidak ada widget yang khusus dibuat untuk menampilkan artikel terkini atau Recent Post dan Komentar Terbaru atau Latest Comment seperti di Wordpress. Yang ada hanya widget arsip yang tampilannya kurang bagus. Namun, kita bisa membuatnya sendiri karena main-main dengan javascript dan html dibolehkan di Blogger.com. Dan itulah kelebihan platform blog yang satu ini.

CARA MEMBUAT WIDGET RECENT POST

WIDGET RECENT POST SEDERHANA (TANPA SNIPPET)

1. Masuk Blogger.com
2. Tata letak / Layout
3. Klik Add Gadget -> pilih Javascript / HTML
4. Masukkan kode berikut:

<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://www.alkhoirot.org/feeds/posts/default?orderby=published&alt=json-in-script&callback=showrecentposts"></script></div>
<style type=text/css>
#hlrpsb a {color: #0B3861; font-size: 13px;} #rpdr {background: url( http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/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. Ganti alamat url http://www.alkhoirot.org dengan alamat blog anda. Alamat yang setelah itu yakni [feeds/posts/default] jangan dibuang.
5. Klik Simpan. Selesai.

CATATAN:

- Pada kode [var numposts = 10] adalah jumlah tulisan terkini yang akan tampil. Ganti dengan angka yang lain sesuai keinginan.
- Pada kode [showpostdate = false] ganti kata 'false' menjadi 'true' kalau ingin menampilkan tanggal penerbitan posting/entri.
- Pada kode [var numchars = 100] adalah jumlah maksimal karakter judul yang akan ditampilkan. Rubah nomor kalau ingin lebih atau kurang dari itu.

WIDGET RECENT POST DENGAN SNIPPET (RINGKASAN)

1. Masuk Blogger.com
2. Tata letak / Layout
3. Klik Add Gadget -> pilih Javascript / HTML
4. Masukkan kode berikut:

<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://www.alkhoirot.net/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://fatih-syuhud.blogspot.com/2014/01/cara-buat-widget-recent-post-dan.html" target="_blank" title="Grab this Recent Posts Widget">Recent Posts Widget</a> by <a href="http://fatih-syuhud.blogspot.com" title="Recent Posts Widget">BloggerTips</a></div>
<noscript>Your browser does not support JavaScript!</noscript>
<style type="text/css">
#hlrpsa a {color: #0B3861; font-size: 13px;} #rpdr {background: url(http://3.bp.blogspot.com/-WM-QlPmHc6Y/T5wJV58qj9I/AAAAAAAACAk/1kULxdNyEyg/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>

4. Ganti alamat url http://www.alkhoirot.net dengan alamat blog anda. Alamat yang setelah itu yakni [feeds/posts/default] jangan dibuang.
5. Klik Simpan. Selesai.

CATATAN:

- Pada kode [var numposts = 5] adalah jumlah tulisan terkini yang akan tampil. Ganti dengan angka yang lain sesuai keinginan.
- Pada kode [showpostdate = false] ganti kata 'false' menjadi 'true' kalau ingin menampilkan tanggal penerbitan posting/entri.

CARA BUAT WIDGET KOMENTAR TERBARU

1. Masuk Blogger.com
2. Tata letak / Layout
3. Klik Add Gadget -> pilih Javascript / HTML
4. Masukkan kode berikut:

<script style=text/javascript src="http://helplogger.googlecode.com/svn/trunk/recent comments widget.js"></script><script style=text/javascript >var a_rc=5;var m_rc=false;var n_rc=true;var o_rc=100;</script><script src=http://your-blog-name.blogspot.com/feeds/comments/default?alt=json-in-script&callback=showrecentcomments ></script><span id=rcw-cr><a href=http://fatih-syuhud.blogspot.com/2014/01/cara-buat-widget-recent-post-dan.html>Recent Comments Widget</a></span><style type=text/css> .rcw-comments a {text-transform: capitalize;} .rcw-comments {border-bottom: 1px dotted; padding-top: 7px!important; padding-bottom: 7px!important;} #rcw-cr {font-family: Arial,Tahoma;font-size:9px;padding-top:7px;display:block;} </style>

4. Ganti alamat url http://www.alkhoirot.net dengan alamat blog anda. Alamat yang setelah itu yakni [feeds/comments/default] jangan dibuang.
5. Klik Simpan. Selesai.

CATATAN:

- Untuk merubah jumlah komentar yang ditampilkan, ganti angka '5' pada [a_rc=5] menjadi nomor yang sesuai.
- Untuk menampilkan tanggal ditulisnya komentar, ganti kata 'false' menjadi 'true' pada kode [m_rc=false]
- Kalau ingin menyembunyikan judul artikel yang dikomentari, ganti kata 'true' menjadi 'false' pada kode [n_rc=true]
- Untuk menampilkan jumlah karakter komentar yang lebih banyak atau lebih sedikit, ganti angka '100' menjadi angka yang sesuai pada kode [o_rc=100]