Kebanyakan orang pasti ingin Recent Commentnya memiliki Hover pada Image Avatar, dan Kotak Tulisan Recent Comment, jika anda ingin melihat Demo nya.. Lihat diatas. Tetapi anda tidak bisa tahukan bagaimana bentuk Hover yang akan jadi ??
Agar lebih jelass.. Perhatikan DEMOnya Dibawah ini :) Bagaimana ? anda tertarik ??
- Langsung saja -->>
- Buka / Login di BLOGGER anda masing masing,,
- Klik Menu Dropdown pada halaman Blogger. Lihat Contohnya
- Kemudian Pilih TATA LETAK.
- Klik Add Gadget/Tambah Gadget.
- Kemudian Akan Muncul Halaman baru seperti contoh dibawah ini
- Jika anda sudah mengikuti perintah dari gambar diatas, akan muncul halaman baru yaitu halaman untuk memasukkan kode kode atau widget anda .
- letakkanlah kode dibawah ini tepat di halaman yang sudah anda klik dari tulisan HTML/JavaScript.
<div style="overflow:auto; width:100%px; height:275px; padding:0px; border:3px solid #000;">
<style type="text/css">
#recentcomment {
width:98%;
margin-left:5px;
}
img.recentcomment-avatar {
background:#fff;
float:right;
padding:2px;
margin:2px -2px 0px 0px;
height:50px;
width:120px;
border:solid #ddd 1px;
}
img.recentcomment-avatar:hover {
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
-o-border-radius: 10px 10px 10px 10px;
transition: all 0.5s;
-moz-transition: all 0.5s;
-webkit-transition: all 0.5s;
-o-transition: all 0.5s;
-moz-transform:rotate(360deg);
-ms-transform:rotate(360deg);
-o-transform:rotate(360deg);
-webkit-transform:rotate(360deg);
transform:rotate(360deg);
}
td div.recentcomment-content a,td div.recentcomment-content a:hover{
font-family: 'trebuchet ms';
font-size:1.00em!important;
color:#2C2929;
text-decoration:none;
}
div.recentcomment-content{
font-size:1.00em!important;
text-decoration:none;
line-height:1.45em;
letter-spacing:0.03em;
margin: 10px auto;
background-color: #FEFEFE;
width: auto;
padding: 10px 0 10px 10px;
height: auto;
overflow: hidden;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
border: 4px solid #E50913;
}
div.recentcomment-content:hover{
background: #ccc;
border: 4px solid #389808;
-webkit-transition: all 0.5s ease-in-out;
-moz-transition: all 0.5s ease-in-out;
-ms-transition: all 0.5s ease-in-out;
-o-transition: all 0.5s ease-in-out;
transition: all 0.5s ease-in-out;
}
</style><script type="text/javascript">
ava_mode = "all";
var cm_num = 10;
var cm_desc = 13;
var homepage = "http://nabil02.blogspot.com/";
</script>
<script src="http://youdhie.googlecode.com/files/Recent%20Comment%20Thumbnail.js " type="text/javascript"></script>
</div>
- Jika anda sudah memasukkan Kode diatas ini kedalam halaman HTML/JavaScript,, maka Klik SIMPAN.
INGAT!!
- Ganti http://nabil02.blogspot.com/ dengan Alamat Blog anda.
SEMOGA ANDA SELALU SUKSES DAN TERIMAKASIH TELAH MEMBACA POST INI, SEMOGA BERMANFAAT !! (AMIN)
Judul : Cara Membuat RECENT COMMENT yang memiliki Efek Hover Pada Avatar dan Kotak Recent Comment
Deskripsi : Kebanyakan orang pasti ingin Recent Commentnya memiliki Hover pada Image Avatar, dan Kotak Tulisan Recent Comment, jika anda ingin mel...
