Cara membuat widget recent comments keren valid HTML5

     Widget recent comments yaitu widget yang menampilkan komentar terbaru pada blog.
fungsinya antara lain sebagai mengetahui komentar komentar terbaru di blogger kita semua , selain itu widget ini juga dilengkapi dengan clickable area sehingga nama saja tidak cukup untuk di click namun nama komentator, komentar, avatar dll bisa di klik juga.

baca juga : Cara Mudah Membuat Postingan dengan komentar terbanyak

Ini juga bisa menjadi alternatif bagi Anda yang ingin cek komentar tanpa harus masuk ke akun blogger Anda. widget yang sangat bermanfaat bagi blog kita , karena widget ini bisa memudahkan kita untuk melihat komentar-komentar terbaru dari para visitor blog yang baru memberikan komentarnya di blog kita. Banyak blogger yang memasang widget ini.

Bila anda tertarik dengan Widget Recent Comment Valid HTML5 ini anda bisa menerapkannya berikut ini:

Cara membuat widget recent comments keren valid HTML5

Untuk tutorialnya,silahkan sobat ikuti langkah-langkah dibawah ini:
1. Pastikan anda sudah login di blogger.com
2. Klik Design  ─► Page elements  ─► Add Gadget
3. Pilih HTML/JavaScript
4. Copy kode dibawah ini pastekan ke notepad terlebih dahulu. rubah kode sesuai dengan keterangan dibawah.
    Setelah itu copypaste kode yang telah sobat rubah dan pastekan kedalam konten HTML/JavaScript.

<style type="text/css" scoped>
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{backgroud:#eee;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid #aaa;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;background:#aaa;color:#fff}
.kangismet_recent a {text-decoration:none;}
.avatarImage{padding:3px;background:#fefefe;-webkit-box-shadow:0 1px 1px #ccc;-moz-box-shadow:0 1px 1px #ccc;box-shadow:0 1px 1px
#ccc;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.avatarRound{-webkit-border-radius:100px;-moz-border-radius:100px;border-radius:100px;width:35px;height:35px}
.kangismet_recent li span{margin-top:4px;color: #222;display: block;font-size: 12px;line-height: 1.4;}
</style>
<script type="text/javascript">
//<![CDATA[
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 35,
 roundAvatar = true,
 characters  = 40,
 defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
 hideCredits = true;
 maxfeeds=50,
 adminBlog='TW';
//]]>
</script>
<script type="text/javascript" src="https://kang-is.googlecode.com/svn/trunk/javascript/recentcomments2.js"></script>
<script type="text/javascript" src="/feeds/comments/default?alt=json&amp;callback=kangismet_recent&amp;&amp;max-results=50">
</script>

Note :
- Warna Merah ( Red ) Sobat ganti dengan Nama Author atau Nama G+ anda.
- Pada numComments = 5
adalah jumlah tampilan komentar, sobat bisa mengganti untuk mengurangi atau menambahkan jumlah komentar yang ingin di tampilkan.
- Pada showAvatar = true
adalah kode untuk menampilkan gambar profil komentator, jika sobat ingin menghilangkan ganti text "true" menjadi "false".
- Pada avatarSize = 35
adalah untuk mengatur ukuran photo profil komentator, sobat bisa menganti dengan ukuran yang sobat inginkan.
- Pada roundAvatar = true
adalah kode untuk menampilkan photo profil komentar berbentuk bundar,jika sobat ingin menampilkan dalam bentuk kotak silahkan ganti "true" menjadi "false".
- Pada characters = 40
adalah jumlah untuk karakter huruf komentar yang akan ditampilkan, silahkan ganti sesuai keinginan sobat.
- Pada maxfeeds=50
adalah jumlah maximum untuk komentar yang diload oleh script json.
jumlah maxfeeds harus lebih besar dibandingkan numComments, maka komentar yang ditampilkan akan disaring tanpa komentar admin.
dan juga harus diperhatikan pastikan maxfeeds nilainya sama dengan max-results pada script json pada kode diatas.
- Pada adminBlog='TW'
Ganti teks TW dengan nama yang anda gunakan sebagai admin dalam blog yang anda kelola.

5. Nah jika sudah klik Simpan
- Dan jika anda ingin recent comment ini lebih valid HTML5 lagi maka kalian hapus kode widget yang seperti ini <b:include name='quickedit'/>  pada bagian template anda.

     Semoga kalian bisa memperagakan cara tersebut dengan mudah. Demikian post tentang Cara membuat widget recent comment di blog semoga bermanfaat.