Designing Blogger Menu Bar in Rounded Corner with CSS Style "Border-Radius"

Hi bloggy readers,
I’ve already given you many useful tips to create Blogger menu bar in my older posts. In my recent posts that talk about creating menu bar on blog layout, i’ve also uncovered to you how to stack a cool rounded corner menu on your blog by using 2 rounded corner pictures, which being deployed on the left position, and on the right corner position as well (you can find the links of those articles right at the end of this post).
Since we all know that creating a rounded corners element can be easily done by using a CSS property border-radius, now i want to show you the latest trick to embed Blogger menu bar which has a rounded shape on each of the corner, and the important thing, without using any single image on it. Yeah, in this post, we are gonna play with border-radius property. Woohoo!! Okay, if you want to know more about this latest trick, read on to find out more.

1. Go to Edit HTML
After Signed in to your Blogger account, now let's moving on to the Dashboard > Layout/Design > Edit HTML.

2. Find the Code
After landing to the Edit HTML, by pressing Ctrl + F at the same time, now find the code section below in your blog template:
3. Add a new CSS
To create a rounded Blogger menu bar on your blog, you must firstly stack a new CSS style that later, will control the appearance of the Blogger menu bar. Okay, now copy the CSS style below, and then paste it on before the code ]]></b:skin>.
4. Find the Code
Okay, after finished putting the CSS styling in your blog template, now let's proceed to the next step. Considering that this Blogger menu bar will be obviously positioned on the top side of your blog, i assume that over or below the header element can be picked out for the position of this Blogger menu bar. Now find again the code below (Ctrl + F):
5. Put the Code for a New Column
After locating the code section on number 4 above, now block the code below, and press copy.
After that, paste that code either:
before the code section "header-wrapper", if you want to put the Blogger menu bar over the heading area,
OR after the code section "header-wrapper", if you want to place the Blogger menu bar below the heading area on your blog.6. Save the Template
Now save all the changes in your blog template by pressing the Save Template button, and proceed to the last step, adding the actual menu links on your blog.

7. Go to Page Element
After finished saving your template, now switch the sub-tab to the Page Element.

8. Add the Menu Links in the Provided Column Blogger menu bar
After landing to the Page Element, you will see a new column element has been successfully created on your blog for Blogger menu bar. For example, i assume that on the step number 5 above, you pick the top position over the header as the place of Blogger menu bar, so your blog layout should now look like this:If you can see that new column, now press the Edit link to open a new window. Now copy the code below, and then, paste it inside the HTML/Javascript you've been presented.
9. Customize the LinkOkay, now you need to pay attention to this important part. Before i show how to customize the links, now let me explain to you first about the whole elements inside the Blogger menu bar.

• Firstly, the link named "Home", has been separately created to have rounded corners only on the left top and left bottom position, so this button will still look as a "rounded" even when being hovered by mouse cursor (look at the picture above that has been marked as "first interface").
• Secondly, the rest of the menu links such as: Contact Us, About Us, etc will have a normal square interface (second interface).
• Thirdly, i've also created an extra interface for the last button, iPhone Games, on this Blogger menu bar, which has been created to have a rounded corner only on the right top and right bottom position (third interface). But, i think it's not that necessary to create the last button if you don't have any intention to create a lot of menu buttons on your blog. That's why, in editing the last menu "iPhone Games" will be explained in the last part of this article.

Here i'll show you how to customize the links, Home, About Us, Contact Us. As you can see above, there are several URLs and codes that i've marked with the red color.

• Now change the URL address http://www.whatmakesblog.com with your own URL address.
• For the links About Us and Contact Us, you must firstly create the landing pages for both links, before adding it into the menu bar. After that, change the words "Home", "About Us" and also, "Contact Us" with other words that suit with your preferences.

10. Save the widget
Okay, after finished configuring the whole menu buttons and the links, now you can save the widget and see the result.

How to Add More Links on Blogger menu bar?

When everything has worked perfectly on your blog, you may also want to know how exactly to add more menu buttons or links on Blogger menu bar, right? Okay, i'll show that. In the code number 8 and 9, if you want to get more menu links, you can simply put the red code below, before the last code </ul> </div>. Look at the example below.
How to Create the Last Button on Blogger menu bar?

Earlier in this article, i've already told you that i also wanted to show you how to add the last menu, "iPhone Games", if it's really necessary for you. To do this, now copy the code below and then, paste it on the bottom of the code number 8, or after the last code </ul></div>.
For example, look at how i put the last menu code of "iPhone Games" menu, on the bottom position of the entire menu:
Considering the menu "iPhone Games" is the last menu that will be placed on the corner of the Blogger menu bar, you can only apply 1 link for that last menu.

Okay, that's it my tips to create a rounded corner Blogger menu bar on your blog. In the next article, i'll show you how to modify the interface of the menu buttons on Blogger menu bar with more attractive interfaces. So stick around.

Anyway, you might also want to read these old articles:

1. How to Blogger Menu Bar on Blogger blog?
2. Customizing Blogger Menu Bar with More Attractive Hover Effect
3. Cool Blogger Menu Bar Buttons Added to Blogger Layout
4. Redesigning Blogger Menu Bar Buttons with More Attractive Colors
5. Replacing Blogger Menu Bar Buttons with More Blend Interface
6. Easy Blogger Menu Bar in Vertical Style Added to Blogger Layout
7. CustomizeBlogger Menu Bar in Vertical Style with Another Buttons