How to Customize the Menu Button on Vertical Menu CSS?

Hi bloggy readers,
In my previous post - Vertical Menu CSS Bar added to Blogger Layout - i already showed you how to create a vertical menu CSS in blogger layout. If you've installed that vertical menu CSS on your blog, you might also want to customize the menu button to get more sophisticated and modern look in your blog, and also to get a blend interface with the theme of your blog.

To do that, you can create the new interface of the button on vertical menu CSS by using image editing software, such as PaintBrush, PhotoShop, GIMP or even Microsoft PowerPoint and then, put the image source address to the CSS styling.But, for those of you who don't really like or don't know exactly how to customize the menu button on vertical menu CSS, in this tutorial, i'll give you the shortcut. Okay, in this post, i want to show you some of my creation vertical menu CSS buttons that later can be installed to the current vertical menu CSS. Without further long introduction, let's get it started then.
1. Log in to Blogger
Now head on to Blogger.Com and then, enter to your account.

2. Go to Edit HTML
After landing to the Dashboard page, now press the Layout/Design button of a blog that has already been added with the vertical menu.

But, if you haven't installed the vertical menu CSS in your blog, you can start it by visiting this page first - Easy vertical menu CSS Added to Blogger Layout -. After following all the steps properly and the vertical menu CSS has been successfully installed and worked perfectly in your blog, now you can proceed to the next step of this article.

3. Save the Back Up Template
Now save the current template by pressing the link Download Full Template to make a back up template, just in case you do some mistakes with the template.

4. Install the new menu buttons
Okay, here are a variety of menu buttons that can replace the standard button of the vertical menu CSS you've already installed before. With the right click of mouse cursor, now press one of these buttons, and then press Copy Image Location. After that, keep the image source URL address to the Notepad first, later, will be used again for the next step.
5. Find the Code
Now press Ctrl + F and find the CSS below:
6. Replace the Code
After finding the CSS above, now replace that CSS by using the CSS below:
7. Put the Image URL Address
After locating the CSS on number 5 to your blog template, now insert the URL address of the image (on number 4) inside the code "Image URl address Here". For example, take a look at the red code below.
8. Adjust the Font Color
After putting the image source of menu button inside the CSS value, now we must also adjust the font color in order to differ the link title with the menu button on vertical menu CSS, so it can be read by human. On the same CSS of number 7 above, now replace the value #000000 with the code #fff. So now the CSS should look like this:Anyway, if you also want to customize the background of the vertical menu CSS, you can simply edit the value background:#dfdfdf inside the CSS above with another value, say, black, red, blue or any HEX color value, say, #800000, #696969, etc.

9. Save the Template
By pressing the Save Template button, now you can save the current changes you've just made. As you can see in your blog, now the mouseover menu (when being pointed by mouse cursor) on vertical menu CSS will have a different interface.

Okay, that's it for now. If you got any question regarding this article, or the method in this article doesn't work with your blog, feel free to leave me a question, and let me help you with that.

I'm Out...