Wednesday, July 31, 2013

Membuat Efek Avatar Menghilang pada Box Komentar







Assalamualaikum pada kesempatan ini saya akan share mengenai cara membuat efek avatar menghilang pada box komentar,,maksudnya efek menghilang disini adalah avatar pada box komentar blog tidak akan terlihat melainkan avatar tersebut hanya akan terlihat jika disorot Nah untuk Demonya bisa anda lihat di box komentar blog ini...jika anda tertarik menggunakannya silahkan ikuti langkah dibawah ini..

Masuk blog anda
pilih menu template/edit html
kemudian cari kode ]]></b:skin> gunakan ctrl+f untuk memudahkan pencarian anda
jika sudah ketemu letakan css dibawah ini diatas tag ]]></b:skin>



.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container { visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}
.comments .avatar-image-container {float: left;width: auto;max-height: 56px;visibility: hidden;opacity: 0;left: 50px;position: relative;-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;}
.comment:hover .avatar-image-container {visibility: visible;opacity: 1;left: 0;}
#comments a {-webkit-transition: all .3s ease-in-out;-moz-transition: all .3s ease-in-out;-ms-transition: all .3s ease-in-out;-o-transition: all .3s ease-in-out;transition: all .3s ease-in-out;text-decoration: none;}


Langkah terakhir silahkan simpan template anda dan lihat hasilnya..
Selamat mencoba semoga bermanfaat...

0 comments:

Post a Comment