Cara Buat Menu Flip Animasi Ala Mak EROT - Hallo Sob Jody Blog, artikel kali ini berjudul Cara Buat Menu Flip Animasi Ala Mak EROT, kami telah menuliskan yang kami tahu pada artikel ini, semoga bermanfaat.

Judul : Cara Buat Menu Flip Animasi Ala Mak EROT
link : Cara Buat Menu Flip Animasi Ala Mak EROT

Cara Buat Menu Flip Animasi Ala Mak EROT

Menu Menuan kali ini kita buat Page Flip Animation Ala MAK EROT dan MAK ICIH menggunakan CSS ( Cabe Saus dan Sambal ), Menu Flip Animation ini selain mudah diterapkan juga berpenampilan keren dan tentunya memiliki fungsi yang tak kalah dengan menu lainnya dan bisa dijadikan juga sebagai penghias blog. Menu ini akan terlihat bagus jika menggunkan Browser IE9, Firefox 3.x, Firefox 4, Opera Safari and Chrome.



ADAKAH yang Protes Jika Menu ini di beri Judul Ala MAK Erot?..wah Mak ICIH si Penjual Kripik Pedes juga ikut kebagian,.. Maaf Sobat ini hanya bertujuan menghibur sobat sobit yang sedang SERIUS pandangin kode-kode maya yang nota bene berantakan dan malah membuat kode itu error sendiri..







Cara Pasang di Blog :



Pertama



Klik + Centang

Kedua

Cari kode ]]></b:skin>



Setelah ketemu Letakkan kode berikut diatasnya / Sebelum ]]></b:skin>

<style type="text/css">

div.pad {width:600px; height:400px; padding:0 0 40px 0; margin:20px auto; position:relative; overflow:hidden; background:#aaa; border:40px solid #aaa; border-width:40px 40px 0 40px;}

div.pad > div {width:300px; height:400px; position:relative; position:relative; float:right;}

div.pad > div > div:nth-of-type(1) {width:300px; height:400px; position:absolute; left:0; top:0; background:#574;

}



div.pad > div > div:nth-of-type(2),

div.pad > div > div:nth-of-type(2) div {

-webkit-transform-origin: 0 -900px;

-moz-transform-origin: 0 -900px;

-ms-transform-origin: 0 -900px;

-o-transform-origin: 0 -900px;

transform-origin: 0 -900px;

-webkit-transition: 0.75s ease-in-out;

-moz-transition: 0.75s ease-in-out;

-ms-transition: 0.75s ease-in-out;

-o-transition: 0.75s ease-in-out;

transition: 0.75s ease-in-out;

}



div.pad > div > div:nth-of-type(3),

div.pad > div > div:nth-of-type(3) div {

-webkit-transform-origin: 300px -900px;

-moz-transform-origin: 300px -900px;

-ms-transform-origin: 300px -900px;

-o-transform-origin: 300px -900px;

transform-origin: 300px -900px;

-webkit-transform: rotate(-17deg);

-moz-transform: rotate(-17deg);

-ms-transform: rotate(-17deg);

-o-transform: rotate(-17deg);

transform: rotate(-17deg);

-webkit-transition: 0.75s ease-in-out;

-moz-transition: 0.75s ease-in-out;

-ms-transition: 0.75s ease-in-out;

-o-transition: 0.75s ease-in-out;

transition: 0.75s ease-in-out;

}



div.pad > div > div:nth-of-type(2) {width:300px; height:440px; position:absolute; left:0; top:0; overflow:hidden;

-webkit-transform: rotate(-17deg);

-moz-transform: rotate(-17deg);

-ms-transform: rotate(-17deg);

-o-transform: rotate(-17deg);

transform: rotate(-17deg);

}



div.pad > div > div:nth-of-type(2) div {width:300px; height:400px; position:absolute; left:0; top:0; background:#ddd;

-webkit-transform: rotate(17deg);

-moz-transform: rotate(17deg);

-ms-transform: rotate(17deg);

-o-transform: rotate(17deg);

transform: rotate(17deg);

}



div.pad > div > div:nth-of-type(3) {width:300px; height:440px; position:absolute; left:-300px; top:0; overflow:hidden;}



div.pad > div > div:nth-of-type(3) div {width:299px; height:400px; position:absolute; left:0; top:0; background:#eee; border-right:1px solid #888;

-moz-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);

-webkit-box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);

box-shadow: -2px 0px 10px rgba(0, 0, 0, 0.5);

}



div.pad > div:hover > div:nth-of-type(2),

div.pad > div:hover > div:nth-of-type(3),

div.pad > div:hover > div:nth-of-type(2) div,

div.pad > div:hover > div:nth-of-type(3) div

{

-moz-box-shadow: none;

-webkit-box-shadow: none;

box-shadow: none;



-webkit-transform: rotate(0deg);

-moz-transform: rotate(0deg);

-ms-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

}



div.pad h1 {padding:0; margin:0; text-align:center; font:normal 80px/250px georgia, serif; color:#111; text-shadow: 0px 1px 1px #ddd;}

div.pad p {margin:0; text-align:center; font:normal 15px/18px Georgia, serif; color:#111; padding:20px;}

</style>

Silahkan klik



Ketiga

Klik + Pilih

Silahkan Copy dan Paste Kode Berikut ini

<div class="pad">

<div>

<div><h1>Menu</h1><p>by</br/> Kumpulancara</p></div>

<div><div>

<p>Menu Special</p>

<a href="Link anda disini ">Judul Link</a>

<a href="Link anda disini ">Judul Link</a>

<a href="Link anda disini ">Judul Link</a>

<a href="Link anda disini ">Judul Link</a></div></div>

<div>

<div>

Silahkan klik



Ubahlah Link anda disini dengan link yang akan sobat pakai dan judul link sesuai judul yang diinginkan.



Note : Untuk merubah Ukuran Menu dan Warna sobat bisa Otak atik sendiri kode CSS_nya



Selamat Mencoba.

Demikianlah Artikel Cara Buat Menu Flip Animasi Ala Mak EROT

Sekian Cara Buat Menu Flip Animasi Ala Mak EROT, mudah-mudahan bisa memberi manfaat untuk anda semua. baiklah, sekian postingankali ini.

Anda sedang membaca artikel Cara Buat Menu Flip Animasi Ala Mak EROT dan artikel ini url permalinknya adalah https://caratutorialgratis.blogspot.com/2012/02/cara-buat-menu-flip-animasi-ala-mak-erot.html Semoga artikel ini bisa bermanfaat.

Tweet