Vertical Navigation Menu Using Background Image in Blogger

How to Add cool vertical Menu with Background image on Blogger Sidebar?

4
data:blog.title
navigation friendly

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.


vertical menu

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
4 Stars stars - "Vertical Navigation Menu Using Background Image in Blogger" This is really important to make our website navigation friendly. A good navigation affects th...

Post a Comment

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

Facebook Group Community Disqus Channel Code ConverterHide Code Converter Show EmoticonHide Emoticon

Got questions? Ask ’em below! While we’re here, you might like to give any feedback about this Post, Your comment inspire us to continuous Improvement of This Blog and Contents. Your words are your own, so be nice and helpful if you can. Please, only use your REAL NAME, not your business name or keywords. Using business name or keywords instead of your real name will lead to the comment being deleted. Anonymous commenting is not allowed either. Limit the amount of links submitted in your comment. We accept clean XHTML in comments, but don't overdo it please.

Make sure you tick the Notify Me box below the comment form to be notified of follow up comments and replies. Thank you for commenting

Contact Form

Name

Email *

Message *