Cara membuat widget menu navigasi bar 3D melayang di blog

Widget menu navigasi bar 3D adalah salah satu widget yang loadingnya cepat dan dikembangkan pada html dan css tanpa javascript. Widget ini termasuk salah satu widget terbaik untuk para blogger.

 

View Demo

Menu navigasi ini memiliki efek 3D ketika Anda mengarahkan kursor mouse ke menu, maka submenu akan muncul seperti buku dan terlihat seperti melayang itulah salahsatu alasan kenapa di beri nama widget menu navigasi bar 3D melayang. Menu navigasi ini dibuat dalam html dan murni menggunakan css dan tidak pernah menggunakan javascript untuk memberikan efek 3D.

Kualitas Menu Navigasi ini diantaranya:

• Loading yang cepat

• Berbasis html dan css.

• Tidak menggunakan Javascript.

• Sangat mengagumkan dan menarik.

Ini adalah salah satu menu navigasi profesional dengan warna biru dan mungkin Anda belum melihat menu navigasi seperti yang indah dan atraktif yang pernah ada sebelumnya. Penulis telah memberikan link demo dari menu ini di mana Anda dapat melihatnya betapa indah dan terkesan profesional. 

Multi submenu   

Navigasi menu 3D ini memiliki multi-submenu. Ketika Anda mengarahkan kursor mouse ke menu ini maka akan nampak 3 kotak submenu dan tidak hanya satu saja. Silahkan di edit sesuai dengan kebutuhan blog anda. Dan Anda memiliki kendali penuh atas menu navigasi 3D ini. Jadi silahkan ikuti tutorial untuk menginstal widget menu navigasi bar 3D ini ke blog Anda...:)  

Cara menambahkannya di blog

• Masuk ke akun blogger anda kemudian -> Klik Drop Down Menu
• Kemudian pilih-> Template -> Edit HTML

 

• Kemudian cari tag/kode ]]></b:skin> tekan Ctrl + F untuk memudahkan proses pencarian
• Setelah ketemu letakan kode berikut tepat diatas kode 
  ]]></b:skin> 

.menuHolder {margin:25px 0 100px 0; text-align:center; position:relative; height:40px; z-index:20; background:#069; background-image: -moz-linear-gradient(-90deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0)); background-image: -webkit-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: -o-linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); background-image: linear-gradient(-90deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)); border-radius:8px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -moz-perspective: 100px; -webkit-perspective: 100px; -o-perspective: 100px; perspective: 100px; } .menuHolder ul.nav li {display:inline-block; display:inline;} .menuHolder ul.nav {padding:0; margin:0; list-style:none; display:inline-block; -moz-transform-style: preserve-3d; -webkit-transform-style: preserve-3d; -o-transform-style: preserve-3d; transform-style: preserve-3d; } .menuHolder ul.nav li {float:left; display:block; padding:0 4px;} .menuHolder ul.nav > li {-moz-transform-style: preserve-3d;-webkit-transform-style: preserve-3d;} .menuHolder ul.nav li a.top-a {display:block; text-decoration:none; margin-top:4px; float:left; height:36px;} .menuHolder ul.nav li a.top-a b {display:block; padding:0 20px; font:normal 14px/30px arial, sans-serif; color:#fff;} .menuHolder ul.nav li:hover a.top-a {background:#09c; border-radius:8px 8px 0 0; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div {position:absolute; top:40px; left:4px; background:#09c; padding:5px 0 10px 0; border-radius:0 0 15px 15px; box-shadow:0 15px 10px -8px rgba(0,0,0,0.4); -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; transition: 0.5s; -moz-transform-origin: 0px 0px; -moz-transform: rotateX(-90deg); -webkit-transform-origin: 0px 0px; -webkit-transform: rotateX(-90deg); -o-transform-origin: 0px 0px; -o-transform: rotateX(-90deg); transform-origin: 0px 0px; transform: rotateX(-90deg); -moz-backface-visibility: hidden; -webkit-backface-visibility: hidden; -o-backface-visibility: hidden; backface-visibility: hidden; } .menuHolder ul.nav div.left {left:auto; right:4px;} .menuHolder ul.nav div ul {padding:10px 0; list-style:none; width:140px; margin:10px 5px 0 5px; float:left; display:inline; text-align:left; background:#fff; border-radius:6px; -moz-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -webkit-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); -o-box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); box-shadow:inset 0px 3px 3px rgba(0, 0, 0, 0.4); } .menuHolder ul.nav div ul.colLeft {margin-left:10px;} .menuHolder ul.nav div ul.colRight {margin-right:10px;} .menuHolder ul.nav div ul.colSingle {margin-left:10px; margin-right:10px;} .menuHolder ul.nav div ul li {float:left; border-bottom:1px dotted #09c; margin:0 5px 0 5px; display:inline;} .menuHolder ul.nav div ul li:last-child {border:0;} .menuHolder ul.nav div ul li a {display:block; width:105px; text-decoration:none; font:13px/16px arial, sans-serif; color:#069; margin:0; padding:4px 0 4px 15px; background:transparent url(droplistcolumns/arrow.gif) no-repeat left center;} .menuHolder ul.nav div ul li a:hover {color:#09c; background:transparent url(droplistcolumns/arrow.gif) no-repeat 1px center;} .menuHolder ul.nav div.col1 {width:160px;} .menuHolder ul.nav div.col2 {width:310px;} .menuHolder ul.nav div.col3 {width:460px;} .menuHolder ul.nav li:hover div { -moz-transform: rotateX(0deg); -webkit-transform: rotateX(0deg); -o-transform: rotateX(0deg); transform: rotateX(0deg); }

• Simpan template...

Langkah selanjutnya:

• Masuk ke akun Blogger anda -> Tata Letak ->Tambahkan Gadget -> HTML/Javascript

 

• Kemudian kopi dan Pastekan kode di bawah ini didalamnya

<div id="info">
<div class="menuHolder">
<ul class="nav">
<li><a class="top-a" href="#url"><b>Home</b></a></li>
    <li><a class="top-a" href="http://www.avdhootblogger.com"><b>Blogging</b></a>
<div class="col3">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/tips%20dan%20triks%20blog">tips dan triks blog</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/blog%20tutorial">blog tutorial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/CSS">CSS</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jquery-javascript">Jquery javascript</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/widget">widget</a></li>
</ul>
<ul class="col">
<li><a href="http://jalu-pangna.blogspot.com/search/label/animasi">animasi</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/Tips%20SEO">tips seo</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/jejaring%20sosial">jejaring sosial</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/ajax">ajax</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
<li><a href="#url">ajax</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>spiritual</b></a>
<div class="col2">
<ul class="colLeft">
<li><a href="http://jalu-pangna.blogspot.com/search/label/wawasan%20spiritual">wawasan spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/spiritual">spiritual</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/suluk">suluk</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/sejarah">sejarah</a></li>
<li><a href="http://jalu-pangna.blogspot.com/search/label/babad">babad</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">wawasan spiritual</a></li>
<li><a href="#url">spiritual</a></li>
<li><a href="#url">suluk</a></li>
<li><a href="#url">sejarah</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="#url"><b>Contact</b></a>
<div class="col1">
<ul class="colSingle">
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_1213.html">contact us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/about-us.html">about us</a></li>
<li><a href="http://jalu-pangna.blogspot.com/2012/11/daftar-link-otomatis-dengan-mister-linky.html">tukar link</a></li>
<li><a href="http://jalu-pangna.blogspot.com/p/blog-page_15.html">site info</a></li>
</ul>
</div>
</li>
<li><a class="top-a" href="http://jalu-pangna.blogspot.com/p/privacy-policy-for-sijalupangna.html"><b>Privacy</b></a></li>
<li><a class="top-a" href="#url"><b>lain-lain</b></a>
<div class="col2 left">
<ul class="colLeft">
<li><a href="#url">tips dan triks blog</a></li>
<li><a href="#url">blog tutorial</a></li>
<li><a href="#url">css</a></li>
<li><a href="#url">jquery javasript</a></li>
</ul>
<ul class="colRight">
<li><a href="#url">widget</a></li>
<li><a href="#url">animasi</a></li>
<li><a href="#url">tips seo</a></li>
<li><a href="#url">jejaring sosial</a></li>
</ul>
</div>
</li>
</ul>
</div>
<br /><br /><br /><br /><br /><br /><br /><br />
</div> <!-- end info -->

• Simpan Gadget... Selesai.

KET:

Kode yang di sorot warna biru adalah Link/URL, Silahkan anda ganti dengan Link/URL anda. Kode yang di sorot warna orange adalah menu dan sub menu, silahkan anda ganti sesuai dengan keinginan anda

HAPPY BLOGGING..! 

Written by: jalupangna

Wawasan spiritual dan blogging, Updated at: 00.30