Membuat Animasi Cover CD/DVD Pada Blog

Kembali di tutorial Blogger!!!
Dalam postingan kali ini Oto Website akan berbagi sebuah tutorial dan untuk kali ini kita membahas tentang menu atau navigasi dan kali ini lagi temanya adalah Membuat Animasi Cover CD/DVD Pada Blog. Anda pasti sering melihat Cover CD/DVD entah itu CD/DVD bajakan ataupun yang asli bahkan di dunia maya Anda pasti sering melihat gambar dari Cover CD/DVD.
Nah tapi bagaimana bila kita Membuat Animasi Cover CD/DVD Pada Blog kita plus beserta Disketnya, pasti gak kefikiran kan? dan pastinya akan sangat menarik dan keren. Untuk lebih jelasnya tentang Animasi Cover CD/DVD Pada Blog silahkan Anda lihat dulu demonya dengan menekan tombol berikut ini.

---

Membuat Animasi Cover CD/DVD Pada Blog !!!

---

Untuk Membuat Animasi Cover CD/DVD Pada Blog ini juga sangat-sangatlah mudah sekali Anda hanya perlu mengcopy dua kode yang saya siapkan untuk Membuat Animasi Cover CD/DVD Pada Blog. Untuk itu silahkan Anda lihat langkah-langkah berikut ini untuk mulai Membuat Animasi Cover CD/DVD Pada Blog.

1.Masuk ke akun blogger Anda.

2. Pada Dasbor klick Template ➨ Edit HTML.

3. Dalam Edit HTML temukan kode ]]></b:skin> atau <style>, Bila kesulitan mencari kode HTML coba Anda lihat DISINI.

4. Jika sudah ketemu sekarang letakkan kode berikut tepat di atasnya.

div.dvd-cover {
width : 940px;
margin : 0 auto 3em auto;
}
div.dvd-cover:after {
content : "\0020";
display : block;
height : 0;
clear : both;
visibility : hidden;
overflow : hidden;
}
div#dvd-cover-wadah {
position : relative;
float : left;
width : 240px;
margin-right : 60px;
padding : 320px 0 1.5em 0;
}
div.dvd-cover img[alt*="Cover"] {
z-index : 2;
position: absolute;
top : 0;
left : 0;
}
div.dvd-cover img[alt*="Disc"] {
z-index : 1;
position: absolute;
top : 70px;
left : 85px;
}
div.dvd-cover a:hover img[alt*="Cover"] {
-moz-transform : rotate(-1deg);
-moz-transform-origin : 50% 100%;
-o-transform : rotate(-1deg);
-o-transform-origin : 50% 100%;
-webkit-transform : rotate(-1deg);
-webkit-transform-origin : 50% 100%;
transform : rotate(-1deg);
transform-origin : 50% 100%;
}
div.dvd-cover a:hover img[alt*="Disc"] {
-moz-transform : translate(40px,0) rotate(300deg);
-o-transform : translate(40px,0) rotate(300deg);
-webkit-transform : translate(40px,0) rotate(300deg);
transform : translate(40px,0) rotate(300deg);
}
div.dvd-cover img[alt*="Cover"], div.dvd-cover img[alt*="Disc"] {
-moz-transition : all .5s ease-in-out;
-o-transition : all .5s ease-in-out;
-webkit-transition : all .5s ease-in-out;
transition : all .5s ease-in-out;
}

5. Simpan template.

6. Pergi ke Dasbor klick Tata Letak.

7. Klick Tambah Gadget ➨ Pilih elemen HTML/Java Script.

8. Lalu copy kode berikut ini dan paste atau letakkan di dalam elemen HTML/Java Script

<div class="dvd-cover">
<div id="dvd-cover-wadah">
<a href="http://otowebsite.blogspot.com">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi2P506O9IcEwmmtj6_rd5s7Mji_GjM5v_I9O9rZsF0icuqcs0e1qql1uF4BxanhNvmd8jdqgpXidD-53bMzAkhL332K1HTpTWTrPyewzekvxImXilvk6RgBQxkZbbKSdhvnEc6Xger5Q/s1600/page1.jpg" alt="DVD Cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhhS9L8z-k8GtNLp3kL4-VKlM-C9UNduCPxCrdKc8MsgahkyMJtKfWCqHg7sJgUR0US3qky9xJyFx_aYahLkptjOkMSW2cbFFruBVkP3Pshw-3AI5kWjw0HyerYjKlL9Nfz6HcaIUMLwg/s1600/OW.png" alt="DVD Disc"></a>
</div>
</div>

9. Simpan.

---

Melakukan perubahan

---

Dari kode pada tahap 8 ada beberapa kode yang bisa Anda rubah:

• Warna kuning Adalah url tujuan silahkan Anda rubah sesuai dengan ke'ingingan Anda.
• Warna biru adalah kode url gambar Cover CD/DVD juga bisa Anda rubah.
• Warna hijau adalah kode url gambar Disk CD/DVD menurut saya tidak perlu di rubah, tapi terserah Anda.