We Are Come Back With How to add simple Css3drop down menu bar for your blogger. There are smallicons on sub menu. This menu bar works with everyinternet browsers.You can link with your main pagesby using this navigation. Im using Css3 and HTML,Just check out demo.Its easy to add to blogger get myall menu bar here.....
1. Log in to blogger account and Click drop down.
blog-post-option
2. Now select "Template" Like Below.
Select-template
3. Now you can see Live on blog, Click EDIT HTML Button"
4. Now click Proceed button.
5. Find this tag by using Ctrl+F ]]>
6. Paste below code Before ]]> tag
-------------------------------------HTML CODE-----------------------------------------
/* The CSS Code for the menu starts here tricksweb.blogspot.com */
.btrix_menu,.btrix_menu ul,.btrix_menu li,.btrix_menu a {
margin: 0;
padding: 0;
border: none;
outline: none;
}
.btrix_menu {
height: 40px;
width: 525px;
background: #4c4e5a;
background: -webkit-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -moz-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -o-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: -ms-linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
background: linear-gradient(top, #4c4e5a 0%,#2c2d33 100%);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
.btrix_menu li {
position: relative;
list-style: none;
float: left;
display: block;
height: 40px;
}
.btrix_menu li a {
display: block;
padding: 0 14px;
margin: 6px 0;
line-height: 28px;
text-decoration: none;
border-left: 1px solid #393942;
border-right: 1px solid #4f5058;
font-family: Helvetica, Arial, sans-serif;
font-weight: bold;
font-size: 13px;
color: #f3f3f3;
text-shadow: 1px 1px 1px rgba(0,0,0,.6);
-webkit-transition: color .2s ease-in-out;
-moz-transition: color .2s ease-in-out;
-o-transition: color .2s ease-in-out;
-ms-transition: color .2s ease-in-out;
transition: color .2s ease-in-out;
}
.btrix_menu li:first-child a { border-left: none; }
.btrix_menu li:last-child a{ border-right: none; }
.btrix_menu li:hover > a { color: #8fde62; }
.btrix_menu ul {
position: absolute;
top: 40px;
left: 0;
opacity: 0;
background: #1f2024;
-webkit-border-radius: 0 0 5px 5px;
-moz-border-radius: 0 0 5px 5px;
border-radius: 0 0 5px 5px;
-webkit-transition: opacity .25s ease .1s;
-moz-transition: opacity .25s ease .1s;
-o-transition: opacity .25s ease .1s;
-ms-transition: opacity .25s ease .1s;
transition: opacity .25s ease .1s;
}
.btrix_menu li:hover > ul { opacity: 1; }
.btrix_menu ul li {
height: 0;
overflow: hidden;
padding: 0;
-webkit-transition: height .25s ease .1s;
-moz-transition: height .25s ease .1s;
-o-transition: height .25s ease .1s;
-ms-transition: height .25s ease .1s;
transition: height .25s ease .1s;
}
.btrix_menu li:hover > ul li {
height: 36px;
overflow: visible;
padding: 0;
}
.btrix_menu ul li a {
width: 100px;
padding: 4px 0 4px 40px;
margin: 0;
border: none;
border-bottom: 1px solid #353539;
}
.btrix_menu ul li:last-child a { border: none; }
.btrix_menu
a.documents { background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOGt4fJlCCY6zIBWm7YMgALH3wob3qq_QUp3GbugNIP78li_PyXyJ01tcUzZUazsEVaWwwbOI9ENefeknXfWX0rbLWzUKL99RRFw4ttStglf5_vmZYoSbQn630pkxkd5SbCSBOk_uwHcs4/s1600/docs.png)
no-repeat 6px center; }
.btrix_menu
a.messages { background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PhaEgMNPC0aNQgLzxWu2cr3EI3zXBa9-FagEJ1OybFe5SH5qYPoeHMs_RlIysX27cQxqxECH0JWxoz5kZmGiVb94ttj7EuWhqvXyZt8AVrOHJ-TGatLfC01iZ_uEYMU_xbScBxnKPwQw/s1600/bubble.png)
no-repeat 6px center; }
.btrix_menu
a.signout { background:
url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQrdIM84uDYeIEidV1MhIf6JsQINakMA8OKnMZbDk6_0ru5vnUR7WkdH4c3JQOinpwvad-138w6vhowAxIeq638o6Ju39BF6iAHKskntZzcOKkKPC8KKcYeLe-CJEpfmM1BOq-Wn6C0VAE/s1600/arrow.png)
no-repeat 6px center; }
----------------------------------------HTML CODE----------------------------------
7. Go to blogger and click Layout
8. Click Add Gadget and select 'HTML/Javascript
9. Download and Paste below code.
Download CODE :
Replace # with your links.
10. Now save your HTML/JavaScript'.
You are done...
.jpg)
