29 Mei 2013

Widget kotak komentar terbaru menakjubkan dengan efek hover

Posted at  00.42  |  in  widget



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+="&#8230;"}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

Written by: jalupangna
Wawasan spiritual dan blogging, Updated at: 00.42
Anda menyukai postingan di atas? Silahkan di share..!
Blogging dan wawasan spiritual Post Author

Pengajar sekaligus pendidik di salah satu SMPN yang ada di daerah banten. seorang newbie blogger yang lagi belajar blogging. Strong will and effort adalah filosofi hidup saya agar supaya sukses dikemudian hari.

20 komentar:

  1. wah mantap memang recent comment dengan hover:)
    nice design Kang

    BalasHapus
    Balasan
    1. Terima kasih mas hriza udah berkenan berkunjung lagi, hehe..jadi ga enak nih ada master. Thank you so much master for your visit.. :-)

      Hapus
  2. wah saya jadi tau daleman recent commet. dulu sempet dapet tapi isinya didescript.

    BalasHapus
  3. Mas lebih faham dan lebih tahu tentang hal itu..saya masih dalam tahap belajar mas.. :)

    BalasHapus
  4. Mantep nih.. izin Pertamax yaa :)

    BalasHapus
    Balasan
    1. Silahkan mas Nabil, dengan senang hati. Terima kasih kunjungannya..

      Hapus
  5. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  6. mantab-mantab,.....sepertinya harus segera dicoba nih

    BalasHapus
  7. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  8. blank lebih tertarik dengan Recent Comment yang terpakai di sisi kanan room nya mas.
    karna dapat menampilkan alamat more >>
    bole ngk ane minta kode nya mas.
    hehe pak Tarno bilang, t0long di bantu ya,yaa

    BalasHapus
    Balasan
    1. Sudah saya posting mas, silahkan baca tutorialnya..
      http://jalu-pangna.blogspot.com/2013/05/memodifikasi-widget-recent-comment.html

      Hapus
  9. dicoba gan... tp blm berhasil.... mint pencerahan.....

    BalasHapus
    Balasan
    1. udah saya check di blog anda, itu bisa dan berhasil di terapkan...makasih udah mampir.

      Hapus
  10. makasih ya boss.....saya ijin tuk aplude ya bos...

    BalasHapus
    Balasan
    1. Sama-sama mas, monggo..Terima kasih atas kunjungannya..

      Hapus
  11. ga ngertinya urutan yg mana nenk? coba ikuti tutorialnya dgn cermat..thanks

    BalasHapus

About Us-Privacy Policy-Contact us
Copyright © 2013 Wawasan spiritual dan blogging. Blogger Template by BloggerTheme9
Proudly Powered by Blogger.
back to top