Cara Pasang Animasi Cover CD/DVD Di Blog

Cara Pasang Animasi Cover CD/DVD Di Blog

 
Untuk Postingan Kali ini Saya Kembali Pada Tutorial Blogger Dengan Tema Membuat Animasi Cover CD/DVD Pada Blog. Sebenarnya Untuk Tutorial ini Jarang Sekali Digunakan Oleh Sobat Blogger Padahal Jika Di Suatu Blog Dipasangkan Animasi Cover CD/DVD Mungkin Blog Tersebut Akan Tampil Cantik Dan Profesioanl, Terutama Untuk Blog Yang Bertema Software, Video dan Lainnya.

Untuk Sobat Blogger Yang Belum Paham Apa Itu Animasi Cover CD/DVD Bisa Melihat Demo Dengan Click Gambar Dibawah ini.


Buat Para Sobat Blogger Yang Tertarik Bisa Menyimak Tutorial Dibawah ini.

  • Pertama Silahkan Sobat Login Ke Akun Blogger Sobat.
  • Masuk Pada Rancangan Lalu Pilih Edit HTML Dan Centang Expand Template Widget.
  • Selnjutnya Silahkan Cari Kode ]]> Pada Template Sobat Dan Taruhlah Kode Dibawah Tepat Diatasnya.

    div.dvd-cover {
    width : 940px;
    margin : 0 auto 3em auto;
    }

    div.dvd-cover:after {
    content : “020”;
    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;
    }

  • Bila Langkah Diatas Sudah Selesai Silahkan Sobat Save Atau Simpan Template.
  • Terakhir Sobat Harus Menentukan Dulu Penempatan Animasi Cover CD/DVD Dan Disini Saya Akan Coba Menaruhnya Pada Elemen Halaman Blogger Dan Berikut Caranya.
  • Silahkan Sobat Masuk Pada Elemen Laman.
  • Selanjutnya Sobat Tambahkan Gadget Dan Pilih HTML/Javascript.
  • Selanjutnya Sobat Masukkan Kode Markup Dibawah ini.

  • Selanjutnya Simpan Dan Lihat Hasilnya.

Keterangan:

  • Kode yang Berwarna Merah Adalah Link Atau Url Tujuan Yang Bisa Sobat Ubah Sesuai Keinginan Sobat.
  • Kode Yang Berwarna Biru Adalah Url Gambar Cover.
  • Kode Yang Berwarna Kuning Adalah Url Gambar Disk.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s