Live MeccaLive Blogger Tricks

Tuesday 1 April 2014

Add an Outstanding Navigation Menu to blogger With Flashy Effect

How to Create and Add Navigation Css3 Menu to Blogspot blog,Wordpress or any other website.This css3 menu is required to a web designer to make your website more stylish. There are many blogger looking for this type of Menus with effects(may be). I will be sharing with you a simple and easy tutorial to add this menu in your website and enjoy an awesome flame or flashy effects, which will give your readers an outstanding menu. This menu is Created With Css3. This is not a drop down menu, but it's simply awesome. This awesome menu is created by CSS & HTML.
Add an Outstanding Navigation Menu to blogger With Flashy Effect




Something about this Css3 Menu
This menu colour is normally gray, when someone takes mouse on it it changes it colour to Light Blue and then it changes to dark blue color Very Fast. whenever you takes your mouse point on it, it takes very less time to change it's colour to Dark blue, with a flashy effects, which really attracts me, and in sha Allah you will also like it. This is one of my favourite menu.


Whats the use of menuWhy using menu ? Menu is an easiest way to keep your visitor's touched with your website. We can use various techniques to increase our Pageviews. Use your most interesting or popular post or page links in this navigation menu to attract your visitor's.

How to Create this Menu
This part is really interesting and you will learn the use CSS and Html. So when you click the Link for the Menu, Where you will find 2 codes HTML & CSS, Now open a Notepad and paste the bleow codes.

CLICK HERE FOR CODE


<style>PLACE CSS CODE HERE </STYLE>                                   PLACE HTML CODE HERE


HOW TO ADD THIS NAVIGATION IN YOUR BLOG
Now you have the menu codes, after you have followed the avobe steps. Now time to add this in your website. There are several ways to add this menu in your Blog. 

  • 1st way: Go to Blogger > Layout > Add a gadget > HTML/JAVASCRIPT  and ADD all the codes and save,

note : Select Add a gadet where you want your menu to appear, which is basically below header.

  • 2nd way: Go to Blogger > Template > Edit Html and search for                                                                                                          <div id='header-wrapper'> or <div id='outer-wrapper'>        and paste the Menu codes just AFTER any of the above codes.

NOW SAVE YOUR TEMPLATE ||| IN SHA ALLAH it will work.

By default it will display 3 section in the menu, if you want to display more then simply add this in the HTML codes.
<li><a href="#">First Item</a>
</li>

If you still face any problem. Let me know, comment below.


Posted by:
has written 0 awesome articles for MyBloggerLab.

No comments:

Post a Comment