Stylish picture type Navigation Menu for Gadget blogs in html and CSS |Blog Tutorial Tips and Tools

How about getting a picture type navigation menu for your blog. It seems something special. Yes we have made an exciting picture type navigation menu for your gadget blog. The pictures are arranged in the form of image sprites. So the loading speed of the page will also increase with the picture type navigation window which we are providing. We have done coding exclusively in html and css.

Picture Navigation Menu- Installation Procedure

1. Go to your template and click "edit html".
2. Find the code ]]></b:skin>.
3. Then paste the following CSS code in your template just before the above code.

#navbar
 {
  margin:0;
  padding:0;
 }
 #navbar ul
 {
  
  height: 80px;
  border-left: 1px;
  border-right: 1px;
  float:left;
 }
 #navbar li
 {   
  list-style: none;
  float: left;
  height: 79px;
  
 }
 #navbar a
 {
  height:75px;
  display: block;
  color: #FFFF00 ;
  text-align:center;
  text-decoration:none;
  opacity: 0;
  text-transform: uppercase;
  font-weight: bold;
 }
 #navbar a:hover
 {
  opacity: 1;
 }
 #home 
 {
  height:63px;
  width:75px;
  background:url(http://img254.imageshack.us/img254/9818/93755714.png)0px 0px;
  background-repeat: no-repeat;
 }
 #windows 
 {
  height:63px;
  width:80px;
  left:130px;
  background:url(http://img254.imageshack.us/img254/9818/93755714.png) -88px 0px;
  background-repeat: no-repeat;
 }
 #android
 {
  height:63px;
  width:75px;
  left:200px;
  background:url(http://img254.imageshack.us/img254/9818/93755714.png) -158px 0px;
  background-repeat: no-repeat;
 }
 #budget
 {
  height:63px;
  width:75px;
  left:300px;
  background:url(http://img254.imageshack.us/img254/9818/93755714.png) -235px 0px;
  background-repeat: no-repeat;
 }
 #laptops
 {
  height:63px;
  width:75px;
  left:400px;
  background:url(http://img254.imageshack.us/img254/9818/93755714.png) -325px 0px;
  background-repeat: no-repeat;
 }

4. Now go to your layout page and click "Add a Gadget" and select "HTML/JavaScript".
5. Paste the following html code in that window.

<ul id="navbar">
  <li id="home"><a href="LINK1">Tablet PC</a></li>
  <li id="windows"><a href="LINK 2">Windows Phone</a></li>
  <li id="android"><a href="LINK 3">Android Phone</a></li>
  <li id="budget"><a href="LINK 4">Budget Phone</a></li>
  <li id="laptops"><a href="LINK 5">Laptops</a></li>
  
 </ul>

6. Now click save and you can see your stylish and beautiful navigation bar in your blog.

How to customize the Picture Navigation Menu

It is easy to customize the professional navigation menu. You can see "link1", "Link 2" etc. in the html codes. Replace these links with the links which you need in navigation menu. That's all and you will find the customized menu in your blog.

For live demo visit Picture Navigation Menu Demo

Say your need and we are happy to help you

We know that these design will not suit all your blogs. Some will need different pictures and some other need different shapes. We cannot make a navigation menu which is suited in all blogs. But we are happy to serve you. If you need menu with different picture feel free to ask us. Be descriptive while telling your needs so that we can easily understand what your desire is. Also mail the pictures to us so that we can easily process your request. If anyone put this navigation menu in your blog, please provide the link of your blog below. If you have any extra needs you are welcomed to ask us.

Thanks.

Stylish picture type Navigation Menu for Gadget blogs in html and CSS

Picture Navigation Menu- Installation Procedure

How to customize the Picture Navigation Menu

About author

1 comments

Leave a Reply

Like us on Facebook

Join us on Google Plus

Blogroll

Stylish picture type Navigation Menu for Gadget blogs in html and CSS

Picture Navigation Menu- Installation Procedure

How to customize the Picture Navigation Menu

About author

1 comments

Leave a Reply

Like us on Facebook

Join us on Google Plus

Blogroll

Follow Blog Guru on Facebook and Google Plus and Get Exclusive Blog Tips and Tricks▼

Follow Blog Guru on Facebook and Google Plus and Get Exclusive Blog Tips and Tricks
▼