MatrixAdapt | Logiciel de gestion d'Entreprise, Création et référencement des sites web

Navigation menu ,one of the most important gadget in blog . Navigation menu help to you access your blog category pages, and your blog readers can easy to access your category pages. So now we going to show you how to add stylish animated navigation menu to blogger/blogspot. This navigation menu make your blog attractive and stylish blog.

Features:
1. Simple and very easy to add
2. Menu with mouse hover effect and awesome look
3. Easy to add Links and use.

How To Add Navigation Menu To Blogger/Blogspot

1. Go to Blogger Dashboard by click here >Design >Edit HTML
2. Copy the below code and paste before </head>

<style type='text/css'>

ul#topnav {

margin: 10px 0 20px;

padding: 0;

list-style: none;

font-size: 1.1em;

clear: both;

float: left;

width: 99%;

}

ul#topnav li{

margin: 0;

padding: 0;

overflow: hidden;

float: left;

height:40px;

}

ul#topnav a, ul#topnav span {

padding: 10px 20px;

float: left;

text-decoration: none;

color: #fff;

text-transform: uppercase;

clear: both;

height: 20px;

line-height: 20px;

background: #1d1d1d;

}

ul#topnav a { color: #7bc441; }

ul#topnav span {

display: none;

}

ul#topnav.v2 span{

background: url(http://www.matrixar.com/-xetJCZiUcK0/Tr_P_XRAYQI/AAAAAAAAA8s/CU-sNjhUS2E/s1600/menu-bg-b-w.png) repeat-x left top;

}

ul#topnav.v2 a{

color: #555;

background: url(http://www.matrixar.com/-xetJCZiUcK0/Tr_P_XRAYQI/AAAAAAAAA8s/CU-sNjhUS2E/s1600/menu-bg-b-w.png) repeat-x left bottom;

}

</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js' type='text/javascript'/>

<script type='text/javascript'>

$(document).ready(function() {

$(&quot;#topnav li&quot;).prepend(&quot;<span/>&quot;); //Throws an empty span tag right before the a tag

$(&quot;#topnav li&quot;).each(function() { //For each list item...

var linkText = $(this).find(&quot;a&quot;).html(); //Find the text inside of the a tag

$(this).find(&quot;span&quot;).show().html(linkText); //Add the text in the span tag

});

$(&quot;#topnav li&quot;).hover(function() { //On hover...

$(this).find(&quot;span&quot;).stop().animate({

marginTop: &quot;-40&quot; //Find the span tag and move it up 40 pixels

}, 250);

} , function() { //On hover out...

$(this).find(&quot;span&quot;).stop().animate({

marginTop: &quot;0&quot; //Move the span back to its original state (0px)

}, 250);

});

});

</script>

4. Then click SAVE TEMPLATE

5. Once again go to Design tab >Page Elements >Add Gadget > HTML/Java Script

Important :- Replace # with your Link and change title your wish.. Save it

Share and Enjoy!

Popup windows are a very useful feature for websites. They can help you to give prominence to something on your site that your user may not see otherwise. Maybe you want them to subscribe to your newsletter, or you are linking to another site and you want that your visitors stay on your site while visiting the other, then you use a popup window.

Popup windows are called with the window.open method. This method accepts three arguments; the url to open in the new window, the name of the window, and a string with the window properties separated by comas. Lets see an example:

<script language=”JavaScript”>
window.open(‘http://www.yahoo.com/’, ‘mywindow’, ‘width=500,height=300,’)
</script>

on the above example http://www.yahoo.com is the page we want to visit; mywindow the name of the window to host the url; and width=500,height=300 is the desired dimension of the window. Note that if you open several windows with the name mywindow, each page will be added on the same window one after the other. Some useful values that can be placed on the name argument are _blank (which opens a blank window; and _self which opens the page on the window thatis calling it. Note also that if you don’t specify any url an empty window will be opened.

The following table list the properties that can be defined:

You can open a new window after a user takes an action on your site, like clicking on a link. Check the following example.

<html>
<body>

<script language=”JavaScript”>
function popup()
{
window.open(‘http://www.yahoo.com’, ‘mywindow’, ‘width=400,height=200,scrollbars=yes,resizable=yes’)
}
</script>
<A HREF=“http://www.google.com” onClick=“return popup()”>Popup example</A>

</body>
</html>

What we have done in the above example is to attach our popup code to a function.

The function is called whenever someone clicks on the link by using the onClick event of the link. 2013, By: Seo Master