Posted by Syed Muhammad Ali
 |
Navigation menu plays an important role in a blog as it helps visitor to find categories easily. Today I am going to Share a cool blogger Widget for Blogger. This is an Navigation menu with easy to install.
This beautiful navigation menu will attract your visitor.
Try the Demo By Clicking Below Button This widget is easy to install as you only need to do two steps to see it on your blog.
Follow the Below Instructions to add this Menu to Blogger
- Now Find ]] in template. Hint: (Find by Pressing Ctrl+F Key)
- Paste the below Code Just Above it
/* Navigation ———————————————– */ /* = Top Nav = */ #itbnav { background:#1A1A1A; padding:0; height: 29px; font-size:11px; position: relative; } #itbnav .wrapnya, #nav .wrap, #headisi, #content-wrapper { margin:0 auto; width:98%; } #itbnav .tgltop { float:left; color:#E2E2E2; display:block; line-height:20px;margin-top: 4px; } /* = Middle Nav = */ .sf-menu, .sf-menu * { margin:0; padding:0; list-style:none; } .sf-menu li { position:relative; } .sf-menu ul { position:absolute; display:none; top:100%; left:0; z-index:99; } .sf-menu > li { float:left; margin:0 1px; } .sf-menu li:hover > ul, .sf-menu li.sfHover > ul { display:block; } .sf-menu a { display:block; position:relative; } #menunav > li > a { font: normal normal 90% ‘Open Sans’, serif ,Sans-serif; line-height: 50px; text-transform: uppercase; font-weight: 600; height: 50px; } .sf-menu ul ul { top:0; left:100%; } .sf-menu { float:left; } .sf-menu ul { min-width:12em; *width:12em; } .sf-menu a { padding:0 10px; height:50px; line-height:50px; text-decoration:none; zoom:1; } .sf-menu a.home, .sf-menu > li > a.home.current { background-color:#007ABE; text-indent:-9999px; padding:0; width:50px; } .sf-menu a { color:#E6E6E6; font-size:11px; } #itbnav .sf-menu a { color:#007ABE; height: 29px; line-height: 29px; } .sf-menu li { white-space:nowrap; *white-space:normal; -moz-transition:background-color .2s; -webkit-transition:background-color .2s; transition:background-color .2s; position:relative; } .sf-menu ul li { background-color:#007ABE; margin:1px 0; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } #itbnav .sf-menu ul li, #itbnav .sf-menu ul ul li { background-color:#1A1A1A; } .sf-menu ul a { font-weight:normal; height:28px; line-height:28px; } #itbnav .sf-menu ul a { height:25px; line-height:25px; } .sf-menu ul a:hover { padding-left:12px; } .sf-menu ul ul li { background:#007ABE; margin:0 0 1px 2px; } .sf-menu li:hover > a, .sf-menu li.sfHover > a, .sf-menu > li > a.current { background-color:#007ABE; -moz-transition:none; -webkit-transition:none; transition:none; color:#E6E6E6; } #itbnav .sf-menu li:hover > a, #itbnav .sf-menu li.sfHover > a, #itbnav .sf-menu > li > a.current { background-color:#007ABE; color:#E2E2E2; } .sf-arrows .sf-with-ul { padding-right:2em; *padding-right:1em; } .sf-arrows .sf-with-ul:after { content:”; position:absolute; top:50%; right:0.85em; margin-top:-2px; height:0; width:0; border:4px solid transparent; border-top-color:#E6E6E6; } #itbnav .sf-arrows .sf-with-ul:after { border-top-color:#007ABE; } .sf-arrows > li > .sf-with-ul:focus:after, .sf-arrows > li:hover > .sf-with-ul:after, .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color:#E6E6E6; } #itbnav .sf-arrows > li > .sf-with-ul:focus:after, #itbnav .sf-arrows > li:hover > .sf-with-ul:after, #itbnav .sf-arrows > .sfHover > .sf-with-ul:after { border-top-color:#E2E2E2; } .sf-arrows ul .sf-with-ul:after { margin-top:-4px; margin-right:-3px; border-color:transparent; border-left-color:#E6E6E6; } #itbnav .sf-arrows ul .sf-with-ul:after { border-left-color:#007ABE; } .sf-arrows ul li > .sf-with-ul:focus:after, .sf-arrows ul li:hover > .sf-with-ul:after, .sf-arrows ul .sfHover > .sf-with-ul:after{ border-left-color:#E6E6E6; } #itbnav .sf-arrows ul li > .sf-with-ul:focus:after, #itbnav .sf-arrows ul li:hover > .sf-with-ul:after, #itbnav .sf-arrows ul .sfHover > .sf-with-ul:after { border-left-color:#E2E2E2; } .sf-menu li > i { position:absolute; top: 3px; right: 3px; width: 27px; height: 22px; cursor:pointer; display:none; background-color:#007ABE; -moz-border-radius:2px; -webkit-border-radius:2px; border-radius:2px; outline:0; } .sf-menu li > i:after { content: ‘+’; color: #fff; font-size: 19px; position: absolute; left: 5px; top: -2px; } .sf-menu li > i.active:after { content:’-‘; font-size:39px; top:-14px; } #itbnav .sf-menu li > i { width: 23px; height: 19px; top: 6px; } #itbnav .sf-menu li > i:after { top: -4px; left: 3px; } #itbnav .sf-menu li > i.active:after { top: -13px; font-size: 31px; left: 4px; } .sf-menu a.home:before, .sf-menu a.home:before, #searchnya button:before, #view a:before, .breadcrumbs .homex:before { text-indent: 0; } .sf-menu a.home:before { width: 30px; height: 30px; } .sf-menu a.home:before { content: “\f015”; top: 0; font-size: 29px; left: 11px; color: #FBFBFB; } #icon-socialmn { margin: 0; float: right; } #icon-socialmn li { float: left; } #icon-socialmn a { display: block; text-indent: -9999px; width: 26px; height: 29px; background-image: url(http://3.bp.blogspot.com/-JWxzfuPXWDQ/ULykR51IjoI/AAAAAAAABfk/GUjrfkEH7hc/h25/team-social-icons.png); background-repeat: no-repeat; -webkit-transition: background .2s ease-out; -moz-transition: background .2s ease-out; -o-transition: background .2s ease-out; transition: background .2s ease-out; } #icon-socialmn .sotw a { background-position: 1px 2px; } #icon-socialmn .sofb a { background-position: -24px 2px; } #icon-socialmn .sogo a { background-position: -49px 2px; } #icon-socialmn .sorss a { background-position: -74px 2px; } #icon-socialmn .solinkn a { background-position: -99px 2px; } #icon-socialmn .sodrib a { background-position: -125px 2px; } #icon-socialmn .sopint a { background-position: -150px 2px; } #icon-socialmn .sotw a:hover { background-color: #2DAAE1; } #icon-socialmn .sofb a:hover { background-color: #3C5B9B; } #icon-socialmn .sogo a:hover { background-color: #F63E28; } #icon-socialmn .sorss a:hover { background-color: #FA8C27; } #icon-socialmn .solinkn a:hover { background-color: #0173B2; } #icon-socialmn .sodrib a:hover { background-color: #F9538F; } #icon-socialmn .sopint a:hover { background-color: #CB2027; }
- Now Find and Paste the Below Code Just Above it.
Congrats! Your are Done! If you get any problem while installing, let us know by commenting below
Follow Us! 
About This Blog:
InfoTechBlogging is owned by Syed Muhammad.Ali who loves to help other bloggers in starting their Blogging career. He also share Blogger Widgets and Templates.
Follow Him at : Google |Facebook| Twitter
