3D Navigasyon Menü Çubuğu

3D Navigasyon Menü Çubuğu. 3D Flying Book Navigation Menu Bar. Blog şablonunuz için güzel bir açılır navigasyon menü çubuğu. Kullanımı kolay, istediğiniz yere ekleyebileceğiniz şık bir menü bar. 3D menü, fare imleciyle üzerine gelince açılan alt menüleri mevcut. Kodun içinde sadece size ait sayfa linklerini yapıştırmanız yeterli. Kullanmak istediğiniz yerdeki bir gadgete kolaylıkla yapıştırıp, işlemi bitiriyoruz.

Nasıl eklerim ?

1. Blogger, Yerleşim sayfasına giriş yaptıktan sonra,
2. En üstte bulunan bir gadgete, aşağıda ki kodu kopyalayıp, yapıştırın.
3. Kodun içinde ki link kısımlarını sizin kullanmak isteğiniz etiket linklerini ekleyerek,
4. Kaydet deyip kullanmaya başlayabilirsiniz.

<style type="text/css"> .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); } </style> <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="#url"><b>Blogger</b></a> <div class="col3"> <ul class="colLeft"> <li><a href="#url">blogger widget</a></li> <li><a href="#url">blogger design</a></li> <li><a href="#url">blogger tips</a></li> <li><a href="#url">blogger seo</a></li> <li><a href="#url">blogger templates</a></li> </ul> <ul class="col"> <li><a href="#url">Related post</a></li> <li><a href="#url">Popular post</a></li> <li><a href="#url">Recent Post</a></li> <li><a href="#url">Chat widget</a></li> </ul> <ul class="colRight"> <li><a href="#url">navigation menu</a></li> <li><a href="#url">Side menu</a></li> <li><a href="#url">Horizontal menu</a></li> <li><a href="#url">Vertical menu</a></li> </ul> </div> </li> <li><a class="top-a" href="#url"><b>Website SEO </b></a> <div class="col2"> <ul class="colLeft"> <li><a href="#url">Header</a></li> <li><a href="#url">Footer</a></li> <li><a href="#url">Post</a></li> <li><a href="#url">Links</a></li> <li><a href="#url">Menu</a></li> </ul> <ul class="colRight"> <li><a href="#url">Mobile </a></li> <li><a href="#url">Mobile traffic</a></li> <li><a href="#url">Mobile seo</a></li> <li><a href="#url">small screen</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="#url">Email ID</a></li> <li><a href="#url">Mobile No.</a></li> <li><a href="#url">Contact Form</a></li> <li><a href="#url">My email</a></li> </ul> </div> </li> <li><a class="top-a" href="#url"><b>Privacy</b></a></li> <li><a class="top-a" href="#url"><b>Benefits</b></a> <div class="col2 left"> <ul class="colLeft"> <li><a href="#url">Google traffic</a></li> <li><a href="#url">Permanent Links</a></li> <li><a href="#url">Alexa Rank</a></li> <li><a href="#url">High page rank</a></li> </ul> <ul class="colRight"> <li><a href="#url">Snow Hotel</a></li> <li><a href="#url">The Snowman</a></li> <li><a href="#url">Ice Cavern</a></li> <li><a href="#url">Ski Inn</a></li> </ul> </div> </li> </ul> </div> <br /><br /><br /><br /><br /><br /><br /><br /> </div>