This is our 4th tutorial about menu bar for Blogger blog. This is a drop down menu so it will help you a lot to organize your categories and some important links. Your blog readers can easily navigate the blog links and categories. This is dark style menu bar with drop down function. This menu bar can work with all web browsers.Just follow below steps carefully, you will easily add this menu to your blog. Now lets see how to add it to blogger blog. First of all see the demo:
You May Like To Read:
How To Add Dark Style Drop Down Menu To Blogger
- Go to Blogger Dashboard > Layout
- Click on Add a Gadget (Below Header)
- Select HTML/JavaScript
- Paste Below Code Inside It and Save It.
<style>
.container {margin: 0 auto;width: 610px;text-align: center;height:300px;}
ul.dark_menu {
list-style: none;padding: 0; font-family: Arial;font-size: 14px;line-height: 14px;}
ul.dark_menu:after {content: "";clear: both;display: block;overflow: hidden;visibility: hidden;width: 0;height: 0;}
ul.dark_menu li {float: left;margin: 0 0 0 10px;position: relative;}
ul.dark_menu li:first-child {margin: 0;}
ul.dark_menu li a, ul.dark_menu li a:link {color: #FFFFFF;text-decoration: none;
display: block;padding: 10px 26px;text-shadow: 0 1px 0 #4b433e; background: #362f2c;
background: -moz-linear-gradient(top, #362f2c 0%, #282321 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#362f2c), color-stop(100%,#282321));background: -webkit-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -o-linear-gradient(top, #362f2c 0%,#282321 100%);
background: -ms-linear-gradient(top, #362f2c 0%,#282321 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#362f2c', endColorstr='#282321',GradientType=0 );
background: linear-gradient(top, #362f2c 0%,#282321 100%);
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-moz-box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
box-shadow: inset 0 1px 0 #564b46,0 1px 1px #181514;
-webkit-transition: all 1s ease;
-moz-transition: all 1s ease;
-o-transition: all 1s ease;
-ms-transition: all 1s ease;
transition: all 1s ease;}
ul.dark_menu li a:hover {
color: #73635e;
text-shadow: 0 1px 1px #000;
background: #282321;
background: -moz-linear-gradient(top, #282321 0%, #362f2c 99%, #362f2c 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#282321), color-stop(99%,#362f2c), color-stop(100%,#362f2c));
background: -webkit-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%);
background: -o-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%);
background: -ms-linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#282321', endColorstr='#362f2c',GradientType=0 );
background: linear-gradient(top, #282321 0%,#362f2c 99%,#362f2c 100%); -webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
ul.dark_menu li a.selected, ul.dark_menu li a:active {
color: #73635e;background: #282321;
text-shadow: 0 1px 1px #000;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-transition: all 1s ease;-moz-transition: all 1s ease;-o-transition: all 1s ease;-ms-transition: all 1s ease;transition: all 1s ease;}
ul.dark_menu li ul {display: none;}
ul.dark_menu li ul:before {content: " ";position: absolute;display: block;z-index: 1500;left: 0;top: -10px;height: 10px;width: 100%;}
ul.dark_menu li:hover ul {
position: absolute;display: block;z-index: 1000;left: 0;top: 44px;padding: 5px 0;list-style: none;background: #282321;
-webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;-moz-box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
box-shadow: inset 0 2px 4px rgba(0,0,0,0.6),0 1px 0 #5e524f;
-webkit-border-radius: 4px;-moz-border-radius: 4px;border-radius: 4px;}
ul.dark_menu li ul li {
float: none;margin: 0 10px;border-bottom: 1px solid #191614;border-top: 1px solid #3a3230;}
ul.dark_menu li ul li:first-child {
margin: 0 10px;
border-top: 0 none;}
ul.dark_menu li ul li:last-child {
border-bottom: 0 none;}
ul.dark_menu li ul li a, ul.dark_menu li ul li a:link {
color: #73635e;display: block;background: transparent none;padding: 10px 20px 10px 5px;white-space: nowrap;text-shadow: 0 1px 2px #000;-webkit-box-shadow: 0 0 0 rgba(0,0,0,0);-moz-box-shadow: 0 0 0 rgba(0,0,0,0);box-shadow: 0 0 0 rgba(0,0,0,0);
-webkit-border-radius: 0px;-moz-border-radius: 0px;border-radius: 0px;}
ul.dark_menu li ul li a:hover {text-decoration: underline;background: #2a2523;}
</style>
<div class="container">
<h1>Dark Menu</h1>
<!-- Dark Menu Begin -->
<ul class="dark_menu">
<li><a href="Your Link Here" class="selected">Home</a></li>
<li>
<a href="Your Link Here">Download</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="Your Link Here">Menu Link 1</a></li>
<li><a href="Your Link Here">Menu Link 2</a></li>
<li><a href="Your Link Here">Menu Link 3</a></li>
<li><a href="Your Link Here">Menu Link 4</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li>
<a href="Your Link Here">Blog</a>
<!-- Sub Menu Begin -->
<ul>
<li><a href="Your Link Here">Menu Link 1</a></li>
<li><a href="Your Link Here">Menu Link 2</a></li>
<li><a href="Your Link Here">Menu Link 3</a></li>
<li><a href="Your Link Here">Menu Link 4</a></li>
</ul>
<!-- Sub Menu End -->
</li>
<li><a href="Your Link Here">About</a></li>
<li><a href="Your Link Here">Contact</a></li>
</ul>
<!-- Dark Menu End -->
</div>
How To Customize It?
You can modify this widget very easily but if you need our help then you can ask via comments. Happy Blogging and Stay Blessed.
Author - Gagan Masoun is the owner of Blogs Daddy Blog.Gagan lives in India, has been blogging since 2010 and writing Blogs Daddy Blog since 2011.You can find him in the usual social networks.
0 comments:
Post a Comment