News Update :


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/AVvXsEjaSwMNK22DQYg7iLI7yUqbTzosFZPGHefOyMwG2ZOIptuE3ODuuG8WVeF0rT1SHI5IN7ZDy3fQFNfXK1Pp3rPXpm_2Xup1c1SGyzTHMUYyA0_jwuKCO1miITHgnGsiK5bE_SX0AQ_W8w/s1600/page1.jpg" alt="DVD Cover">
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgRaMpbORSgG6bMJfbefctwYbOUMYjnCxiWWFHJrdTQqbsjpebgULUX35PFhITmbOkQveHKZm2WNgH4GZV2l4kPWm68Fl7t88qyHuO_zdkGXQdjGVomsVgnh8KM2ViVzbzhF434XUk_Ug/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.

Anda sedang membaca artikel tentang Membuat Animasi Cover CD/DVD Pada Blog dan anda bisa menemukan artikel Membuat Animasi Cover CD/DVD Pada Blog ini dengan url http://wawasanfadhitya.blogspot.com/2012/08/membuat-animasi-cover-cddvd-pada-blog.html,anda boleh menyebar luaskannya atau mengcopy paste-nya jika artikel Membuat Animasi Cover CD/DVD Pada Blog ini sangat bermanfaat bagi teman-teman anda,namun jangan lupa untuk meletakkan link Membuat Animasi Cover CD/DVD Pada Blog sebagai sumbernya.

Share on :
Bookmark and Share
| | 2 comments



Artikel Terkait

2 comments:

Unknown mengatakan...

15721meiqing
coach factory
christian louboutin
marc jacobs
coach factory outlet
cheap toms
retro 9
lebron shoes
oakley sunglasses
michael kors outlet
ralph lauren outlet
retro jordans 13
coach outlet
cheap nfl jerseys
hollister jeans
christian louboutin sale
jordan retro
ray ban outlet
michael kors outlet
louis vuitton handbags
michael kors
tory burch outlet online
abercrombie
hollister clothing store
ray bans
jordan 6 black infrared 2015
burberry handbags
louis vuitton
louboutin
christian louboutin shoes
coach outlet
michael kors outlet
coach factory outlet online
gucci outlet online
michael kors outlet
coach factory outlet
nike air max
gucci shoes
ray bans
fake oakleys
mulberry uk

John mengatakan...

canada goose
ray ban sunglasses outlet
kobe 9
gucci handbags
jordan retro 11
louis vuitton
polo ralph lauren
gucci outlet
louis vuitton handbags
adidas uk
michael kors handbags
pandora outlet
nike free runs
michael kors outlet online
louboutin pas cher
louis vuitton outlet
cheap jordans
louis vuitton outlet
canada goose coats
louis vuitton outlet online
ralph lauren outlet
cheap oakley sunglasses
true religion outlet
michael kors outlet online
mont blanc legend
ralph lauren outlet
official coach factory outlet
michael kors outlet online
ralph lauren uk
ray ban sunglasses
coach outlet store online
ugg clearance
abercrombie and fitch
20151230yuanyuan

Komentar di: Membuat Animasi Cover CD/DVD Pada Blog

Berkomentarlah dengan sopan dan pastikan komentar anda bukan spam. Komentar spam akan dihapus.

 

Page Rank Check

Technology Blogs

© Copyright 2012.Wawasanfadhitya: Membuat Animasi Cover CD/DVD Pada Blog | Template by Fandi Adhitya
All Rights Reserved | Privacy Policy