Vertical Navigation Menu Using Background Image in Blogger

This is really important to make our website navigation friendly. A good navigation affects the site’s page view, Income and Branding. You may think how income is related? While you are applying for AdSense then you might see AdSense decline reason your site hasn’t any clear and user friendly navigation system. So we should emphasize on it to get approval from AdSense by adding user friendly navigation.

I have seen many WordPress websites that has integrated vertical navigation with beautiful image background. This is not only helped to make your site navigation friendly but also this will create a brand image on viewers mind.

Live Demo

But vertical navigation has some limitations, such as; you won’t able to add many label or categories at a time, because it occupies large steps. If your template is not fast to load then it will also affect the loading time. So I think these types of vertical menu should be added on a faster loading website.

For example purpose I have added the images from a Wordpress site. But you have to create the image by using any Photo Editing software like Photoshop.

Best image dimension for vertical navigation menu is 400px X 150px but you can also create 300px width and 150px height.  So create the image first and upload it in your Blogger static page or in any other image hosting site like Photobucket, tinypic etc.

I guess that you have created image and uploaded in an image hosting site. And now proceed to the next level to integrate the vertical menu in your website’s sidebar.

Step 1 Log in to your Blogger Account and Go to your Blogger Dashboard

Step 2 Go to Blogger Layout section.

Step 3 Click on Add a Gadget then select HTML/JavaScript Gadget.

Step 4 Leave the Title field blank or write any desired title whatever you would like.

Step 5 And copy the script from below and paste the widget code in HTML/JavaScript Gadget and press the Save arrangement button from the top.

<style>
.vmenubox {
    width:85%;
    clear:both;
    display:block;
    float:left;
    padding:20px 30px;
    margin:0
}
.vmenubox {
    overflow:hidden
}

@media only screen and (max-width: 1140px){
.vmenubox {
    width: 86%;
}
}
@media only screen and (max-width: 1030px){
.vmenubox {
    width: 82% !important;
}
}
@media only screen and (max-width:767px){
.vmenubox {
    width: 80% !important;
}

</style>

<div class="vmenubox">
<center>
<p><a href="Label URL Here"><img src="Image URL Here" alt="Image Alt Title"></a></p>
<p><a href="Label URL Here"><img src="Image URL Here" alt="Image Alt Title"></a></p>
<p><a href="Label URL Here"><img src="Image URL Here" alt="Image Alt Title"></a></p>
<p><a href="Label URL Here"><img src="Image URL Here" alt="Image Alt Title"></a></p>
</center>
</div>

Customization

• Please replace the Label URL Here with your label or category’s URL.
• Please alter Image URL Here with hosted image URL.
• And replace Image Alt Title with image title. This will help to index image in image search engine.

Now check your Blogger site and see cool vertical navigation menu with background. Though I have added responsive Code so this widget will able to adopt any size according to device dimension. I think your blog readers will mainly focus on your menu if you can make a beautiful image for vertical menu. If you face any trouble then feel free to leave a comment below. Thank you.