Add super fast loading 3D flying book menu navigation bar widget in your blogger blog. I am also looking forward to share blogger seo trick 2014 and some stylish blogger widgets with you guys.
Well every blogger would love to have a different style of navigation menu bar widget in his own blog. That show your blog awesome and different from other you got your own name and fame. So I will share a awesome navigation menu bar widget with you people and I am pretty sure you will love this widget. Because this menu widget will work super fast with 0 loading time because I am not going to use any Java script in this menu bar widget, only work with some css styles and menu coding. This awesome 3D flying book style menu will make your blog super fast with 0 loading time and will work awesome pretty way. This way users will love to use your menu and the click rate will increase which mean you are going to reduce bounce rate. This pretty sky blue co,or with flying book theme menu for your blogger blog is really amazing one. I really recommend you people please must use this awesome Navigation Menu bar in your blogger blog.I always looking forward to share awesome blogger tricks tips widget and seo tips tricks for blogger 2014.
How To Add 3D Flying Book Menu Widget in Blogger
- To Add This Menu Please Follow The Below Steps Carefully.
- Open Your Blogger Dashboard
- Go To Layout
- Add New Widget
- Choose HTML/Javascript
- And Paste The Below Code Inside It
- Now Save Your Widget And Check This Awesome 3D Flying Book Navigation Menu.
<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> <!-- end info -->
Customization
Please Replace Your Desire Links With #Url Code.Features Of 3D Flying Book Menu Bar Widget
- No Java Script
- Fast Loading
- Awesome 3D Colors
- Book Style
- Work With Any Template
- Easy To Use
- Easy To Edit
.jpg)
COMMENTS