Cara membuat widget recent comments valid HTML5

Cara membuat widget recent comments valid HTML5

Widget recent comments adalah widget yang menampilkan komentar terbaru pada blog.
Untuk Demonya,sobat bisa melihat pada sidebar blog ini dengan judul widgetnya "NEW COMMENT".

Banyak blogger yang memasang widget ini,tetapi sayangnya kode widget tersebut belum valid HTML5.
Kode widget recent comments ini sendiri saya dapat dari blog Sakahyang Dot Com,
yaitu blognya Kang Asep.

Dan untuk membuat widget recent comments tersebut menjadi valid HTML5,
saya  haya merubah sedikit kodenya.

Cara membuat widget recent comments valid HTML5
Untuk tutorialnya,silahkan sobat ikuti langkah-langkah dibawah ini:

1. Klik Design  ─► Page elements  ─► Add Gadget
2. Pilih HTML/JavaScript
3. Copy kode dibawah ini pastekan ke notepad terlebih dahulu.
rubah kode sesuai dengan keterangan dibawah.
setelah itu copy kode yang telah sobat rubah dan pastekan kedalam konten HTML/JavaScript.

<div style="overflow:auto;width:auto;height:350px;padding:5px; margin:0 auto;background:#FFFFFF;">
<style type="text/css" scoped>
   ul.sakahayang_recent_comments{list-style:none;margin:0;padding:0;}
   .sakahayang_recent_comments li{background:none !important;margin:0 0 6px !important;padding:0 0 6px 0 !important;display:block;clear:both;overflow:hidden;list-style:none;}
  .sakahayang_recent_comments li  .avatarImage{padding:2px;background:#B1B1B1;-webkit-box-shadow:0 1px 1px #000000;-moz-box-shadow:0 1px 1px #000000;box-shadow:0 1px 1px #000000;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
  .avatarRound{border-radius: 5px;
border-right: 5px;
border-left: 5px;}
  .sakahayang_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
  .sakahayang_recent_comments li span{margin-top:4px;display: block;font-style: italic;line-height: 1.4;}
</style>
<script type="text/javascript">
    //<![CDATA[
        // Recent Comments Settings
        var
     numComments  = 20,
     showAvatar  = true,
     avatarSize  = 20,
     roundAvatar = true,
     characters  = 100,
     defaultAvatar  = "http://www.gravatar.com/avatar/?d=mm",
     hideCredits = true;
     maxfeeds=50,
     adminBlog='ADMINAH';
    //]]>
</script>
<script type="text/javascript" src="http://googledrive.com/host/0B68pyZLfRQeCMHFSU1JNM05oa0E"></script>
<script type="text/javascript" src="http://tekhnik-blog.blogspot.com/feeds/comments/default?alt=json&amp;callback=sakahayang_recent_comments&amp;max-results=50"></script>
</div>

Keterangan :

● pada height:350px
adalah tinggi kotak komentar terbaru, silahkan ganti sesuai keinginan sobat.

● pada background:#FFFFFF
adalah warna background silahkan ganti jika menginginkan warna yang lain.
untuk mencari kode warna sobat bisa klik disini.

● pada numComments = 20
adalah jumlah komentar yang akan di tampilkan,sobat bisa mengganti untuk mengurangi atau menambahkan jumlah komentar yang ingin di tampilkan.

● pada showAvatar = true
adalah kode untuk menampilkan gambar profil,jika sobat ingin menghilangkan gantu text "true" menjadi "false".

● pada avatarSize = 20
adalah ukuran photo profil komentator,sobat bisa menganti dengan ukuran yang sobat inginkan.

● pada roundAvatar = true
adalah kode untuk photo profil komentar berbentuk bundar,jika sobat ingin menampilkan dalam bentuk kotak silahkan ganti "true" menjadi "false".

● pada characters = 100
adalah jumlah karakter huruf komentar yang akan ditampilkan,silahkan ganti sesuai keinginan sobat.

● pada maxfeeds=50
adalah jumlah maximum komentar yang diload oleh script json.
jumlah maxfeeds harus lebih besar dari numComments,maka komentar yang ditampilkan akan disaring tanpa komentar admin.
dan sobat juga harus pastikan maxfeeds nilainya sama dengan max-results pada script json pada kode diatas.

● pada adminBlog='ADMINAH'
Ganti teks ADMINAH dengan nama yang anda gunakan sebagai admin dalam blog yang anda kelola.

● pada http://tekhnik-blog.blogspot.com ganti dengan URL blog anda.

4. Klik Save dan lihat hasilnya.

Itulah tadi tutorial Cara membuat widget recent comments valid HTML5
Semoga bermanfaat bagi yang sedang mencarinya.