kelihatan 3D nya D: heheh.
Menubar Animation Transform Mempunya Kelebihan dari Menubar yang lain karna jika
Mous sobat menyentuhnya maka akan Muncul Linik yang sobat sentuh Dari bawah keatas
sobat bisalihat Gambar yang di atas aq kasih tanda panah
mau tau kaya apa si Menubar Animation Transform silakan Lihat demonya
Buat sobat yang mau pasang silakan ikuti langkah-langkah di bawah
Langkah: 1 Seperti biasa sobat masuk ke blog sobat semuah
Langkah: 2 Copy Kode Css di bawah Pastekan pas di atas kode </b:skin>
<style>
/* Horyzontal Droupdown menu
Original : Desain Selladrt
Website : By Url www.bloggertutoria.com
----------------------------------------------- */
#sella-wrapper{background:#1A1A1A;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;width:100%;margin:0 auto;padding:0 auto;-moz-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);-webkit-box-shadow:0 3px 3px 3px rgba(0,0,0,0.4);border-bottom:1px solid #00ff00;border-top:3px solid #00ff00;}
#barsella{width:900px;height:50px;margin:0 auto}
#selladrtmarkotop{width:100%}
#selladrtmarkotop,#selladrtmarkotop ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#selladrtmarkotop a{display:block;text-decoration:none;font:normal 11px Arial;text-transform:none;color:#CECECF;border-right:1px solid #484747;border-left:1px solid #191919;padding:7px 10px 7px}
#selladrtmarkotop a.arrow{background:#222;/* Original : Desain Selladrt */background-repeat:no-repeat;background-position:right center;padding:7px 24px 7px 10px}
#selladrtmarkotop li{float:left;position:static;width:auto;}
#selladrtmarkotop li ul,#selladrtmarkotop ul li{width:170px}
#selladrtmarkotop ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px;transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-webkit-transform: /* Original : Desain Selladrt */rotate(360deg) scale(1) skew(1deg) translate(0px);
-moz-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-o-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);
-ms-transform: rotate(360deg) scale(1) skew(1deg) translate(0px);}
#selladrtmarkotop li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:0px;}
#selladrtmarkotop li:hover a,#selladrtmarkotop a:active,#selladrtmarkotop a:focus,#selladrtmarkotop li.hvr a{background:transparans;color:#00ff00;font-size:15px;border-top:1px solid #cccccc;border-left:6px solid #069;border-bottom:1px solid #cccccc;border-right:1px solid #cccccc;-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px;-webkit-animation:transform-translate 1s;
-moz-animation:transform-translate 1s;
-ms-animation:transform-translate 1s;
-o-animation:transform-translate 1s;
animation:transform-translate 1s;}
#selladrtmarkotop li:hover ul,#selladrtmarkotop li.hvr ul{display:block}
#selladrtmarkotop li:hover ul a,#selladrtmarkotop li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#selladrtmarkotop li ul li.hr{border-bottom:1px solid #333;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:0px 0}
#selladrtmarkotop ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
#selladrtmarkotop a span,#selladrtmarkotop a.arrow span{font:bold 12px Arial;color:#888;display:block;line-height:16px;text-transform:uppercase;/* Original : Desain Selladrt */text-shadow: 1px 2px 2px #000}
#selladrtmarkotop li:hover a span,#selladrtmarkotop li:hover a.arrow span{color:#f1c822}
.clearfix:after{content:".";display:block;height:0;clear:both;visibility:hidden}
.clearfix{display:inline-block}
#inner{padding-top:40px;}
#blogger {position:fixed;top:0;left:0;width:100%;height:40px;z-index:999;}
#tutorial{text-align:center;background:transparent;height:40px;position:relative;z-index:999;}
* html, * html body{overflow-y:hidden;height:100%;}
* html #tutorial{margin-right:-143px;voice-family: "\"}\""; voice-family:inherit; }
* html #tutorial{margin-right:17px;}
* html #blogger {position:absolute;}</style>
Langkah:3 Copy Kode Html Atau Div nya di bawah Pastekan Pas Di bawah Kode <body>
<div id='blogger'>
<div id='tutorial'>
<div id='sella-wrapper'>
<div id='barsella'>
<ul id='selladrtmarkotop'>
<li><a href='http://www.bloggertutoria.com/' title='Bloggertutorial'><span>Bloggertutorial</span>Halaman Depan</a></li>
<li><a href='http://www.bloggertutoria.com/2013/01/daftar-linik.html' target='_blank' title='Sitemap'><span>Sitemap</span>Daftar Isi</a></li>
<li><a class='arrow' href='#'><span>Support</span>Kontak Kami</a>
<ul>
<li><a href='#' target='_blank' title='Google Plus'>Google Plus</a></li>
<li class='hr'></li>
<li><a href='https://twitter.com/selladrt' target='_blank' title='Twitter'>Twitter</a></li>
<li class='hr'></li>
<li><a href='https://www.facebook.com/selladrt' target='_blank' title='Facebook'>Facebook</a></li>
</ul>
</li>
<li><a class='arrow' href='#' title='Tutorial Blog'><span>Tutorial Blog</span>Berbagai Tutorial</a>
<ul>
<li><a href='#' rel='nofollow' target='_blank' title='Widget Blog'>Widget Blog</a></li>
<li class='hr'></li>
<li><a href='#' rel='nofollow' target='_blank' title='CSS'>CSS</a></li>
<li class='hr'></li>
<li><a href='#' rel='nofollow' target='_blank' title='Seo'>Seo</a></li>
</ul>
</li>
<li><a href='http://www.bloggertutoria.com/search/label/Template' target='_blank' title='Template'><span>Template</span>Antar Blogger</a></li>
<li><a href='http://www.bloggertutoria.com/2012/12/teman-yang-terbaik-top-commenters.html' target='_blank' title='Sahabat'><span>Sahabat</span>Sahabat</a></li>
<li><a href='http://www.bloggertutoria.com/' target='_blank' title='CSS'><span>CSS</span>CSS</a></li>
<li><a href='http://www.bloggertutoria.com/' target='_blank' title='Tutorial'><span>Tutorial</span>Tutorial</a></li>
<li><a href='http://www.bloggertutoria.com/' target='_blank' title='Modiv Komentar'><span>Modiv Komentar</span>Modiv Komentar</a></li>
</ul></div></div></div></div>
0 komentar:
Posting Komentar