Cara Membuat Widget Recent Comments Valid HTML5

Membuat Widget Recent Comments Valid HTML5
Widget recent comments adalah widget yang menampilkan komentar terbaru pada blog.
Banyak blogger yang memasang widget ini,tetapi sayangnya kode widget tersebut belum valid HTML5. Dan untuk membuat widget recent comments tersebut menjadi valid HTML5, hanya merubah sedikit kodenya.

Cara Membuat Widget Recent Comments Valid HTML5
Untuk tutorialnya,silahkan sobat ikuti langkah-langkah dibawah ini:

Klik Design >> Page elements  >> Add Gadget
Pilih HTML/JavaScript
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:250px;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  = 10,

     showAvatar  = true,

     avatarSize  = 20,

     roundAvatar = true,

     characters  = 100,

     defaultAvatar  = "https://iklandiary.blogspot.com?d=mm",

     hideCredits = true;

     maxfeeds=50,

     adminBlog='Top Diary';

    //]]>

</script>

<script type="text/javascript" src="http://googledrive.com/host/0B68pyZLfRQeCMHFSU1JNM05oa0E"></script>

<script type="text/javascript" src="https://iklandiary.blogspot.com/feeds/comments/default?alt=json&amp;callback=sakahayang_recent_comments&amp;max-results=50"></script>

</div>

Keterangan :

Untuk height:250px 
adalah tinggi kotak komentar terbaru, silahkan ganti sesuai keinginan sobat.

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

Untuk numComments = 10
adalah jumlah komentar yang akan di tampilkan,sobat bisa mengganti untuk mengurangi atau menambahkan jumlah komentar yang ingin di tampilkan.

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

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

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

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

Untuk 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.

Untuk adminBlog='Top Diary'
Ganti teks Top Diary dengan nama yang anda gunakan sebagai admin dalam blog yang anda kelola.

Untuk https://iklandiary.blogspot.com ganti dengan URL blog anda.

 Klik Save dan lihat hasilnya.

Selamat Mencoba Semoga Berhasil.