Minggu, 18 Maret 2012
Membuat Recent Comment Avatar Tanpa Edit HTML
Tutorial ini sebenarnya sudah banyak sekali beredar di internet, tapi karena ada salah satu teman blogger yang menanyakan via email cara membuat komentar terbaru dengan avatar, tidak ada salahnya kalau pada malam hari ini saya akan berbagi satu lagi tutorial blog mengenai cara membuat komentar terbaru dengan avatar. Meletakkan widget recent comment akan sangat berguna jika blog yang anda kelola sudah ramai pengunjung, karena terkadang kita sulit untuk mengetahui komentar-komentar yang baru masuk. Kecuali jika pemberitahuan komentar baru atau recent comments diarahkan pada satu email yang sudah kita setting di bagian "Comment Notification Email". Jika sudah diatur, maka dengan sendirinya anda dapat membaca tiap komentar yang masuk hanya dengan membuka email.
Sebenarnya ada alternatif lain untuk mengetahui komentar baru di blog kita, yaitu dengan cara mengecek satu persatu artikel dan melihat komentar yang masuk. Apakah Anda sanggup dan punya banyak waktu untuk melakukan itu? Nah, cara yang ini tentu saja sangat merepotkan karena harus melihat satu-persatu artikel yang ada komentarnya. Untuk itu agar lebih mudah mengetahui komentar terbaru yang masuk ke blog, anda bisa menambahkan widget "Recent Commets" yang sudah disediakan blogger. Selain widget recent comments yang disediakan blogger, anda juga dapat membuat sendiri widget recent comment ini dengan menambahkan fitur avatar agar lebih memperindah tampilan widget tersebut.
Karena prolognya sudah terlalu panjang, sekarang bagaimana cara membuat widget recent commment avatar tanpa harus Edit HTML? Widget ini nantinya seperti gambar diatas, jika anda ingin melihat demonya disini(klik comment pada tab view)
- Login ke blogger dengan akun Anda.
- Di dashboard masuk ke layout
- Setelah itu anda pilih add gadget >> HTML/Javascript
- Masukkan kode-kode di bawah ini pada kotak HMTL/JavascriptKeterangan :
<style type="text/css">
ul.tb_recent_comments{list-style:none;margin:0;padding:0;}
.tb_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;}
.tb_recent_comments li .avatarImage{padding:3px;float:left;margin:0 6px 0 0;position:relative;overflow:hidden;}
.tb_recent_comments li img{padding:0px;position:relative;overflow:hidden;display:block;}
.tb_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 = 50,
characters = 60,
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="http://johnytemplate.googlecode.com/files/recentcomment.js"></script>
<script type="text/javascript" src="http://freedownloadcopasthemes.blogspot.com/feeds/comments/default?alt=json&callback=tb_recent_comments&max-results=5"></script>
Warna merah (5) : adalah jumlah komentar yang ditampilkan
Warna kuning (50) : ukuran pixel avatar
Warna hijau (60) : Jumlah karakter huruf komentar
Warna biru : ganti dengan URL blog Anda. - Terakhir save, membuat recent comment dengan avatar telah selesai.
Mudah bukan? widget ini terserah mau anda letakkan dimana saja di homepage blog. Misalnya di bagian sidebar atau footer, asalkan bisa dengan mudah dilihat oleh pengunjung blog. Widget recent comments sebenarnya adalah widget yang tidak wajib untuk sebuah blog, tapi daripada Anda kesulitan dalam mencari komentar baru yang masuk? Segitu dulu tutorial kali ini, selamat mencoba dan semoga bermanfaat.
Sebagai referensi tambahan untuk sahabat blogger semua dalam kegiatan ngeblog bisa dibaca pada dua artikel di bawah ini :
Label:
tutorial blog