Tips Trick dan Cara Buat Menu Flip Animasi

Menu Menuan kali ini kita buat Page Flip Animation menggunakan CSS ( Cabe Saus dan Sambal ), Menu Flip Animation ini selain mudah dite...

Menu Menuan kali ini kita buat Page Flip Animation 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 Rancangan + Edit HTML Centang Expand Widget Templates

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 Simpan

Ketiga
Klik Rancangan + Tambah Gadget Pilih HTML/JavaScript

Silahkan Copy dan Paste Kode Berikut ini

<div class="pad">
<div>
<div><h1>Menu</h1><p>by</br/> HYG</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 Simpan

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.

sumber: kumpulancara