Abdul Muhajir
All

Cara Membuat Recent Comment Valid HTML 5

By

Cara Membuat Recent Comment Valid HTML5 – Halo Indonesian Blogger, Belakangan ini semakin banyak saya temukan blog yang menggunakan widget Recent Comment/ Komentar terbaru pada blog atau websitenya.

Cara Membuat Recent Comment

Dan tanpa diduga sahabat blogger saya ada yang bertanya tentang Cara Membuat Widget ini . jadi pada artikel kali ini saya akan share sedikit untuk membuat widget ini. Caranya sangat mudah sekali anda hanya perlu copy dan paste script dibawah ini.

Dengan Recent Comment ini memudahkan kamu untuk melihat komentar komentar baru yang masuk di blog kamu, Untuk memasang widget di blog ini silahkan ikuti langkah dibawah ini;

Cara Membuat Recent Comment Valid HTML5

  1. Login pada akun blogger Anda
  2. Masuk pada menu tata letak
  3. Pilih tambah gadget dan pilih HTML/Javascript
  4. Pastekan script dibawah ini kedalam kotak 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=’Abdul Muhajir‘;
//]]>
</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&callback=kangismet_recent&&max-results=50″>
</script>

Jika sudah silahkan kamu ganti adminBlog=’Abdul Muhajir‘ menjadi nama kamu sendiri. Setelah itu jangan lupa untuk disimpan. Dan agar template kamu tetap Valid HTML5, Silahkan cari kode berikut dan silahkan dihapus.

Jika script diatas tidak berfungsi pada template kamu, coba gunakan script dibawah ini;

<style type=”text/css”>
    ul.w2b_recent_comments{list-style:none;margin:0;padding:0;}
    .w2b_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;}
    .w2b_recent_comments li .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;}
    .w2b_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
    .w2b_recent_comments li span{margin-top:4px;color: #666;display: block;font-size: 12px;font-style: italic;line-height: 1.4;}
</style>
<script type=”text/javascript”>
//<![CDATA[
    // Recent Comments Settings
    var
 numComments  = 5,
 showAvatar  = true,
 avatarSize  = 30,
 roundAvatar = true,
 characters  = 30,
 defaultAvatar  = “http://www.gravatar.com/avatar/?d=mm”,
 hideCredits = true;
//]]>
</script>
<script type=”text/javascript” src=”http://btreaders.googlecode.com/files/rcwa.js”></script>
<script type=”text/javascript” src=”http://www.idblog.net/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5″></script>

Ganti juga jumlah komentar dan nama source nya ke blog kamu. Sesuiakan selera saja.

Begitulah Cara Membuat Widget Recent Comment Valid HTML 5 mudah bukan, Silahkan terapkan pada blog kamu dan semoga berfungsi sebagaimana mestinya. Jika ada kritik dan saran silahkan berkomentar dengan baik pada kolom yang telah disediakan, Terima Kasih.

Related Posts

Write A Comment