Cara Membuat Animasi Cover DVD

Salam semuanya,jumpa lagi masih sama hansmjlkcommunity,pada pertemuan sebelumnya saya sempat mengulas Cara Membuat Slide Gambar Di Blog Dengan jQuery,pada kesempatan ini saya akan sedikit mengulas tentang Cara Membuat Animasi Cover DVD,ini memang saya akui kurang begitu penting untuk blog,namun siapa tau ada sobat yang mencari artikel seperti ini,ya dari pada saya bengong sob mending bikin artikel....hehehhee,unutk lebih jelasnya bisa sobat lihat demonya.

DEMO 

Buat sobat yang ignin mencobanya silahkan ikuti tutorialnya di bawah ini.

1. Seperti biasa login dulu ke akun blog sobat.

2. Pilih Template > Edit HTML,jangan lupa Centang Expand Widget Templates.

3. Cari Kode ]]></b:skin>,dan letakan kode di bawah tepat di atas kode ]]></b:skin>.

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;
}

4. kemudian save.

Untuk menggunakan Cover DVD.silahkan sobat masuk ke :

* Add Gadget > HTML/Javascript,dan letakan kode di bawah ini pada bagian kolom konten.

<div class="dvd-cover"><div id="dvd-cover-wadah"><a href="http://hansmjlkcommunity.blogspot.com/"> <img alt="DVD Cover" src="https://hanmjlkcommunity.googlecode.com/files/cover%20DVD.png" /> <img alt="DVD Disc" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh_ftZE3bb-sbajcK0n_8GPDW0s8rC8-WOR5i-gV54X1arCQpTBa07jC1c0TJ0_HAGq1zmnt-1OiBL66WTB7on-cNITivJPHX4LxTwmZri7OuM7JA8A9lJxtyJW9Ipyj3qM1svktYeOn30/s170/dvd.png" /></a></div></div>