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.
Vertical Navigation Menu Using Background Image in Blogger
BloggerSpice

Contact Form
Let's Connect
Trending
- How to Float 2 Wide Skyscraper Ad banner on Left and Right Side?
- How to Make YouTube Video Responsive in Blogger Site?
- How to Submit Website to DMOZ (The Open Directory Project)?
- Float AdSense and other Ads on left or right side of your Blog
- 15 Hot SEO Google Chrome Extensions for Website SEO Analysis and Audit
- How to Add 2-Step Verification in Google Account?
- 6 Killer Tips on How to Get More Views on YouTube for Free
- How to Fix Bengali Font Problem in Google Chrome Browser?
- How to add Google progress scrollbar on top of your BlogSpot page?
- The Insider's Guide to Generate Your Blog Traffic by 110%
Sir,I Have A Problem That Few Months Back I Have Approved Adsense Account From YouTube and From Blogger When I Sign Up From EARNING Tab and Placed Ads Using Adsense Widgets Then It Shows Blank Area.No Ads Were Shown There in Blog.
Can U Please Help Me .
THANKS
Hi Shan, According to Google AdSense you won't able to use hosted Adsense account. You are allowed to use ads only in YouTube not in Blogger site. Because your Adsense account is hosted. For using Blogger site you need to take approval again. This is new rules of Google Adsense.
:as
b
So,Sir Can You Tell Me Now That How Can I Take Approval For My Blog From My Existing Adsense Account .
Hi Shan Please visit https://www.google.com/adsense/start/ and hit the SIGN UP NOW button for applying AdSense. but before that your site must be ready. Please visit below link and follow the tutorial
http://www.bloggerspice.com/2015/11/How-to-get-Adsense-Account-approval-fast-for-BlogSpot-blog-within-4-days.html
Thank You.
:-bd