Navigation Bar

Tadi ada yang meminta saya membuatkan Navigation Bar yang saya punya (sama sekalian saya share buat agan -agan semuanya) jadi saya akan memposting ...
Navigation Bar

Bar ini hanya cocok jika kita buka Mozilla, Opera, dan Safari. Tapi gpp bar ini masih bisa memperlihatkan kehebatannya di browser lain.

TTP (To The Point)

Caranya :
1. Masuk ke blog kalian
2. jika sudah di Dashboard klik rancangan
3. klik HTML setelah Elemen Laman
4. cari ]]></b:skin>

5. masukan scriptnya di atas ]]></b:skin>

   

<br /> .GRsuperAnima {<br /> position: relative;<br /> margin: 15px 0 0 10px;<br /> overflow: hidden; <br /> margin: 0; <br /> padding: 0;<br /> background: #1d1d1d url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgTitik2AnimaV21H21.gif);<br /> }<br /> ul#superAnima { <br /> width: 590px;<br /> margin: 10px 0 20px; <br /> padding: 0; <br /> margin: 3px 4px 3px 4px;<br /> clear: both;<br /> float: left;<br /> }<br /> ul#superAnima li {<br /> margin: 0; <br /> padding: 0; <br /> overflow: hidden; <br /> float: left; <br /> height:40px; <br /> }<br /> ul#superAnima li a.anima {<br /> padding: 10px 10px;<br /> font: 10px Arial; <br /> float: left; <br /> color: white;<br /> text-decoration: none;<br /> text-transform: uppercase;<br /> text-shadow: 1px 1px 1px #000;<br /> clear: both;<br /> height: 18px;<br /> line-height: 20px; <br /> background: white url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradBlueH2V53.gif) top left repeat-x; <br /> text-align: center;<br /> -o-transition: all 1.2s ease-in-out;<br /> -moz-transition: all 1.2s ease-in-out;<br /> -webkit-transition: all 1.2s ease-in-out; <br /> font-weight: bold; <br /> border: 1px solid #999;<br /> } <br /> ul#superAnima li a.anima:hover {<br /> -o-transform: scale(1.0) rotate(0deg) translate(0, -40px);<br /> -moz-transform: scale(1.0) rotate(0deg) translate(0, -40px); <br /> -webkit-transform: scale(1.0) rotate(0deg) translate(0, -40px); <br /> } <br /> ul#superAnima li a.anima span {<br /> padding: 10px 9px; <br /> color: transparent; <br /> opacity: 0.2;<br /> -o-transition: all 1.6s ease-out; <br /> -moz-transition: all 1.6s ease-out;<br /> -webkit-transition: all 1.6s ease-out; <br /> -o-transform: scale(8.0) rotate(0deg) translate(0,-10px) ; <br /> -moz-transform: scale(8.0) rotate(0deg) translate(0,-10px) ;<br /> -webkit-transform: scale(8.0) rotate(0deg) translate(0,-10px) ;<br /> } <br /> ul#superAnima li a.anima span:hover { <br /> opacity: 1.0;<br /> padding: 4px 8px; <br /> height: 18px;<br /> -o-transform: scale(1.0) rotate(0deg) translate(0,0);<br /> -moz-transform: scale(1.0) rotate(0deg) translate(0,0);<br /> -webkit-transform: scale(1.0) rotate(0deg) translate(0,0);<br /> color: red; <br /> border: 1px solid #555;<br /> background: #888; <br /> text-shadow: 1px 1px 1px #000;<br /> box-shadow: 1px 2px 15px #fff, 0px -2px 8px red, -3px -3px 10px orange, -4px 4px 10px yellow;<br /> -moz-box-shadow: 1px 2px 15px #fff, 0px -2px 8px red, -3px -3px 10px orange, -4px 4px 10px yellow; <br /> -webkit-box-shadow:1px 2px 15px #fff,0px -2px 8px red, -3px -3px 10px orange,-4px 4px 10px yellow;<br /> border-radius: 12px; <br /> -moz-border-radius: 12px;<br /> -webkit-border-radius: 12px; <br /> }<br /> ul#superAnima li {<br /> border: 1px solid transparent;<br /> background: #CC9933 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/gradOrangeBlackV45H2.gif);<br /> } <br /> ul#superAnima li:hover { <br /> background: #000 url(http://i964.photobucket.com/albums/ae124/gubhugreyot/background/bgTitik2AnimaV21H21.gif); <br /> border: 1px solid #777;<br /> }<br />
6. simpan
7. kembali ke Elemen Laman
8. masukan kode HTMLnya
<br /> <div class="GRsuperAnima"> <ul id="superAnima"> <li><a class="anima" href="http://gubhugreyot.blogspot.com">Tutorial BloGGeR<br /><br /><span>Tutorial BloGGeR</span></a></li> <li><a class="anima" href="http://gubhugreyot.blogdetik.com">Home<br /><br /><span>Home</span></a></li> <li><a class="anima" href="http://tantytm.blogspot.com">jQuery<br /><br /><span>jQuery</span></a></li> <li><a class="anima" href="http://bloggerstuars.blogspot.com">CSS3<br /><br /><span>CSS3</span></a></li> <li><a class="anima" href="http://gubhugreyot.blogspot.com">Adobe<br /><br /><span>Adobe</span></a></li> <li><a class="anima" href="http://gubhugreyot.blogspot.com">Image Gallery<br /><br /><span>Image Gallery</span></a></li> </ul></div>
9. Taruh HTMLnya di Header
10. simpan
11. Lihat Hasilnya

Semoga Bermanfaat post hari ini :D