Horizontal navigation menu bar for your blog

Navigation menus are used in every website and blogs in present.I adduced a cool vertical menu bar for your blog yesterday.Today i thought to post a tutorial to explain you how to add a horizontal navigation menu bar for your blog.You can add this horizontal menu bar in your blogger blog easily.You just need to follow below few steps....

Build your Menu

 I'm going to make it nice and simple, just 3 options and that's it. Once I have that all configured, I'm gonna keep this page as-is for a moment and open a new tab/window to navigate to my Blogger's dashboard.

 Add the CSS to Blogger

 Blogger's initial code my throw you off, since it mixes HTML with a couple of Blogger specific tags. However, if you scroll down enough past all the variables and extra stuff the usual Blogger template contains, you should find yourself with the actual CSS of the blog. You'll want to keep scrolling till you find the strange "]]></b:skin>" tag.

Once found, you'll want to click on the line before it and hit enter. You can now go back to your CSS dropdown menu for a moment and copy the CSS (in the CSS tab) and paste it there:

Add the HTML to Blogger

 Now, this part varies with the template you're using so as an extra tip, let's do something first: Go ahead and save your template, closing the window once complete. Middle click the "View blog" button on top to open your blog in a new tab. In the following example, I've used the "Simple" template and am using Firebug to inspect the HTML. As you can see I've checked the different divs and have decided to use "content-outer" classed div as the parent to my menu. Why? Because I want my menu to be in the center column; the parent "content" spans the whole page, and the "content-inner" child has some padding I don't want.

                      So I'm going to go back to the previous page, Edit my template's HTML again and scroll down till I find the place I want to paste the HTML portion of my dropdown menu into (i.e. right after the opening tag for the "content-outer" div):

Once complete, you can save template and behold the awesome new dropdown installed in Blogger! 


Thank You ... !

No comments:

If you have any suggestion or want to write for us,then Contact us.