Posted by Syed Muhammad Ali
Today I am sharing a customized blogger horizontal dropdown menu with css affect. This bar could help you to display categories so that visitor might see it first when he opens your blog. Today the bar i am sharing is fully attractive and good Looking. You Must try it on your blog. You can also get it into your Desire color. Just comment below for help. I am going to tell you how to add this horizontal drop down menu to blogger
Just Follow the below steps to Add to Blogger
- Go to Blogger
- Log-In to your Dashboard
- Navigate to Template Section
- Click Edit Html
- Now Find ]]> by Pressing Ctrl+F Key.
- Paste the Below Code Just Above/Before it.
@import url(https://googledrive.com/host/0B0wTCJB4dkJ7YzVqWi1sS0ctSHM); /* Let’s import the lovely google font, http://www.infotechbloging.blogspot.com */ /* Menu itb */#itbmenu, #itbmenu ul, #itbmenu ul li, #itbmenu ul li a { padding: 0; margin: 0; line-height: 1; font-family: ‘Capriola’, sans-serif; } #itbmenu:before, #itbmenu:after, #itbmenu > ul:before, #itbmenu > ul:after { content: ”; display: table; } #itbmenu:after, #itbmenu > ul:after { clear: both; } #itbmenu { zoom: 1; height: 69px; background: url(http://1.bp.blogspot.com/-kTBBx6qCxaA/UnJjDtookvI/AAAAAAAACNU/OecOjUFF2ss/s1600/bottom-bg.PNG) repeat-x center bottom; border-radius: 2px; width: auto; } #itbmenu ul { background: url(http://2.bp.blogspot.com/-N2ifMIsOuGs/UnJjDsZ7u1I/AAAAAAAACNY/I1vACEQm4UI/s1600/nav-bg.png) repeat-x 0px 4px; height: 69px; } #itbmenu ul li { float: left; list-style: none; } #itbmenu ul li a { display: block; height: 37px; padding: 22px 30px 0; margin: 4px 2px 0; border-radius: 2px 2px 0 0; text-decoration: none; font-size: 15px; color: white; text-shadow: 0 1px 1px rgba(0, 0, 0, 0.75); font-weight: 400; opacity: .9; } #itbmenu ul li:first-child a { margin: 4px 2px 0 0; } #itbmenu ul li a:hover, #itbmenu ul li.active a { background: url(http://4.bp.blogspot.com/-2NHF0McOEp4/UnJjDoMn3II/AAAAAAAACNc/qVHXSxgESys/s1600/color.PNG) center bottom; display: block; height: 37px; margin-top: 0px; padding-top: 26px; color: #004f7c; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.55); opacity: 1; }
- Now Search For and Paste the Below Code Just Above/Before it.
- Click Save and You Are Done!.
We also Provide this menu in different colors. Comment below to get your Desired Color.
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
