Widget Kotak komentar (Recent Comment) Terbaru menakjubkan ini telah di tambahkan Efek Hover dan Gambar Avatar yang berbentuk Lingkaran atau bulat di sebelah kirinya. Anda juga akan melihat Blok nama dari para Komentator. Semoga saja Widget Kotak Komentar Terbaru ini akan membantu anda untuk menampilkan Kotak Komentar Terbaru Anda dengan rasa yang berbeda.
Anda dapat menambahkan Widget ini pada background Hitam Dan Putih. Tapi anda harus ingat satu hal, bahwa jika anda membuat kotak komentar ini pada sidebar atau fotter, harus 320 px Widthnya. Jika tidak, maka tidak akan cocok dengan gadget. View Demonya bisa anda lihat pada Gambar diatas (Nabil02 Original Image).
- Masuk ke Akun (login di blogger) anda kemudian pilih --> Jika sudah klik Drop Down Menu.
- Kemudian Pilih --> Tata Letak --> Tambah Gadget --> HTML/Javascript.
3. Copy Kode di bawah ini dan Pastekan Tepat Didalamnya.
<style>
ul.bloggerspiceRC{list-style:none;margin-top: 10px;;padding:0}
.bloggerspiceRC li {
background: none repeat scroll 0 0 transparent !important;
clear: both;
display: block;
list-style: none outside none;
margin: 0 !important;
overflow: hidden;
padding: 0 0 4px !important;
position: relative;
}
.bloggerspiceRC li a {
background: none repeat scroll 0 0 #E60066;
color: #FFFFFF;
float: left;
font: 12px Arial;
margin-top: 10px;
padding: 25px 10px 5px;
width: 200px;
}
.bloggerspiceRC li a:hover{background:#A10048}
.bloggerspiceRC li .avatarImage {
float: left;
margin: 0 0 0 5px;
overflow: hidden;
position: relative;
}
.avatarRound {
background: none repeat scroll 0 0 white;
border: 1px solid #CC0099;
border-radius: 49px;
height: 50px;width: 50px;}
.bloggerspiceRC li img{padding:0;position:relative;overflow:hidden;display:block}
.bloggerspiceRC li span {
background: none repeat scroll 0 0 #47006B;
color: #FEFEFE;
display: inherit;
float: left;
font: 12px Trebuchet MS;
padding: 5px;
position: absolute;
left: 55px;
top: 5px;
}
.bloggerspiceRC span{display:none}
/*Widget kotak komentar terbaru menakjubkan by www.jalu-pangna.blogspot.com*/
</style>
<div class='widget-content'>
<script type='text/javascript'>//<![CDATA[
function bloggerspiceRC(e){var t;t='<ul class="bloggerspiceRC">';for(var n=0;n<numComments;n++){var r,i,s,o;if(n==e.feed.entry.length)break;t+="<li>";var u=e.feed.entry[n];for(var a=0;a<u.link.length;a++){if(u.link[a].rel=="alternate"){r=u.link[a].href}}for(var f=0;f<u.author.length;f++){i=u.author[f].name.$t;s=u.author[f].gd$image.src}if(s.indexOf("/s1600/")!=-1){s=s.replace("/s1600/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s220/")!=-1){s=s.replace("/s220/","/s"+avatarSize+"-c/")}else if(s.indexOf("/s512-c/")!=-1&&s.indexOf("http:")!=0){s="http:"+s.replace("/s512-c/","/s"+avatarSize+"-c/")}else if(s.indexOf("blogblog.com/img/b16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhXKUhQMAumhAktasVzMa40KWpAHnoO-qYvPk44QkHWjPP7AsS4SJA_NR2EnS0oEcHohExpH89VVxa3rl5OV85gHgE-ew5-DkiiQhosLPmqL-0RWVLUo1jf-HrNWRm9HBaa50B9LKCgQEk/s320/BS+blogger+logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgt-Ag5sffkvB_o2_tB3bH2lNUQL12QzqfkgFfVCUaMKeBaTUQrTeT8NHafNTFeWuuvds1LIxBT_wnbpR41yM17wqb1akIqa_9sFMelhyIW_zYYRYPeeItYdWh7bLlSLMMpi4t4rrElVD8/s320/BS+openid+logo.png"}else if(s.indexOf("blogblog.com/img/blank.gif")!=-1){if(defaultAvatar.indexOf("gravatar.com")!=-1){s=defaultAvatar+"&s="+avatarSize}else{s=defaultAvatar}}else{s=s}if(showAvatar==true){if(roundAvatar==true){o="avatarRound"}else{o=""}t+='<div class="avatarImage '+o+'"><img class="'+o+'" src="'+s+'" alt="'+i+'" width="'+avatarSize+'" height="'+avatarSize+'"/></div>'}t+="<span>"+i+"</span>";var l=u.content.$t;var c=l.replace(/(<([^>]+)>)/ig,"");if(c!=""&&c.length>characters){c=c.substring(0,characters);c+="…"}else{c=c}t+='<a href="'+r+'">'+c+"</a>";t+="</li>"}t+="";document.write(t)}var numComments=numComments||8,avatarSize=avatarSize||34,characters=characters||26,defaultAvatar=defaultAvatar||"https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSAD-AMlyt_Z2CK_6dMADdJdB3cOKHHIJ3k9VH_2HOSg58yaSae6ZTbjQtOvbp73KcI6KTXxVpkqvbode_0_kjHgYjWB5VBLq_u1f0qR_1nk_li7EDGJ8qxqajFJvX1BSw-r5iPmgxutE/s320/BS+avatar.png",showAvatar="undefined"===typeof showAvatar?!0:showAvatar,roundAvatar="undefined"===typeof roundAvatar?!0:roundAvatar,hideCredits="undefined"===typeof hideCredits?!1:roundAvatar
//]]></script>
<script type="text/javascript" src="http://nabil02.blogspot.com/feeds/comments/default?alt=json&callback=bloggerspiceRC&max-results=5"></script>
</div>
INGAT !!
- Ganti nabil02.blogspot.com dengan Url atau Alamat Blog anda sendiri.
- angka 5 digit untuk menampilkan berapa banyak Komentar yang akan ditampilkan.
- height: 50px;width: 50px; Kode ini untuk menampilkan ukuran Tinggi dan ukuran Lebar Gambar.
- Dan untuk yang lainnya, anda bisa mengkreasinya sendiri.
Selamat Mencoba! Semoga Berhasill !!!!
Judul : Widget Recent Koment Terbaru Dengan Memiliki Efek Hover
Deskripsi : W idget Kotak komentar (Recent Comment) Terbaru menakjubkan ini telah di tambahkan Efek Hover dan Gambar Avatar yang berbentuk Lingkara...
