Selamat malam sobat, belajar CSS Animasi memang perlu ketelatenan dan ke uletan. maka dari tiu saya tidak cepat bisa, soalnya masih newbie. Tapi tak apalah sedikit demi sedikit lama-lama menjadi bukit. Animasi Css Profil Blog ini merupakan salah satu dari sekian banyak efek animasi menggunakan CSS. Animasi ini akan membuat efek yang menarik saat kursor menyentuhnya. Untuk demoya silahkan Lihat profil saya yang ada di home page. Nah bagaimana cara membuat animasi css profil blog? langsung saja kita praktekkan sobat :
1. Login ke Akun Blogger sobat masing-masing.
2. Klik Design or Rancangan, kemudian pilih Edit HTML
3. Centang (Expand Widget Template)
4. Untuk keamanan lebih baik kita (Download Template Lengkap)
5. Gunakan (Ctrl+F) or (Alt+E+F) untuk memudahkan pencarian
6. Cari kode : ]]></b:skin>
7. Jika Sudah Ketemu, letakkan Kode CSS dibawah ini sebelum atau diatas kode ]]></b:skin> .
8. Save
9. Selamat mencoba
Ada cara untuk modifikasi link dengan animasi css, silahkan kunjungi artikel cara buat animasi link dengan css.
Keterangan:Rubah nilai magrin 60px dengan sesuka sobat semakin kecil angka semakin ke kiri gambar tersebut.
Keterangan:Rubah nilai magrin 60px dengan sesuka sobat semakin kecil angka semakin ke kiri gambar tersebut.
maksudnya ini animasi buat profil bloger mas xD nice infonya tp dikasih demonya dong mas...
BalasHapusdemonya silahkan dilihat di home page gan... thanks
Hapusoke gan ^_^ oia kalo buat sroll yg bisa ngilang dikomentar seperti diblog sobat gimana ya heheeee
HapusKomentar ini telah dihapus oleh pengarang.
Hapusitu mudah gan,,, silahkan copypaste code dibawah ini dan letakkan diatas ]]></b:skin>. kemudian save
Hapus.comments {
opacity:0.6;
filter:alpha(opacity=60);
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
height: 260px;
overflow:hidden;
-o-transition: opacity 1s 1s, height 1s 0.2s;
-moz-transition: opacity 1s 1s, height 1s 0.2s;
-webkit-transition: opacity 1s 1s, height 1s 0.2s;
}
.comments:hover{
opacity:1.0;
filter:alpha(opacity=100);
-ms-filter:"progid.DXImageTransform.Microsoft.Alpha(opacity=100)";
height:400px;
overflow:auto;
overflow-x:hidden;
-o-transition: opacity 1s 0.1s, height 0.6s 1s;
-moz-transition: opacity 1s 0.1s, height 0.6s 1s;
-webkit-transition: opacity 1s 0.1s, height 0.6s 1s;
}
maaf baru bisa ol, semoga bermanfaat!
Terima kasih tutorialnya...
BalasHapuswww.womenandperspectives.com
sama-sama mbak
HapusMantep banget sob.Lanjutkan pokoknya :D
BalasHapuspastinya kang
Hapustutorial bagus sob....
BalasHapusbsa belajar di sini
mangga kang silahkan
HapusLain kli bleh di cba ....
BalasHapusmakasih gan
BalasHapusilmu ane jadi nambah lagi nih
sama-sama sobat :)
HapusMav sob telat ksh komentar hehe..
BalasHapusMksh share tutor nya ya :)
keren infonya, ntar dicobain ah. thanks y :-D
BalasHapusok silahkan sob
Hapuswawww keren Niee Sobb.. Ajibb Dahh pokoknya
BalasHapuslumayan atraktif gan
Hapus