Dalam membuat widget Recent Comment ini tidaklah terlalu sulit , kita hanya tinggal pakai widget dari para mastah yang sudah membuat dan membagikanya , jadi anda tidak usah memikirkan koding css dan javascript yang bikin kepala pusing tujuh keliling , kecuali jika anda sudah terbiasa , maka tidak sulit bagi anda untuk meodifikasi widget recent Comment ini atau bahkan menciptakan widget yang jauh lebih keren lagi.
credit image : blog.kangismet.net |
Tutorial / Cara Membuat Widget Recent Comment Keren di Blogger
Kelebihan widget recent komen ini adalah sudah valid html5 , jadi bagi anda pecinta validator , tidak usah susah - susah untuk mengeditnya lagi , selain itu widget recent comment ini juga di lengkapi dengan wajah avatar orang yang berkomentar sehingga kita dapat mudah siapa saja yang berkomentar , oke langsung saja ke tiknya :
1. Pastikan sobat sudah masuk terlebih dahulu ke dasbhor blog sobat
2. Lihat menu pada bagian samping kiri , pilih menu Tata Letak => Tambah Gadget => Html/Javascript
3. Lalu salin kode dibawah ini dan tempelkan di dalam kolom html/javascript tadi :
<style type="text/css" scoped>4. Terkahir Klik Simpan
ul.kangismet_recent{list-style:none;margin:0;padding:0;}
.kangismet_recent li{background:none !important;margin:0 0 6px !important;padding:3px
!important;display:block;clear:both;overflow:hidden;list-style:none; border: 1px solid transparent;
border-radius:9px; max-height: 100px;}
.kangismet_recent li:hover{border: 1px solid #ddd;}
.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='Mas Yadi';
//]]>
</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>
Namun sebelum menyimpanya sobat harus perhatikan dulu , kode - kode diatas , yaitu dengan menyesuaikan kode diatas dengan blog sobat , seperti menentukan jumlah komentar yang ingin di tampilkan dan lain sebagainya , untuk jelasnya silahkan perhatikan kostumisasinya.
Kostumisasi Widget Recent Comment With Avatar
Untuk membuat tampilan berbeda, silahkan edit CSS diatas. Penjelasan script yang bisa dikostumisasi :
numComments = 5 (jumlah komentar yang ditampilkan)
showAvatar = true (false, apabila ingin menyembunyikan avatar)
avatarSize = 35 (ukuran avatar dalam pixel)
roundAvatar = true (avatar bulat)
characters = 40 (jumlah karakter isi komentar)
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm" (avatar default)
adminBlog='Kang Ismet' (nama admin blog, wajib diganti)
Nah gimana bro cara membuat recent comment sendiri di blog ? begitu gampang sekali bukan ? saya yakin jika anda membaca dan mengikuti tutorial diatas insya Allah bisa , bahkan newbie sekalipun yang baru saja mengenal blog kemaren sore , bisa mempraktekan hal semacam ini.