Pages

4

Animasi Cover CD/DVD Pada 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 ]]></b:skin> Pada Template Sobat Dan Taruhlah Kode Dibawah Tepat Diatasnya.

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

  • 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.

    <div class="dvd-cover">
    <div id="dvd-cover-wadah">
    <a href="http://filiex.blogspot.com">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi_UX8dUdiVHk57ri_Gu2k6u2O9ZRCpcuW9Zi2tBkLBG7knrTFU1U3mNEnALwy1dRSsQYfc7O_xrBY0yfGg709p57shZJ9E_O6pYSn1l2YN3xnqSlhvtYd8VMKISQZmZN6oB5XcX5GG3rU/s300/Full%252520Tutorial.png" alt="DVD Cover">
    <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj56Z9FCIkSn9Yaa1LaeJZ3OeaWD31iGqj5PXD-bZ0n6ZfcQPrHxccRdB9dFsZU7qk0vPEpOhIVdY7hLa2tpiRmnYMeSZINbGWBJg0PnFRmSXLY-qfnxqFhjK6eHYv3j1wg8s0O7gCSEfQ/s170/dvd.png" alt="DVD Disc"></a>
    </div>
    </div>

  • 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.

Silahkan Ajukan Komentar Bila Ada Pertanyaan Dan Keluhan Tetang Tutorial Cara Membuat Animasi Cover CD/DVD Pada Blog.

Alfiona

Phasellus facilisis convallis metus, ut imperdiet augue auctor nec. Duis at velit id augue lobortis porta. Sed varius, enim accumsan aliquam tincidunt, tortor urna vulputate quam, eget finibus urna est in augue.

4 comments:

  1. Boy RanggaFebruary 22, 2012 at 5:33 PM

    waaaaaaaah mantap Makasih Banget Bang Udah Ngablin prmintaan ku hehehe..Ijin Kopipaste ya..
    oh iya minta prtunjuk neh Sofwer yg sering di gunakan untk Desain gambar dan baner Blog thank sblmnya..

    ReplyDelete
  2. Nelayan KodeMarch 26, 2012 at 9:51 PM

    cara mengubah sebagian warna background dalam postingan seperti yang di atas terima kasih

    ReplyDelete
  3. erlanggaNovember 2, 2012 at 11:53 PM

    sob yg saya inginkan home pagenya..
    jd berada di page sebelum masuk ke page utama..
    seperti examplenya, bukan malah widgetnya yang saya inginkan..
    visit back http://angga-ps.blogspot.com

    ReplyDelete
  4. AnonymousAugust 11, 2013 at 5:53 PM

    keren tutorialnya mudah dipahami.

    ReplyDelete