Untuk membuat blog lebih ayu
, cara yang paling baik adalah dengan menambahkan beberapa widget menarik pada sidebar blog. Salah satu widget yang menarik yang sebaiknya menghiasi sidebar blog adalah Recent Comments With Avatar.
Tentang Recent Comments with Avatar
Recent comments adalah widget yang akan menampilkan beberapa komentar terakhir di blog. Adapun jumlah komentar yang ditampilkan bisa diatur sesuai keinginan. Dengan adanya Avataratau foto profil komentator di dekat tulisan komentar, membuat Recent Comments with Avatarini lebih menarik di bandingkan Recent Commnets biasa yang tidak menampilkan avatar profil komentator.
Sebelum membuat Recent Comments with Avatar ini, sebaiknya anda lihat dulu live demonya di bawah ini agar tidak terkesan membeli kucing dalam karung
.jpg){kind=small}
Apabila Live demo bermasalah, anda bisa melihat screenshot gambarnya berikut ini :
 |
| Gambar 1 : Recent Comments With Avatar |
Anda tertarik untuk memasang dan menambahkan widget Komentar Terakhir yang ada foto profil komentatornya di blog anda ? Simak tutorialnya berikut ini :
Recent Comments Avatar Profile
Menambahkan widget Komentar Terakhir dengan avatar profil ini sangat mudah. Tidak diperlukan mengedit kode HTML template dan hanya 1 kali Copy Paste kode. Anda cukup melakukan beberapa hal berikut ini :
- Add Gadget / Widget baru
- Pilih widget HTML Java Script
- Masukkan kode Recent Comments Avatar Profil
- Simpan
- Selesai...
Berikut kode Recent Comment with Avatar :
<div style="overflow:auto;width:auto;height:250px;border:1px solid #ccc; padding:10px; margin:0 auto;background:#fff;">
<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 = 100,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 200,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>
<div style="font-size:10px; padding:3px;margin-bottom:5px;float:right"><a
href="http://www.bloggerbugis.com/2012/05/recent-comment-komentar-avatar.html" target="_blank"> Get This Widget</a></div>
</div>
<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 = 100,
showAvatar = true,
avatarSize = 30,
roundAvatar = true,
characters = 200,
defaultAvatar = "",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://sites.google.com/site/bloggerbugis/js/Recent_Comments_New_Bloggerbugis.js"></script>
<script type="text/javascript" src="http://www.bloggerbugis.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=100"></script>
<div style="font-size:10px; padding:3px;margin-bottom:5px;float:right"><a
href="http://www.bloggerbugis.com/2012/05/recent-comment-komentar-avatar.html" target="_blank"> Get This Widget</a></div>
</div>
Jika anda belum tahu cara menambahkan widget baru ke dalam blog, klik "Cara Menambahkan Widget".
Kode untuk membuat Recent Comments With Avatar di atas masih bisa di edit. Silahkan edit kode yang berwarna MERAH agar tampilannya sesuai dengan yang anda inginkan.
- 250px adalah tinggi kotak Recent Comments. Ganti 250 dengan angka yang lebih jika anda ingin membuat kotak yang lebih tinggi atau sebaliknaya asala jangan menghilangkan kode px
- fff adalah kode untuk background kotak. fff adalah kode warna putih. Apabila ingin mengganti background kotak Recent Comments dengan warna lain, ganti fff dengan kode warna yang anda inginkan. Untuk melihat kode warna, klik "Tools untuk melihat kode warna".
- 100 adalah jumlah komentar yang akan di tampilkan di dalam kotak Recent Komentar. Ganti100 dengan angka yang lebih besar atau lebih kecil sesuai keinginan anda.
- true yang pertama adalah kode untuk menampilan Gambar Avatar profile. Jika ingin menghilangkan Foto Profil / Avatar, ganti true dengan false
- 30 adalah ukuran / besar foto profil. Sama seperti sebelumnya, ganti 30 dengan angka yang anda inginkan
- true yang kedua adalah kode untuk membuat foto profil komentator berbentuk bundar. Ganti true dengan false jika anda ingi membuat avatar profil berbentuk kotak
- 200 adalah jumlah karakter / huruf komentar yang akan di tampilkan. Silahkan ganti angkanya sesuai dengan yang anda inginkan.
- Ini adalah bagian yang paling penting. Ganti http://www.bloggerbugis.com dengan URL / alamat blog anda agar widget Recent Comments yang ada di blog anda tidak menanmpikan komentar yang ada di blog saya
Semoga tutorial "Cara membuat Recent Comments With Avatar" ini bermanfaat.
Happy blogging.....
Sumber : http://www.bloggerbugis.com
No comments:
Post a Comment