Cara Membuat Anime Bergerak Dan Berubah Di Header Blog Dengan Css

Oke, kali ini saya akn berbagi kepada kalian sebuah tutorial blog tentang bagaimana caranya membuat anime bergerak atau bergeser dan juga berubah di header blog saat di hover atau di arahi mouse menggunakan css. Mungkin kalian sudah pernah melihatnya di template blog saya yang sebelumnya, Blue Madness. Nah sekarang saya akan membagikan cara membuatnya. Jika kalian masih belum tahu, kalian bisa melihat contohnya di link di bawah ini :

Demo

Bagaimana? Kalian tertarik? Jika kalian ingin membuatnya, kalian bisa ikuti langkah di bawah ini. Namun, saya sarankan untuk terlebih dahulu belajar mengenai dasar css dan html. Berikut ini adalah caranya :

• Pertama, buka dulu dasboard blog kalian.
• Masuk ke menu Template.
• Pilih Edit HTML.
• Cari kode ]]></b:skin>.
• Masukkan kode di bawah ini tepat di atas kode ]]></b:skin>.

div.Yondax {

background: url("http://i1273.photobucket.com/albums/y407/maskedx/smss_zps333f1dc9.png") no-repeat ;

-webkit-transition: all 560ms ease-out;

-moz-transition: all 560ms ease-out;

-ms-transition: all 560ms ease-out;

-o-transition: all 560ms ease-out;

transition: all 560ms ease-out;

margin:0px 0px 0px 300px;

position:absolute;

height: 200px;

width: 277px;

}

#header-wrapper:hover .Yondax {

margin:0px 0px 0px 490px;

opacity:0;

}

div.Yondax1 {

background: url("http://i1273.photobucket.com/albums/y407/maskedx/sms_zpsa1544df1.png") no-repeat;

-webkit-transition: all 560ms ease-out;

-moz-transition: all 560ms ease-out;

-ms-transition: all 560ms ease-out;

-o-transition: all 560ms ease-out;

transition: all 560ms ease-out;

margin:0px 0px 0px 405px;

position:absolute;

height: 200px;

width: 277px;

opacity:0;

}

#header-wrapper:hover .Yondax1 {

margin:0px 0px 0px 490px;

opacity:1;

} 

Keterangan :

Kode yang ITALIC adalah kode saat gambar di arahi mouse.

Kode yang berwarna KUNING adalah url gambar sebelum diarahi mouse. Kalian bisa menggantinya dengan url gambar yang kalian inginkan.

Kode yang berwarna ORANGE adalah kode lamanya transisi dalam micro second. Kalian bisa mengaturnya sesuai keinginan.

Kode yang berwarna UNGU adalah kode margin (Letak posisi) gambar. Kalian bisa mengaturnya sendiri.

Kode yang berwarna HIJAU adalah kode jenis posisi gambar. Kalian bisa menggantinya, namun saya sarankan untuk membuarkannya absolute.

Kode yang berwarna CYAN adalah kode ukuran tinggi gambar. Kalian sesuaikan dengan tinggi gambar yang kalian gunakan.

Kode yang berwarna BIRU adalah kode ukuran lebar gambar. Kalian sesuaikan dengan lebar gambar yang kalian gunakan.

Kode yang berwarna PINK adalah kode margin (Letak posisi) gambar saat di arahi mouse. Atur supaya berbeda dengan kode margin yang berwarna UNGU supaya ketika di arahi mouse gambar akan bergerak.

Kode yang BOLD adalah url gambar saat diarahi mouse. Jika kalian buat berbeda dengan url gambar yang berwarna KUNING maka gambar akan berubah saat di arahi mouse. Jika kalian samakan maka gambar hanya akan bergerak atau bergeser.

Saya sarankan untuk menyamakan kode yang mempunyai warna sama.

• Masih di Edit HTML, cari kode <header id="header-wrapper">. Jika tidak ada, carilah kode yang mirip.
• Masukkan kode di bawah ini tepat di bawah kode <header id="header-wrapper"> :

<div class='Yondax'/>

<div class='Yondax1'/>

•  Sebelum kalian simpan, kalian preview terlebih dahulu dan lihat apakah sudah pas atau belum. Jika belum, kalian bisa mengatur kodenya lagi.
• Jika sudah, sekarang tinggal kalian simpan.

Bagaimana? Sudah jadi bukan? Memang membingungkan, karena setiap template blog mempunyai ukuran dan kode yang berbeda beda. Oleh karena itu saya sarankan untuk terlebih dahulu mempelajari tentang dasar css dan html. sekian artikel saya kali ini. Semoga bermanfaat bagi kita semua. Jangan lupa untuk selalu mampir ke blog sederhana saya ini. Dan jangan lupa untuk selalu meninggalkan komentar dan klik tombol like di bawah ini.

Share :

Facebook Google+ Twitter