Trick n Tips Blogger | Widget Blogger | Template Blogger

Cara Membuat Widget Recent Comments Dengan Avatar

by Irsyad Aslam , at 3/15/2013 , has 9 komentar
Widget Recent Comments Adalah Widget yang dipergunakan untuk menampilkan Komentar yang telah diterbitkan untuk bisa dilihat oleh pengunjung. Widget Adalah Widget yang wajib dipasang oleh si pemilik blog. Memang di pilihan pada tata letak untuk menambahkan widget ini belum dipasang. tetapi Widget ini bisa dipasang dengan menambahkan widget HTML. Widget ini Dibuat oleh Way2Blogging. Kelebihan dari widget ini adalah Widget Yang Stylish dari pada versi sebelumnya, Memiliki Avatar yang dibingkai bulat dibandingkan dengan versi sebelumnya yang tidak memiliki avatar, Widget ini juga bisa diatur dengan anda seberapa anda ingin menampilkan Komentar, Anda juga bisa mengatur avatar, Dan Widget ini juga mudah dipasang. Untuk Itu saya akan menjelaskan kepada anda cara untuk membuatnya. Untuk itu berikut cara untuk membuatnya:

  • Silahkan Login Ke Blogger Anda.
  • Setelah itu, Klik Menu Tata Letak, --> Klik Tombol Add Gadget, Lalu Tambahkan Gadget HTML.
  • Masukan kode berikut 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 = 60,
roundAvatar = true,
characters = 40,
showMorelink = false,
moreLinktext = "More »",
defaultAvatar = "http://www.gravatar.com/avatar/?d=mm",
hideCredits = true;
//]]>
</script>
<script type="text/javascript" src="https://daftar-javascript-kami.googlecode.com/files/Recent%20Comments.js"></script>
<script type="text/javascript" src="http://your-belajarblog.blogspot.com/feeds/comments/default?alt=json&callback=w2b_recent_comments&max-results=5"></script>
<div style="text-align:center">
<span style="float:left;font:italic 10px Arial, Sans-Serif; color:#3D3D3D;"><a target="_blank" href="http://your-belajarblog.blogspot.com/2013/03/cara-membuat-widget-recent-comments.html">.:Get Widget:.</a></span>
</div>

Keterangan:
Ganti Tulisan yang berwarna Kuning dengan jumlah komentar yang ingin anda terbitkan.
Ganti Tulisan yang berwarna Hijau dengan url Gambar avatar anda (80x80 pixel).
Ganti Tulisan yang berwarna Merah dengan url blog anda.

  • Lalu, Klik Tombol Simpan.

Selamat Mencoba,
Salam Sukses,



Your-BelajarBLOG
Irsyad Aslam
About
Cara Membuat Widget Recent Comments Dengan Avatar - written by Irsyad Aslam , published at 3/15/2013, categorized as Widget . And has 9 komentar
9 komentar Add a comment
template nya sama dengan blog ane.... salam blogger gan...
Oiah Sama,

Salam Blogger n Sukses,
Your-BelajarBLOG
Delete
bagus gan tutorialnya sangat membantu,....
http://informasibloger.blogspot.com
Delete
Reply Delete
siip gan,
makasih atas infonya :)
Ok,
Iyah..,


Salam Sukses,
Your-BelajarBLOG
Delete
Reply Delete
kunjungin balik gan http://developer-game-pc.blogspot.com
Reply Delete
It is a good blog and nice to know about this blog and thanks for sharing here with us.

parking management system
Reply Delete
hanya kata MANTAP ..!!!!!
ane bisa ucapkan untuk akang.

thank u fulllll habiss daah..!

Reply Delete

Catatan:

• Dilarang Menaruh Link Aktif
• Dilarang Nyepan/Promosi Di Komentar
• Dilarang Berkata Tidak Sopan
• Untuk Menyisipkan Kode, Gunakan Tag <i rel="code">... KODE ...</i>
• Untuk Menyisipkan Kode Panjang, Gunakan Tag <i rel="pre">... KODE ...</i>
• Untuk Menyisipkan Catatan, Gunakan [catatan].. TEKS ...[/catatan]
• Untuk Menyisipkan Gambar, Gunakan [img]URL GAMBAR[/img]

Sebelum Menyisipkan Kode Harap Konversi Kode Sebelum Menuliskan Di Komentar

Bck
Cancel Reply

Followers

Komentar Terbaru

Copyright ©2013 Your-BelajarBLOG by
Theme designed by Damzaky - Published by Proyek-Template
Powered by Blogger