Animated-Colored CSS Navigation Menu Buttons For Bloggers

CSS menu buttons are the most widely used buttons on web. You will see CSS buttons on every second site. The reason behind the popularity of these buttons is the simplicity of these buttons. Very easy to use and looks awesome on any website/blog. You can add hundred of new things manually in your buttons. Very easy to customize. Any one who now the basic knowledge can develop these buttons. Today we are sharing with you very beautiful and most used CSS buttons. Hope you will like these buttons. Let's see how to add these buttons.

Series on Navigation Menus

 Add Vertical Navigation Menu In Blog with Hover Stretching Effects (Published)

 Vertical Navigation Menu With Hover Fader and Animated Effects (Published)

 Animated-Colored CSS Navigation Menu Buttons For Bloggers  
(Current)

Adding CSS Navigation Menu Buttons

1. Go to blogger and open your dashboard.

(Backup your template before making any changes)

2. Now go to Templates==> Edit HTML==> Proceed .

3. Now search

4. Paste the below CSS code link file after .

<link href='https://sites.google.com/site/howdoblog/how-to-blog/buttons.css' media='all' rel='stylesheet'/>  
5. Now click on save template.

6. Now go to Layout==> Add a Gadget==> HTML/Javascript .

7. Paste the below code in empty box and save it.

<a class="button golden" href="#"> About US </a> <a class="button graphite" href="#"> Product </a> <a class="button mint" href="#"> Services </a> <a class="button white" href="#"> Technology </a> <a class="button turquoise" href="#"> Solutions </a> <a class="button emerald" href="#"> My Acount </a> <a class="button royalblue" href="#"> Store Locator </a> <a class="button silver" href="#"> Investor </a> <a class="button cyan" href="#"> Support </a> <a class="button cyan" href="#"> Contact US </a>

 8. Here is demo for you.

Live Demo

 Replace # and first link with URL of your pages.

Currently these colors are present in this collection. 

red, orange, woody, pink, graphite, turqoise, emerald, grass, blue, royalblue, brown, darkbrown, mint, grape, magenta, purple, darkgrey, silver, golden, black, white, cyan.

This is very easy method to add buttons in your post,in sidebar or you can use it for navigation menus. Previously we have shared two types of navigation menus and we have mention there that we will share 3rd type of navigation menu with you soon. we will keep sharing that type of buttons and menus with you in future. Keep visiting our blog and subscribe to get latest updates.

 Want To Add More Colors 

If you want to add more colors to these buttons you can manually add by yourself. You just need to download buttons.css file and to add the code of that color.  If you can't do it by yourself you can ask me. I will do it for you.  This is all for today. you can ask us for help. Have a Nice day.

Read More

Add Vertical Navigation Menu In Blog with Hover Stretching Effects

In previous Article I told you about Vertical Navigation Menu with hover fader and animated effects. In this Article i will tell you about another type of navigation menu having different colors and stretching effects. Its look very beautiful when you slide your mouse pointer on them. Add this into your blog i will ensure you it will give a very good impression to your visitors. This vertical menu is also designed by Uize and i make  possible to add it in blogger blogs. Now we are going to add it in blogger blogs. 

Series on Navigation Menus

 Add Vertical Navigation Menu In Blog with Hover Stretching Effects (Current)

 Vertical Navigation Menu With Hover Fader and Animated Effects (Published)

 Animated-Colored CSS Navigation Menu Buttons For Bloggers (Published)

Let's see how to add this.

Adding Vertical Navigation Menu with Hover and Stretching Effects

1. Go to your Blogger account. Backup your template.

2. Go to Templates==> Edit HTML==> Proceed.

3. Search for below code by pressing Ctrl+F.

]]></b:skin>

4. Copy below code and paste it just above ]]>.

.menus { position:relative; float:left; width:259px; height:219px; } .menu { position:absolute; right:0; } .menuLink { font-size:10px; display:block; position:relative; width:150px; margin-left:auto; padding:4px 7px; text-transform:uppercase; text-align:left; letter-spacing:3px; } .menuLink, .menuLink:link, .menuLink:visited,.menuLink:hover, .menuLink:active { color:#000; border:none; border-right:5px solid #000; margin-bottom:1px; text-decoration:none; } .menuLink div.highlight { position:absolute; width:100%; height:50%; background:#fff; left:0; top:0; right:.05; opacity-radius:10; opacity:.3; filter:alpha(opacity=10); } .programmaticInterface { float:right; width:200px; margin-top:0; }

5. Click on save template.

6. Now go to Layout==> Add a Gadget==> HTML/Javascript and copy paste the below code.

<script type="text/javascript"> Uize.module ({ required:[ 'UizeDotCom.Page.Example.library', 'UizeDotCom.Page.Example', // these curve modules are only needed for the additional effects previews 'Uize.Curve', 'Uize.Curve.Rubber', 'Uize.Curve.Mod' ], builder:function () { (window.page = UizeDotCom.Page.Example ({evaluator:function (code) {eval (code)}})).wireUi (); } }); </script> <div style="width:700px; margin:auto;"> <div class="menus"> <div class="menu"> <a href="URL of Page" class="menuLink" style="background:#A4059F;"><div class="highlight"> </div> About Us</a> <a href="URL of Page" class="menuLink" style="background:#05A487;"><div class="highlight"> </div> Products</a> <a href="URL of Page" class="menuLink" style="background:#eb3;"><div class="highlight"> </div> Services</a> <a href="URL of Page" class="menuLink" style="background:#9c7;"><div class="highlight"> </div> Technology</a> <a href="URL of Page" class="menuLink" style="background:#f96;"><div class="highlight"> </div> Solutions</a> <a href="URL of Page" class="menuLink" style="background:#c6f;"><div class="highlight"> </div> My Account</a> <a href="URL of Page" class="menuLink" style="background:#86f;"><div class="highlight"> </div> Store Locator</a> <a href="URL of Page" class="menuLink" style="background:#f4c;"><div class="highlight"> </div> Investors</a> <a href="URL of Page" class="menuLink" style="background:#f88;"><div class="highlight"> </div> Support</a> <a href="URL of Page" class="menuLink" style="background:#79f;"><div class="highlight"> </div> Contact Us</a> </div> <script type="text/javascript"> window.$page_menuHoverFader = { widgetClass:'Uize.Widget.HoverFader', nodes:{className:/\bmenuLink\b/}, defaultStyle:{width:150,letterSpacing:2,borderRightColor:'0'}, hoverStyle:{width:240,letterSpacing:9,borderRightColor:'f'} }; </script></div> </div>

7. Replace "URL of Page" with your URL and also you can change the name by replacing each of them. 

8. You can also change color of each button by replacing style="background:#xxx;" this number.  Colors are in HEX. 

Visit Custom Color Code Generator to select your favourite color.

Demo Version

This is all for today. I hope you will like this Navigation Menu and give me feedback on my work. Get subscribe to remain update. Have a Nice Day.

Read More

Vertical Navigation Menu With Hover Fader and Animated Effects

Navigation menus are the most attracting part of any blog or website. The more beautifully they looked more people satisfied with you blog/website. I can say that navigation menus put's first impression on your readers and we know that first impression is the last impression. So for your beautiful blog you need a beautiful navigation menu also. So today i am presenting you a UZIE created navigation menu. I have arranged things and make it compatible with blogger. So here is the required procedure to add this beautiful menu in your blog.

Click Here to See Demo Version

Let's see step by step procedure.

 Series On Navigation Menu

 Add Vertical Navigation Menu In Blog with Hover Stretching Effects (Published)

 Vertical Navigation Menu With Hover Fader and Animated Effects (Current)

 Animated-Colored CSS Navigation Menu Buttons For Bloggers (Published)

Add Navigation Menu with Animated Hover Effect

1. Go to Blogger account and select your blog.

2. Back up your template and save it somewhere in your computer.

3. Go to Templates==>Edit HTML==> Proceed and search for this Line(For search Press Ctrl+F).

]]></b:skin>

4. Copy the below code and pate it above this line.

#page_paramsInspector-shell .tabShell { width:480px; } #page_paramsInspector-shell .tabShell { width:480px; } #page_paramsInspector_settings { width:400px; height:286px; font-size:12px; } #page_paramsInspector_preview { width:466px; } .menuLinks { position:relative; width:200px; background:#364040; padding:10px; padding-bottom:5px; } .menuLink, .menuLink:link, .menuLink:visited, .menuLink:hover, .menuLink:active { display:block; font-size:12px; text-transform:uppercase; font-weight:bold; text-align:center; letter-spacing:4px; color:#bbb; background:#000; border:2px solid #000; width:182px; padding:5px 7px; margin-bottom:5px; text-decoration:none; overflow:hidden; }

5. Now Search for this tag.

  <head>

Copy the below line and paste it just below the head tag.

<script src='https://dl.dropbox.com/u/24344387/How%20Do%20Blog/UIZE-JavaScript-Framework/js/Uize.js' type='text/javascript'/>

6. Now save the template.

7. Now go to Layout==> Add a Gadget==> HTML/Javascript.

Paste the below code in it and save it.

<script type="text/javascript"> Uize.module ({ required:[ 'UizeDotCom.Page.Example.library', 'UizeDotCom.Page.Example', 'Uize.Widget.HoverFader', 'Uize.Curve.Rubber', 'Uize.Fx.xShadows' ], builder:function () { /*** create the example page widget ***/ var page = window.page = UizeDotCom.Page.Example (); /*** create the hover fader instance ***/ page.addChild ( 'hoverFader', Uize.Widget.HoverFader, { nodes:{className:/\bmenuLink\b/}, defaultStyle:{marginLeft:0,marginTop:0, color:'f',borderColor:'#9F9797', backgroundColor:'044', textShadow:'-3 0 3 #0,3 0 3 #0,#0ff -30 0 .5em,#0ff 30 0 .5em,#0f0 -20 0 1em,#0f0 20 0 1em' }, hoverStyle:{marginLeft:5,marginTop:5,borderColor:'0', color:'8', backgroundColor:'000', textShadow:'0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em' }, fadeIn:{duration:350}, fadeOut:{duration:1000} } ); /*** wire up the page widget ***/ page.wireUi (); } }); </script> <table border="0" cellspacing="0" cellpadding="4" style="margin:auto;"> <tr valign="top"> <td> <div class="menuWorkspace darkInsetBackgroundColor"> <div class="menuLinkShell" style="left:20px; top:0px;"> <a href="PAGE URL" class="menuLink" style=" textShadow:0 0 3 #0,0 0 3 #0,#0 0 0 .5em,#0 0 0 .5em,#0 -30 0 1em,#0 30 0 1em;">About Us</a> </div> <div class="menuLinkShell" style="left:77px; top:93px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Products</a> </div> <div class="menuLinkShell" style="left:176px; top:17px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Services</a> </div> <div class="menuLinkShell" style="left:232px; top:158px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Technology</a> </div> <div class="menuLinkShell" style="left:319px; top:-8px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Solutions</a> </div> <div class="menuLinkShell" style="left:390px; top:73px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">My Account</a> </div> <div class="menuLinkShell" style="left:506px; top:-3px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Store Locator</a> </div> <div class="menuLinkShell" style="left:559px; top:90px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Investors</a> </div> <div class="menuLinkShell" style="left:42px; top:176px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Support</a> </div> <div class="menuLinkShell" style="left:447px; top:176px;"> <a href="PAGE URL" class="menuLink" style="background:#0;">Contact Us</a> </div> </div> </td> <td id="page_paramsInspector-shell"></td> </tr> </table>

8. Replace YOUR PAGE URL with link to your page or post.

To see your Navigation Menu live click to view your blog. It's an awesome navigation menu.

If you want any customization just change the changer Hover and Default Style in HTML/JavaScript Section.

If you still face any problem do mention in comments. I will appreciate your valueable feedbacks. Have a Nice Day.

Read More