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="http://2.bp.blogspot.com/-gnNLzBuXXug/UA_jbQVzXwI/AAAAAAAAE0k/K-YLq-Xlvvg/s1600/page1.jpg" alt="DVD Cover">
<img src="http://4.bp.blogspot.com/-mmTGLe5nrO8/UA_t4CURSrI/AAAAAAAAE1E/r3HdsQqNr14/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.


Bagaimana Selanjutnya ?!?


Dari langkah-langkah di atas bila Anda masih mengalami kesulitan dalam Membuat Animasi Cover CD/DVD Pada Blog Maka silahkan untuk bertanya di kotak komentar, saya akan secepat mungkin membantu Anda.
Karna saya ada di sini!

Mudah-mudahan Anda suka dengan postingan kali ini, tunggu saja postingan selanjutnya untuk article yang lebih keren dan tak kalah menarik!

Posting Komentar Blogger Disqus

  1. Wow ternyata gini triknya ya gan :D

    follower #40 ditunggu folbacknya ^^

    BalasHapus
  2. bagus om.. tapi gambar pada demo ada yang broken link ya...??

    BalasHapus
  3. @Denddy GustianaMkasi gan, tpi yg broken link yg mna y??? stlh sya lht lgi demonya kok g ada yg broken link gmbarnya???

    BalasHapus
Catatan:
Untuk menyisipkan kode, gunakan tag <i rel="code">KODE ANDA...</i>
Kode yang panjang bisa menggunakan tag <i rel="pre">KODE PANJANG ANDA...</i>
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR...</i>
Untuk menyisipkan judul, gunakan tag <b rel="h3">JUDUL ANDA DI SINI...</b>
Untuk menciptakan efek tebal gunakan tag <b>TEKS ANDA DI SINI...</b>
Untuk menciptakan efek huruf miring gunakan tag <i>TEKS ANDA DI SINI...</i>

Penting:
Jika Anda mengajukan pertanyaan klik 'Subscribe by email' link di bawah form komentar untuk mengetahui komentar balasan.

Khusus untuk membalas komentar disarankan menggunakan tombol balas/reply di samping komentar terkait dibandingkan menggunakan formulir komentar di bawah agar komunikasi lebih terstruktur.

Dilarang Meninggalkan Link Aktif, Link Aktif Terpaksa Akan Saya Hapus Dari Komentar.

NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".

Konversi Kode di Sini! Daftar Member Aktif

 
Top