Vertical Navigation Menu Using Background Image in Blogger
How to Add cool vertical Menu with Background image on Blogger Sidebar?
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.
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.
4 comments
Can U Please Help Me .
THANKS
:as
b