Blogspot have limited widgets available and currently there is no menu/drop-menu type widgets found in blog-spot official adds gadget gallery, but there was a custom HTML/CSS option available that you can use to add any type of widget there. I found 11 menu widgets on the web that optimize your blog quality and makes a beautiful header menu navigation without wasting any time in customization with coding or in browser inspect tools, Just copy and paste the code from below listed menus source and you done. Most people use the drop menu that’s why I list drop down menus otherwise you can remove drop down feature from the menu and use menu without a drop.
Before adding your own custom drop menu in your template, please see some best blogger templates that already have drop menu matching to the template color customization and designing. If you don’t like any of menu coloring from below list, but you like a design so don’t ignore that because many people I found who make this mistake and try to contact author of article to change colors of menu, You just right click the menu through demo page > Inspect element > Focus Right hand side CSS > Manage color > Copy RGB color code and replace with color code from menu CSS code.
Zigzag is an ultimate & unique menu that looks completely different from other listed here. On-hover there is a little animation effect also exist and the coloring on-hover is also really perfect matching with the menu colors. So this is my best ever choice in creative & ultimate menus. In source link there are some more menus available, but you just choose this menu according to the snapshot and click “View Code”. The sub-menu styling are also different as you see in above snapshot.
Here comes the responsive menu which looks better on the small mobile device screen sizes. The look is really awesome and cool, that’s why this is my first favorite menu from listed here. Top border is animated so when you hover mouse on, the border slide left to right as you test this from source link. This is from CSS menu maker so to add this in your google blogspot you just follow my steps:
- Download source.zip from the link
- Extract files from zip and you see there is a folder which have 3 files
- As it is above, copy all code from “Script.js” and wrap all the code with “<script></script>”
- Now edit the index.html file in notepad and copy code from “<div id=”cssmenu” to end </div>” and paste where you want to show your menu.
If you still confuse to choose any link from another menu, then see how the source web page is doing.
This is also one of the best menu widget to add in your blog. The source link contains some more menus in page so choose this from no. (2) And just copy /paste code for a new widget. I like the drop style in this menu that’s why I take this to our list, but overall coloring, fonts, alignment, all is perfect so don’t ignore this also it’s also a great choice.
This navigation has more coloring features like magazine blogs. You can use this for any purpose blog, but make sure your template looks good with this because colored menus are only looking good if your site theme/template headings/categories/labels are also colorful. You can easily change color codes and customize any button color.
You can say this is a perfect pixel and light weighted responsive menu. In demo you see the drop is really good and there is no animation effect that’s why this is also one of my favorites. I like everything in this menu Top-border, Hover background color & and finishing. When you see this in small screen sizes the responsive is not awesome, but its ok because it extract all the drop links which cover so much header but over all its a good choice.
Straight forward is not the name of this, but after seeing this I feel like straight forward that’s why I rename this menu to straight forward. You see everything is perfect, not animated, light & simple, so it’s good for blogging purpose template. To make this menu more creative you just change/add font-family & border radius. I don’t think you need to change the position value to fix because it’s a simple design.
Here comes the blue professional design, navigation that’s absolutely perfect for multipurpose. The customization is absolutely of phpmyadmin and the drop & hover is also looking official. You can take this if your template is simple and its look perfect in white & the light gray background. Don’t customize anything, just copy/paste the source code and you have done.
As you know floating is a fixed position so you can use this if you want a floating nav bar like Facebook, Twitter or Vintaytime. In above snapshot you see at right, there are some social icons that’s looking cool, according to menu background color. You can also change, social links with share links and make them blogger sharing buttons. In modern times, many popular blogs,use sharing buttons in fixed menu so you can also do this.
Clean design means everything looks straight forward and there is not such CSS customization. These types of navigation bar not popular among bloggers, but you can try once if your template coloring matching with this clean css3 menu design. Second think there was a search box in this navigation bar that’s feels like your blog is very simple and there are not so much media contents in your blog.
Here is my 4th favorite navigation that has flat & bold designing. I always like this type of navigation in blogger platform but not in WordPress because there was already so much high quality navigation are available. Don’t compare Blogger vs WordPress in customization if you like something from WordPress platform you just copy source code from there and paste in your blogspot and make sure the codes not contain PHP codes.
This is not cool, but it feels like very perfect and font coloring according to background is also nice. You can also change border radius of sub pages to make this navigation more creative.