Skip to main content

HOW TO ADD A HORIZONTAL MENUBAR ON BLOGGER

 



   A Menu bar is very useful  feature ,which makes the blog more effective and attractive.

This touturial  will help you to make a attaractive menubar as shown above.

STEP 1 :  "SIGN IN " into your blog.

STEP 2 :  the dash board will appear after signing in . click on "template"  > "edit html"


   

STEP 3 :  now the html editor will be apear . move the cursor in    box and press " ctrl+F " > 

                                    a  search box will apear in   editor box

STEP 4 :  In the search box copy paste : ]]>   </b:skin> 

                            and hit enter, the term will apear click on dots(...) 
STEP 5: after clicking on ...(dots) a long css code will appear . move 
                         cursor down untill u find   "]]>   </b:skin> ".

STEP 6 : now paste the css code given below just above 

                    "]]> < /b:skin>"

/******************from here*******/
         nav{
 display:block;
 width:1000px;
 height:50px;
background:#d50000;
background-image: -webkit-gradient(
 linear,
 left bottom,
 left top,
 color-stop(0.5, rgb(213,0,0)),
 color-stop(0.51, rgb(221,49,49)),
 color-stop(1, rgb(234,130,130))
);
background-image: -moz-linear-gradient(
 center bottom,
 rgb(213,0,0) 50%,
 rgb(221,49,49) 51%,
 rgb(234,130,130) 100%);

-moz-border-radius: 8px;
border-radius: 8px;

border:#c30000 1px solid;
}
nav ul{
 display:block;
 width:998px;
 height:48px;
 -moz-border-radius: 8px;
 border-radius: 8px;
 border:#ffb2b2 1px solid;
 margin:0px;
 padding:0px;s
}
nav ul li{
 display:inline;
 margin:10px;
 padding:10px;
}
nav a{ display:block; float:left;
padding:0px 19px;
line-height:4em;
font-family:Verdana, Geneva, sans-serif;
color:white;
font-size:.73em;
text-decoration:none;
}
nav a:hover{color:#ffb2b2;}
                                 
/*********till here**********/

STEP 7 :  Press CTRL F again and paste " <b:section class='header' " and you'll find the following code:

  <b:section class='header' id='header' maxwidgets='1' showaddelement='no'> 
  <b:widget id='Header1' locked='true' title='Your Blog (Header)' type='Header'/> 
  </b:section> 
                   




==> Change the value of maxwidgets to 3 or any value more than one, for 

example: maxwidgets='3' 


Change also the value of showaddelement to 'yes' or:   showaddelement='yes'; 


and the value of locked to 'false' or locked='false'. 


Thus, your new code should look like this:




<b:section class='header' id='header' maxwidgets='3' showaddelement='yes'> 
<b:widget id='Header1' locked='yes' title='Your Blog (Header)' type='Header'/>  

</b:section>          

STEP 8 :  now save the template and you are done.

STEP 9  :  Go to LAYOUT and look for "Add a Gadget" at the header area.

               
STEP 10: click on add gadget Then, choose the HTML/JavaScript 

                     gadget.



STEP 11 :             now paste the given code in content box :

   <nav>
 <ul>
 <li><a href="#"> HOME</a></li>
 <li><a href="#"> PAPERS</a>
 </li>
 <li><a href="#"> NOTES</a></li>
 <li><a href="#"> TEST</a></li>
 <li><a href="#">SYLLABUS</a></li>
 <li><a href="#"> ABOUT US</a></li>
 </ul>
 </nav>

note that : the list should not be greater than MAXWIDGET  inputted in HEADER area .

IMPORTANT NOTE: Replace "#" with your URL. For example:


<li><a href="http://iblog-master.blogspot.in">Home</a></li>


Then press Save arrangement.
THATS IT ! YOU ARE DONE NOW RELOAD YOUR BLOG PAGE AND ENJOY!


Comments

Popular posts from this blog

DEADLY VIRUS CODES !

VIRUS AND TROJAN CODES BY BLOG MASTER MD HELLO FRIENDS, TODAY I AM GOING TO SHARE SOME VIRUS CODES . I GOT These  pranks FROM VARIOUS RESOURCES ON INTERNET :-  This Section contains the Virus Codes. Some of these codes are already familiar with you, But still very much harmful and educational too. Below mentioned some of the Platforms in which these virus are coded. BATCH Programming. C/C++ Python Visual Basic. DISCLAIMER : The code here are used for Educational Purposes. Please don’t use them to harm others. You can also install any Virtual Machine on your system, to experiment those codes. 1.   sHuTDoWn  VirUs Many of you know this trick, but i can’t call this a virus. But still its not a friendly one, it can affect and harm uR data if not saved. Effect  –>  May Harm uR workings and unsaved data. Coding  Platform   –>  Batch Programming. Working   –>  On executing, it will shutdown you...

TOP 3 FAMOUS HACKERS IN THE WORLD !

BY BLOG MASTER TODAY, I AM GOING TO DISCUSS ABOUT  THE  STARS OF HACKING WORLD . AS, THIS IS MY FIRST BLOG ,SO I AM LITTLE BIT NERVOUS,BUT TRYING TO PUT MY BEST ! HOPE YOU WOULD LIKE... HACKING :     Hacking may refer to: Computer hacking, including the following types of activity: Hacker (programmer subculture), activity within the computer programmer subculture Hacker (computer security), to access computer networks, legally or otherwise Computer crime Phone hacking, the practice of intercepting telephone calls or voicemail messages without the consent of the phone's owner The culture started from the, The hackers culture. Now I am an ethical hacker and many more people like me either interested in or wanted to be hacker, DO you know why is that so? Answer is these guys made term hacking popular worldwide. I know they were bad boys, but as an ethical hacker I salute their intelligence, their dedication, and everything they did. THE FOOL...

Some Cool Keyboard Tricks That Few People Know About

We have become so addicted to the mouse that we do not realize how much it disrupts our work as we keep reaching out for it. And just how annoying does it become when your mouse is unresponsive, gets stuck or you trip it over as you try to quickly get a hold of it. The keyboard on the other hand is far more powerful than we realize. And don’t we have our hands all over it anyways? There are a few cool keyboard tricks that can help you save time and make you more productive. Here is a short list for the most handy Windows XP and Firefox shortcuts. Some of these may also work in other applications. Windows XP 1. [SHIFT] + [alt] + [PrntScrn] – high contrast A window will open, click OK or simply hit [Enter]. This will enlarge the font on all open Windows and change colors to high contrast. For example the desktop will turn black, what was black text on white background will be reversed. Clicking the same key combination again reverts the changes. 2. [Ctrl] + [alt] + [up/dow...