Widget kotak komentar terbaru menakjubkan ini telah ditambahkan efek hover dan gambar avatar yang bulat disebelah kirinya. Anda juga akan melihat blok nama dari para komentator. Semoga saja widget kotak komentar terbaru ini akan membantu untuk menampilkan komentar terbaru Anda dengan rasa yang berbeda.
Anda dapat menambahkan widget komentar terbaru ini pada background warna hitam atau putih. Tapi satu hal yang Anda harus ingat bahwa jika Anda ingin membuat komentar ini pada sidebar blog atau footer harus 320px lebarnya (width) jika tidak maka tidak akan cocok dengan gadget. View demonya bisa anda lihat pada gambar diatas.
- Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
- Kemudian pilih->Tata letak->Tambahkan gadget-> HTML/Javascript
- Kemudian kopi dan pastekan kode berikut 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/AVvXsEj0Pl4ZHgWAtNyWNyQVPsKJzYgT_2AM1eYo3NtgjpQAWom37kwjGyX5QRRGhyphenhyphenquQBqKYF1qNXlsgrZVXtRCGk_d0TYnDlxqDK-p6IYf_dli1yo5ViC7FFSsQ-qgJyCW_SfRxzstfDmpY8a8/s320/BS+blogger+logo.png"}else if(s.indexOf("blogblog.com/img/openid16-rounded.gif")!=-1){s="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKilM8L-gqvdRb1_2H2nVsnqrNvqIDS1Fl-SJ4FFzm4qlJTJi1CpZVEhQRYfLwF17p-b2KzJ34YZKUR4poAG8UxpxCSkM0Xr4WgwxhehA7R7OklnuylM9I3isI3E6jb4t1e7cQd6T9U00V/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/AVvXsEheTeF7Lcq4mwwba2P-uOaD5_zRriS7br76fbLZXMZqRFP57Bebez4GAh0cWBkYEWcco__i0ZKhXJdORsG0-E3KhS95BDa9zkWJwJkwFVrTgDT3PyX0qJ9N_UxzGIXlgWhVnFBcCPhu3M1i/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://jalu-pangna.blogspot.com/feeds/comments/default?alt=json&callback=bloggerspiceRC&max-results=5"></script>
</div>
KUSTOMISASI
- Ganti jalu-pangna.blogspot.com dengan alamat URL blog anda
- Angka 5 digit untuk menampilkan berapa banyak komentar yang ingin anda tampilkan
- height: 50px;width: 50px; untuk menampilkan ukuran tinggi dan lebar gambar
- Yang lainnya bisa anda kreasikan sendiri
wah mantap memang recent comment dengan hover:)
BalasHapusnice design Kang
Terima kasih mas hriza udah berkenan berkunjung lagi, hehe..jadi ga enak nih ada master. Thank you so much master for your visit.. :-)
Hapuswah saya jadi tau daleman recent commet. dulu sempet dapet tapi isinya didescript.
BalasHapusMas lebih faham dan lebih tahu tentang hal itu..saya masih dalam tahap belajar mas.. :)
BalasHapusspektakuler izn bookmark dulu om :)
Hapussilahkan mas imron...
HapusMantep nih.. izin Pertamax yaa :)
BalasHapusSilahkan mas Nabil, dengan senang hati. Terima kasih kunjungannya..
HapusKomentar ini telah dihapus oleh administrator blog.
BalasHapusmantab-mantab,.....sepertinya harus segera dicoba nih
BalasHapusMakasih mas fairuz achmad... :)
HapusKomentar ini telah dihapus oleh administrator blog.
BalasHapusblank lebih tertarik dengan Recent Comment yang terpakai di sisi kanan room nya mas.
BalasHapuskarna dapat menampilkan alamat more >>
bole ngk ane minta kode nya mas.
hehe pak Tarno bilang, t0long di bantu ya,yaa
Sudah saya posting mas, silahkan baca tutorialnya..
Hapushttp://jalu-pangna.blogspot.com/2013/05/memodifikasi-widget-recent-comment.html
dicoba gan... tp blm berhasil.... mint pencerahan.....
BalasHapusudah saya check di blog anda, itu bisa dan berhasil di terapkan...makasih udah mampir.
Hapusmakasih ya boss.....saya ijin tuk aplude ya bos...
BalasHapusSama-sama mas, monggo..Terima kasih atas kunjungannya..
Hapusga ngerti cara pasang'y
BalasHapusga ngertinya urutan yg mana nenk? coba ikuti tutorialnya dgn cermat..thanks
BalasHapus