2009/05/18

Colorful Fast Menu stock

Hello hello , how do you feel when you see the screen shot above? I guess you feel amazing and want to get it now for your little blog.They are so nice , so lovely , so beautiful, so colorful and so...on.
Please calm down, because Zen is here to make you proud of your blog by these!

These blocks are from e-lusion.com and the developer is Ian Main.Thank you very much for sharing.
These kinds of menu are simple CSS menu, so you won't be crazy when adding it,trust me about it.

Now are you ready ? Let's do it.I will guide you how to create in 2 ways,this is 1st part:
*First you have to do is download this file ( No virus-tested by Zen) : Here
That's the complete set of all menu styles, download it then look at the next step.That file contains the images which you have to upload them to your favorite host later.

*It's time for you to choose now :

Menu 1:
Add this CSS code before your ]]></b:skin> tag:

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu One]-=-=-=-=-=-=-=- */

#menu {
width: 200px;
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu li a:link, #menu li a:visited {
color: #5E7830;
display: block;
background: url(images/menu1.gif);
padding: 8px 0 0 10px;
}

#menu li a:hover {
color: #26370A;
background: url(images/menu1.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu li a:active {
color: #26370A;
background: url(images/menu1.gif) 0 -64px;
padding: 8px 0 0 10px;
}


Then create a HTML/JavaScript and add this code:

<div id="menu">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a>

<li><a href="#4" title="Portfolio">Portfolio</a>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu1.zip" title="Download">Download Menu</a></li>
</ul>
</div>


Menu 2:

Add this CSS code before your ]]></b:skin> tag

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu Two]-=-=-=-=-=-=-=- */

#menu2 {
width: 200px;
border-style: solid solid none solid;
border-color: #677D92;
border-size: 1px;
border-width: 1px;
margin: 10px;
}

#menu2 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu2 li a:link, #menu2 li a:visited {
color: #fff;
display: block;
background: url(images/menu2.gif);
padding: 8px 0 0 10px;
}

#menu2 li a:hover {
color: #283A50;
background: url(images/menu2.gif) 0 -32px;
padding: 8px 0 0 10px;
}

#menu2 li a:active {
color: #283A50;
background: url(images/menu2.gif) 0 -64px;
padding: 8px 0 0 10px;
}


Then create a HTML/JavaScript and add this code:

<div id="menu2">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a>

<li><a href="#4" title="Portfolio">Portfolio</a>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu1.zip" title="Download">Download Menu</a></li>
</ul>
</div>


Menu 3:

Add this CSS code before your ]]></b:skin> tag

body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
}

ul {
list-style: none;
margin: 0;
padding: 0;
}

/* =-=-=-=-=-=-=-[Menu Three]-=-=-=-=-=-=-=- */

#menu3 {
width: 200px;
border: 1px solid #ccc;
margin: 10px;
}

#menu3 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}

#menu3 li a:link, #menu3 li a:visited {
color: #888;
display: block;
background: url(images/menu3.gif);
padding: 8px 0 0 30px;
}

#menu3 li a:hover, #menu3 li a:active {
color: #283A50;
background: url(images/menu3.gif) 0 -32px;
padding: 8px 0 0 30px;
}



Then create a HTML/JavaScript and add this code:

<div id="menu3">
<ul>
<li><a href="#1" title="Home">Home</a></li>
<li><a href="#2" title="About">About</a></li>
<li><a href="#3" title="Services">Services</a>

<li><a href="#4" title="Portfolio">Portfolio</a>
<li><a href="#5" title="Store">Store</a></li>
<li><a href="menu1.zip" title="Download">Download Menu</a></li>
</ul>
</div>


And the other styles are the same ,just follow the ways to add code above, you can make the menu bar with style 4,5,6,7,8 and 9.I just shown you 3 example menu stocks.

Note and Important :
Please notice the red code and green code!

-The red code is the images of each style,these image you can find in the file you have just downloaded at the beginning, you have to upload the images which is compatible with the right menu stock, get the direct URL to the image and paste into the red code.

-The green code is the name of the widget, all have to be 1 name,1 id widget, if you want to use the 7th menu block, but the div id is 3 , it will not work.

*This is the 2nd part for who doesn't want to download the full file.It's better you should download each style of menu , it has 2 files for each style, it will easily for you to make.To view how each style looks, click here.
Menu 1
Menu 2
Menu 3
Menu 4
Menu 5
Menu 6
Menu 7
Menu 8
Menu 9

When you download each file, you will see 2 files in the zip:imgage and index.html
Click on the file index/html , when the page is loaded, press Ctrl-U to view the source, you will see the place where you have to put the CSS code and the widget from here to your blog source.(Notice the special tag such as </head> , </body>...)

Next click on the image file,upload that image to your favorite image host and get the direct link, paste that image URL to the necessary place.(Notice the code has this line : background: url(images/menu3.gif) 0 -32px;,the red code is the menu style image URL).

That's all, Save and join, share your friends if you like but please offer me a back link as a thank.
Thanks much guys and I hope you will like this tip.
Follow me and Subscribe me now to view more interesting tips.I can change whole your blog.
Zen


Requirements :CSS
Website : www.zenplate.blogspot.com
Bring to BLogger : Zenplate

6 comments:

Matt said...

Wow that is a very good and useful tip. I used to think menus were incompatible with using Blogger, but I see you have a smoothly running menu with blogger. You clearly explain how to add one of these menus. Once added, will it automatically generate new pages? A page for about me, services, etc. I should probably download the software. I am definitely interested in this.

vuluganck said...

Of course it will load a new page, but I dont use it right now, I am waiting for July

vuluganck said...

There is no software here , all I have converted and make it run on blogger.

midfielder1234 said...

The article is very well written and the instructions are easy to follow. I might need to download these and put them on my blog to create more organization. I am shocked that you were able to convert these menus to blogger. Usually they only work on Word Press. Thank you so much for converting these and letting us be able to add them to blogger.

!i! KSAK !i! said...

how can i get menu navigation menu like yours
i try to make one but it got a problem will u help me to solve it

http://test-blog-2000.blogspot.com/

vuluganck said...

@!i! KSAK !i!

Don't worry I will publish 1 new menu with multiple subs for you soon.Keep joining these tips 1st and remember to watch the next tips.

Post a Comment

Thanks for reading , if you have any problem please leave me a comment here I will help you by my best.Please note that you put the friendly words tohelp each other to improving and developing these tips to be better,or the best way for you to track my blog is subscribing my Feed.You are always welcome on Zenplate.
Best regard
Zen

 
.