Announcement:

  Hello, We Are Now Designing Blogger Awesome Template. Check Out At Netzspot.Blogspot.

Sunday, February 24, 2013

HTML-CSS Stylish Page Navigation Bar For Blog & Website

This Article Was Live On: Sunday, February 24, 2013 And Till Now Have10 comments.
HTML-CSS Stylish Page Navigation Bar For Blog & Website

Here We Have Simple But Stylish Pure HTML-CSS-Kit Cool Color Hover With Curve Corner Links Page Navigation Bar Having jQuery Effect Without JAVASCRIPT/jQuery File Or Code. We are comeback with another simple Navigation menu made up of CSS3 with additional effects using CSS3 Transition property. CSS Transitions make, powerful effect without the use of JavaScript for many common effects. Sometimes you want to add an additional navigational bar on to your website or blog, but many template and themes only support one menu. In my case the SEO hatch blog has a vertical menu which we use for our post categories, but I wanted to add a small additional menu for consulting inquiries without cluttering the main menu. This menu perfectly work only on some browser such as Chrome, Firefox, and Safari. Here we using simple CSS only.


Features:

1.) Color Background With Color Hover.
2.) Slow Motion Hover In And Out.
3.) Curve Corner Links.
4.) J-Query Effect Without JAVASCRIPT File.
5.) Easy To Install And Quick To Load.

How To Add In Blogspot?

1.) Go To Your www.blogger.com
2.) Open Your Desire Blog.
3.) Go To "Layout".
4.) Click "Add A Gadget" Where You Want To Add It.
5.) Now Scroll To "HTML-JAVASCRIPT"
6.) Click "+" Icon To Add It.
7.) Now Copy The Below Code And Paste It To There.
8.) Leave The Title Empty.
9.) Click Save, Now You Are Done.

How To Add In Website?

1.) Just Go To Your HTML File.
2.) Now Copy The Below Code And Paste It Between <body> </body>.
3.) Save It, Now You Are Done.


<style>
#exenavmenu {
float: left;
font: bold 13px Arial, Helvetica, Sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
overflow: hidden;
}
#exenavmenu ul {
margin:0;
padding:0;
list-style:none;
}
#exenavmenu ul li {
float:left;
}
#exenavmenu ul li a {
float: left;
color:#000;
padding: 10px 15px;
text-decoration:none;
background:#ff9d36; -webkit-transition: all 1s linear;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px px 1px rgba(0,0,0,0.4);
}
#exenavmenu ul li a:hover {
color: #fff; -webkit-transition: all 1s linear;
background:#220077; -webkit-transition: all 1s linear;
}
</style>
<div id="exenavmenu">
<ul>
<li><a href="##########">Home</a></li>
<li><a href="########## ">About Us</a></li>
<li><a href="########## ">Contact Us</a></li>
<li><a href="########## ">Tutorial</a></li>
<li><a href="########## ">Information</a></li>
<li><a href="########## ">Utilites</a></li>
<li><a href="########## ">Download New</a></li>
<li><a href="########## ">Feedback</a></li>
</ul>
</div>

Customization:

1.) Change Red Text With Your Link Name.
2.) Change Blue Hash With Your Links.
3.) Save And Enjoy.

You Like It, Please Share This Article Using...




Don't Forget To Read This Also...



10 comments :

  1. If anyone is looking for a cool top navigation component with drop-down menu, I found a nice one. It is responsive design, uses HTML5 and CSS3 and is black and grey gradient. Here is the link for you to check it out.

    http://templatz.co/navigation.php

    ReplyDelete
  2. Stylish navigation bar....

    Thanks for sharing !!

    ReplyDelete
  3. Please help me i want to change my background color to fully black
    But,......
    Error is coming and not a single theme is applying.....
    Main colour theme
    Not applicable for this template.
    Please Help...........

    ReplyDelete
    Replies
    1. Can I See Your Blog? Please Leave Your Blog URL To Have A Vew On That.

      Delete
  4. Replies
    1. Edit Your Blog Template, Find The Below Code...

      background: #000000 url(http://themes.googleusercontent.com/image?id=19aLMMHI-WXcxsojpERe8MlodYlS7yd1qQU1wcTStU21I3bbY7bmlrvVCWE474_XXwWjd) no-repeat scroll top center /* Credit: fpm (http://www.istockphoto.com/googleimages.php?id=2849344&platform=blogger) */;

      Change It With

      background-color: #000000;

      Delete
  5. u are master of blogger......
    The King......

    ReplyDelete

Speak Your Mind:



Please Read The Rules Before Commenting:-

1.) Your feedback is always appreciated. We will try to reply to your queries as soon as time allows.
2.) Make sure to click the "Notify me" link below the comment to be notified of follow up comments and replies.
3.) Please "Do Not Spam".
4.) Please "Do Not Add Links" to the body of your comment as they will not be published. If the quires contain link then never add HTML tag to it.
5.) Only "English" comments shall be approved and answered.
6.) If you have a problem check first the comments, maybe you will find the solution there.
7.) Your comments must contain 100+ characters to remain accepted.
8.) Never Use Keywords In The Name Section Otherwise Your Comment Will Be Deleted.
9.) All comment will be deleted if it will not fulfil the requirements.