D E M O
Arahkan cursor ke menu di atas!
Cara membuat
Untuk membuat menu animasi 3 dimensi ini di blogger, anda harus membuat sebuah elemen baru yang bebas dari pengaruh kode css default blogger. Silahkan ikuti panduannya melalui link di bawah ini:
Elemen Baru untuk membuat Menu Horizontal di Blogger
Kode css
#myGRsldd3d{
position:relative;
height:38px;
padding:5px 0;
font-family:arial,sans-serif;
width:821px;
margin:0 auto;
background:rgba(0,0,0,.5) url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHk-a-7T-inGmGFsdb9HjbDuz7vIOyLqEksdQZhvDTsHWG4mAxeOUcwI9mxoWlJS_uF-1Ilc5Xg2DSakNiI5s-_XegN66Z4xfOB0-jRYM9LpWNB2vRaf-lnKHLDiRc09uwYzLTKT6HF89A/s128/red-grad-1x50.gif) repeat left top;
border-bottom:3px solid #777;
border-radius:12px 12px 0 0;
}
.adahbesar{
height:40px;
width:230px;
overflow:hidden;
position:absolute;
top:-15px;
padding:20px 0px 0px;
z-index:1;
transition: 0.5s 1s;
-o-transition: 0.5s 1s;
-ms-transition: 0.5s 1s;
-moz-transition: 0.5s 1s;
-webkit-transition: 0.5s 1s;
}
#myGRsldd3d .p1{left:4px;}
#myGRsldd3d .p2{left:167px;}
#myGRsldd3d .p3{left:330px;}
#myGRsldd3d .p4{left:493px;}
#myGRsldd3d .p5{left:656px;}
.adahbesar:hover{
height:452px;
top:-10px;
padding-top:60px;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
#myGRsldd3d .adahbesar div h4{
padding:15px 15px 0px 15px;
margin:0;
line-height:18px;
color:#0ff;
font-size:14px;
text-align:center;
}
#myGRsldd3d .adah3d3 ol,
#myGRsldd3d .adah3d3 ul,
#myGRsldd3d .adah3d3 li{
padding:0;
margin:0 10px;
}
#myGRsldd3d .adahbesar div ul li{
font-size:12px;
color:#000;
line-height:20px;
list-style-type:circle;
}
#myGRsldd3d .adahbesar div ul li a{
margin:0;
line-height:18px;
color:#000;
font-size:12px;
text-align:left;
text-decoration:none;
-moz-transition:1s;
}
#myGRsldd3d .adahbesar div ul li a:hover{
color:yellow;
text-shadow:1px 1px 1px #000;
}
#myGRsldd3d .adahbesar div img{
display:block;
max-width:150px;
max-height:autol
border:0;
margin:30px auto;
}
.adahbesar {
perspective:300px;
-o-perspective:300px;
-ms-perspective:300px;
-moz-perspective:300px;
-webkit-perspective:300px;
}
.adah3d1{
width:220px;
height:420px;
transition:1s 0s;
-o-transition:1s 0s;
-ms-transition:1s 0s;
-moz-transition:1s 0s;
-webkit-transition:1s 0s;
transform-style:preserve-3d;
-o-transform-style:preserve-3d;
-ms-transform-style:preserve-3d;
-moz-transform-style:preserve-3d;
-webkit-transform-style:preserve-3d;
}
.adah3d2{
background:#000;
font-size:18px;
text-align:center;
line-height:40px;
color:#9ff;
text-shadow:1px 1px 1px #000;
}
.adah3d2 a{
color:#fff;
text-decoration:none;
display:block;
z-index:999;
}
.adah3d2:hover a{
margin-top:-30px;
color:#9ff;
text-decoration:underline;
}
.adah3d3{
box-shadow:4px 4px 5px #000;
background:brown;
padding:0;
margin:0;
overflow:auto;
}
.adah3d3,.adahbesar:hover .adah3d1{
transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-webkit-transform: rotateY(180deg);
}
.adah3d2,.adah3d3{
position:absolute;
width:160px;
height:402px;
border-radius:8px;
backface-visibility: hidden;
-o-backface-visibility: hidden;
-ms-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-webkit-backface-visibility: hidden;
background-image: -moz-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -webkit-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -ms-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: -o-linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
background-image: linear-gradient(30deg, rgba(255, 255, 255,0), rgba(255, 255, 255,0.7), rgba(255, 255, 255,0));
}
.adah3d3{width:220px;}
.adahbesar:hover .adah3d1 {
transition-delay:0.5s;
-o-transition-delay:0.5s;
-ms-transition-delay:0.5s;
-moz-transition-delay:0.5s;
-webkit-transition-delay:0.5s;
}
xHTML
<div id="myGRsldd3d">
<div class="adahbesar p1">
<div class="adah3d1">
<div class="adah3d2">H O M E
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEieL4vxnoyGRJPEOcIwbOsrXTkUie0RW0ozTM3FO7vGZA-EYE7m7lOGsuiCElXi1LUsnB_0_etyTc3D689Tuz1sdmylc-GN2ameIEnCwGI1ZMru8NYqFEXCfb9y5G1PzXnK5oLHeQ0l5716/s160/gubhugreyot-April-2012.jpg" />
</div>
<div class="adah3d3"><h4>H O M E </h4>
<ul>
<li><a href="http://bestbloggermenus.blogspot.com" target="_blank">Home</a></li>
<li><a href="http://www.blogger.com/profile/15605262488816486839">About me</a></li>
<h4>My Blog </h4>
<li><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></li>
<li><a href="http://bestbloggerhack.blogspot.com" target="_blank">best blogger hacks</a></li>
<li><a href="http://gubhugreyot-demo-tutorial-blogger-2.blogspot.com" target="_blank">demo tutorial-2</a></li>
</ul>
</div>
</div>
</div>
<div class="adahbesar p2">
<div class="adah3d1">
<div class="adah3d2">Sulawesi
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihr_3uzvJc8WNPElIxrp_4NC_lmFBCtpDr3Pxf9HeyIGgkqGWUg8rs9-NOqLIagGgrkmTvwWv5DYIyGXEdY0m0QF2vGnds7D992NyDZkClCbGBdY0m6A5v_IfkDVcuXfVyItQicAg3Hl8u/" alt="" />
</div>
<div class="adah3d3"><h4>Kab/Kota di Sulawesi</h4>
<ul>
<li><a href="URL">Kabupaten Boalemo</a></li>
<li><a href="URL">Kabupaten Bone Bolango</a></li>
<li><a href="URL">Kota Gorontalo</a></li>
<li><a href="URL">Kabupaten Bulukumba</a></li>
<li><a href="URL">Kabupaten Gowa</a></li>
<li><a href="URL">Kabupaten Jeneponto</a></li>
<li><a href="URL">Kabupaten Luwu Timur</a></li>
<li><a href="URL">Kabupaten Sidenreng Rappang</a></li>
<li><a href="URL">Kota Makassar</a></li>
<li><a href="URL">Kabupaten Bombana</a></li>
<li><a href="URL">Kabupaten Konawe Utara</a></li>
<li><a href="URL">Kabupaten Wakatobi</a></li>
<li><a href="URL">Kota Kendari</a></li>
<li><a href="URL">Kabupaten Donggala</a></li>
<li><a href="URL">Kabupaten Parigi Moutong</a></li>
<li><a href="URL">Kabupaten Bolaang Mongondow</a></li>
<li><a href="URL">Kabupaten Kepulauan Sangihe</a></li>
<li><a href="URL">Kabupaten Kepulauan Talaud</a></li>
</ul>
</div>
</div>
</div>
<div class="adahbesar p3">
<div class="adah3d1">
<div class="adah3d2">Bali
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg-Yc8-MjoYAI3XjgsvOtX2v8DTRS-tXAFcesx0O3oFJgzx0f3d0J6BYGCaoHxI1N2tEdctWMwAub85CvkpqEDhf1AWxPDJl3NpajJRAClTLIxxDED9N08y2QgCQnf81RZBWHAIRBB4zB3M/h260/penari-bali.jpg" />
</div>
<div class="adah3d3"><h4>Kab/Kota di Bali</h4>
<ul>
<li><a href="URL">Kabupaten Badung</a></li>
<li><a href="URL">Kabupaten Bangli</a></li>
<li><a href="URL">Kabupaten Buleleng</a></li>
<li><a href="URL">Kabupaten Gianyar</a></li>
<li><a href="URL">Kabupaten Jembrana</a></li>
<li><a href="URL">Kabupaten Karangasem</a></li>
<li><a href="URL">Kabupaten Klungkung</a></li>
<li><a href="URL">Kabupaten Tabanan</a></li>
<li><a href="URL">Kota Denpasar</a></li>
</ul>
</div>
</div>
</div>
<div class="adahbesar p4">
<div class="adah3d1">
<div class="adah3d2">Sumatera
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinM-IyDm0Xv2KgJpycjAqQKRahJSw1UhJ6uIuafItAzk7gh-1LVRAf-oxt-FsWv2Tmoor6DsluBXajOontBRfsAmjR3_2YWQEvX3LeR_ohYv-iVKxNMo1a7eGamWLdR_0H2S5MzItR5uJy/" alt="" />
</div>
<div class="adah3d3"><h4>Sumatera</h4>
<ul>
<li><a href="URL">Palembang</a></li>
<li><a href="URL">Aceh</a></li>
<li><a href="URL">Medan</a></li>
<li><a href="URL">Solok</a></li>
<li><a href="URL">Bengkulu</a></li>
<li><a href="URL">Lampung</a></li>
</ul>
</div>
</div>
</div>
<div class="adahbesar p5">
<div class="adah3d1">
<div class="adah3d2">Kalimantan
<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj9-WZSPEqwo0BpsGYWVVD-OS1DU2aFEKTHMrSU6RLBv9GK9Op4mnNi65xHgffmaJqNq22tH4tAbK980Kn0Tolunxla2gF5XFLPL1TwAKWErtv6AwJjE_yzoC61LzTxnytsU1Kgacmp4rPb/" />
</div>
<div class="adah3d3"><h4>Kab/Kota di Kalimantan</h4>
<ul>
<li><a href="URL">Kabupaten Ketapang</a></li>
<li><a href="URL">Kabupaten Sanggau</a></li>
<li><a href="URL">Kota Pontianak</a></li>
<li><a href="URL">Kota Singkawang</a></li>
<li><a href="URL">Kabupaten Barito Kuala</a></li>
<li><a href="URL">Kabupaten Hulu Sungai Tengah</a></li>
<li><a href="URL">Kabupaten Tabalong</a></li>
<li><a href="URL">Kabupaten Tanah Laut</a></li>
<li><a href="URL">Kabupaten Barito Utara</a></li>
<li><a href="URL">Kabupaten Gunung Mas</a></li>
<li><a href="URL">Kabupaten Pulang Pisau</a></li>
<li><a href="URL">Kabupaten Kutai Timur</a></li>
<li><a href="URL">Kabupaten Penajam Paser Utara</a></li>
<li><a href="URL">Kota Bontang</a></li>
</ul>
</div>
</div>
</div>
</div>
mantab sekali blognya, sebuah revolusi nih.
BalasHapussalam.
tutorialnya bikin pusing nii...
BalasHapus