Adding Horizontal linkbar below blog header

ADDING HORIZONTAL LINK BAR BELOW HEADER There are quite a few tutorials for how to add horizontal link bar below header. As a beginner It was complicated to me when  I  found common sentences  from max tutorial site  like  “ Find the code that says </b:skin>” and insert this code ,,save your template and so on.”.. Don’t take any risk this way. Here In my tutorial  you will find very easy way to add linkbar below header and you can add more link any time you want. You don’t have to paste code again and again. Image of horizontal linkbar Step1.Copy the code. Step2. See the result of the code . (PASTE CODE HERE AND SEE RESULT ) Step3. Put  one of  your url address and write your text  in the code that you want to add. Step4. Again Copy it Now you are ready to apply. Sign into your blog account> Click on layout>add a gadget>paste code>click on rich text>save. CLICK ON "HIGHLIGHT ALL"AND COPY THE CODE   <ul id="topnav" class="v2"> <style type='text/css'> ul#topnav { margin: 0px 0 0px; padding: 0; list-style: none; font-size: 1.1em; clear: both; float: left; width: 60%; } ul#topnav li{ margin: 0; padding: 0; overflow: hidden; float: left; height:30px; } ul#topnav a, ul#topnav span { padding: 8px 10px; float: left; text-decoration: none; color: #fff; text-transform: uppercase; clear: both; height: 15px; line-height: 15px; background: #1d1d1d; } ul#topnav a { color: #7bc441; } ul#topnav span { display: none; } ul#topnav.v2 span{ background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJbfMsRCeYJL7ATAXPbK7adgkKCMlQksv7brKXceOnkbZwZQ5NdR_ApPTQfKSIYsoUBYGL-dUXg5k1140dViQsqSD-SslouCzHtB4n7isFMvSuj4OhssCQlip95hyytTfKoXR7flQFGDQ/) repeat-x left top; } ul#topnav.v2 a{ color: #555; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJbfMsRCeYJL7ATAXPbK7adgkKCMlQksv7brKXceOnkbZwZQ5NdR_ApPTQfKSIYsoUBYGL-dUXg5k1140dViQsqSD-SslouCzHtB4n7isFMvSuj4OhssCQlip95hyytTfKoXR7flQFGDQ/) 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() { $("#topnav li").prepend("<span/>"); //Throws an empty span tag right before the a tag $("#topnav li").each(function() { //For each list item... var linkText = $(this).find("a").html(); //Find the text inside of the a tag $(this).find("span").show().html(linkText); //Add the text in the span tag }); $("#topnav li").hover(function() { //On hover... $(this).find("span").stop().animate({ marginTop: "-40" //Find the span tag and move it up 40 pixels }, 230); } , function() { //On hover out... $(this).find("span").stop().animate({ marginTop: "0" //Move the span back to its original state (0px) }, 230); }); }); </script> <li><a href="PUT YOUR URL ADDRESS HERE">WRITE YOUR TEXT RELATED TO YOUR LINK</a></li> </ul> <br /> <br /></div>   Note: If you want to add more link just press enter after clicking “rich text”> write your text first>select the text>click on create link..>put another  link>save