navigation bar with blogger

In this post I am explaining that how to use css for navigation bar in blogger. Well it is very simple to use the css in blogger.
        If you are not using a theme with dynamic views then go to template and press button customise.Then go to the Advanced tab , and then go to Add css tab . Now write down your css part without including script tag.
Now press Apply to Blog button . Now your css part is ready.
      Now search for <div class='content'> and insert your code just before this tag .  If I use my own css then code will look like


<div class='menu'>

<ul>
<li>
<a href="#">home</a>

<li>
<a href="#">contact</a></li>
</ul>
</div>
     If you want to check our css part then check out our previous post css part on navigation bar .
 
           After it you will get a navigation bar on your blogger . If you have any trouble then tell us about your problem by contacting us , we would like to answer you.
                                                                                             
                                                                                                        -Thanks to visit.

use_of_css_part_2

hello friends , in my recent post you have learnt some step towards css.
   In this post you will learn two type of navigation bar 1) vertical , 2) horizontal  navigation bar.
1) A vertical navigation bar : -
First create class for your code , in my code I use menu as class name .My code is as -

  <style type="text/css">
  .menu ul { list-style:none; font-size:20px; }
   .menu ul li { position:relative; }
   .menu ul li a { text-decoration:none; padding:12px 12px 12px 12px; color:#ffffff; display:block;                       border-right:2px solid #456745; border:1px solid #467746; width:150px; background:#333333;   }
   .menu ul li a:hover { color:#aa2233; background:#778877; }
</style>

We use list to create a navigation bar so we use styling on list .And this code creates a vertical navigation bar.

2.) Now we will create a horizontal navigation bar .The only difference I will create in .menu ul li { position:relative; }  . I will add a single attribute as "float:left;" And the code will looks like -

<style type="text/css">
.menu ul { list-style:none; font-size:20px; }
.menu ul li { position:relative; float:left; }
.menu ul li a { text-decoration:none; padding:12px 12px 12px 12px; color:#ffffff; display:block;  border-right:2px solid #456745; border:1px solid#467746; width:150px; background:#333333; }
.menu ul li a:hover { color:#aa2233; background:#778877; }
</style>

And finally our horizontal navigation bar is also ready. Now I use it as-

<div class="menu">

<ul>

<li>

<a href="#">prashant</a></li>

<li>

<a href="#">tyagi</a></li>

</ul>
   If you encounter any problem then tell us about your problem by contact us . We would like to answer you.
             check the previous post on css to understand this post more previous post .

                                                                                               
                                                                                                                   - Thanks to visit.

use_of_css_part_1

  If you are novice than use my previous posts.
css  provides you to define styling for each tag. We will check here for some tags
1: - For paragraph tag I write down the part of CSS.
  css -
      <style type="text/css">
       p {
        font-size : 35pt;
        font-family : "Verdana";
        color : red;
        text-align : center;
         }
      </style>
      In this example , I generate styling for paragraph in which first line defines the font size used in paragraph . And next line set font type as Verdana , you can set font type of your choice, next line set color of text used in paragraph and next line set the text to center aligned.
      The above part shows the styling on paragraph , similarly we can create style for header , body etc. Now I will show you styling for a link tag .
 2 : For link tag I write down the part of the css.
    link -
     <style type="text/css">
      a : link , a : visited
       { display : block;
          background-color : #bbaa88 ;
          color : #ffffff ;
          text-decoration : none ;
           padding : 7px ;
           width : 250 ;
          text-align : center ;
         }
    a : hover , a : active
    { background-color : #bcab00;
   }
       </style>
       In this example we set a block for our link part and then we set color of the block used. In next line we set color of the link and in next line we set none text- decoration which sets no underline for link. In next line we set padding and in next we set width of the block used. in next line we align the text in block to center.
       Now it will be clear in your mind that how we use css . Just copy the css part and include in your document and use that tag to get the output.I tried to use a clear css that generate a clear picture of css in your mind.
I will show you that how to create navigation bar in my later post . Check out this link for navigation bar with css more css (navigation bar ) .

                                                                                       - Thanks to visit.
          

css

CSS : - Cascaded  Style Sheet

                CSS  plays an important role in a HTML page. To use CSS , first of all it is necessary to know why we use css? css is used to reduce typography in a document.We use css for styling in an HTML page.We write properties of tags and document once and can use them each time when we use that tags.

 Using css we can put styling for any of the tag combined in a file or within that page.we can include our css in our document by introducing style tag. How we can use the style tag is shown here - 

     <style type="text/css">
    [  body ]
      </style>
      Or we can write our whole css body part in a different file with ".css" extension and can include the file in our document by using link tag. How we use link tag in our document is shown here -
  <link rel="stylesheet" href=" url of the file with .css extension " type="text/javascript" />
    I will teach you that how to write body part of the css file in my later post.
    Just check out this link for my newer post on css  More CSS . I think it will help you.
                                                                                         thanks to visit .