1. Go to blogger dashboard and click Layout and
click Page Element
2. Click Add Gadget and select HTML/JavaScript widget.
3.You can see navigation bars code below.you can copy the code paste it to
inside HTML/JavaScript widget.
Style 1.
<style>
#navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0;
list-style-type: none; white-space: nowrap; } ul#navlist li { float:
left; font-family: verdana, arial, sans-serif; font-size: 9px;
font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color:
#666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }
#navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px;
color: #fff; border-right: 1px solid #d1e3db; text-decoration: none; }
ul#navlist li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #fff; background-color: #FE9C54; }
</style> <div id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name 1</span></a></li>
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li>
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>
Style 2:
<style>
#tabsE { float:left; width:100%; background:#000; font: bold 7.5pt
Verdana; line-height:normal; } #tabsE ul { margin:0; padding:10px 10px 0
50px; list-style:none; } #tabsE li { display:inline; margin:0;
padding:0; } #tabsE a { float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjZcRQbyfBAbPo9EaoTLh1vXq9pfkounUBIT2o07rrsuvSyHEgp5BVsd_29w5X5QdbExf8-qC4gnkbv58GqaPT7fUBLYfI-VsfYfMEYGaXh9iFplK6U-aIhDHZId81M1uVd-1vGZguORLc/s1600/tableftE.png)
no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
#tabsE a span { float:left; display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhfz6TLxMqJCZ3ipiuyKWEUqH-nkgG_3IpfY0NlAg5QHt4IFiOZ3PVKCju0VQfcpg5-tKdS6S4LBAVkWqP6vXy3GSFbYBA5zmMp9jE7iD9X0TDKL8rvqFCmQxUhI1JSMQBwst17m3FIcO8/s1600/tabrightE.png)
no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span
{float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; }
#tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span {
background-position:100% -42px; } </style> <div id="tabsE">
<ul>
<li><a href="Link 1"><span>Name 1</span></a></li>
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li>
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>
Style 3:
<style>
#navcontainer { background: #369; border-top: 1px solid #9CC;
margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial,
Helvetica, sans-serif; } #navlist { list-style: none outside none;
margin: 0; padding: 0; } @media all { #navlist { text-align: center } }
#navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin:
0; padding: 0; position: relative; } html>body #navlist li {
background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist
a, #navlist a:link, #navlist a:visited { background: #900; border: 1px
solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline;
height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative;
right: 2px; text-decoration: none; } #navlist a:hover { background:
#C00; bottom: 1px; color: #FFF; position: relative; right: 1px; }
#navlist a:active { background: #999; bottom: 0px; color: #FFF;
position: relative; right: 0px; } #navlist li#active { background: #369;
bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position:
relative; } html>body #navlist li#active { background: #000; margin:
0 4px 0 4px; } #navlist #active a, #navlist #active a:link, #navlist
#active a:visited, #navlist #active a:hover { background: #369;
border-bottom: none; border-left: 1px solid #9CC; border-right: 1px
solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor:
text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; }
</style> <div id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name 1</span></a></li>
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li>
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>
Style 4:
<style>
#tabsH { float:left; width:100%; background:#000; font: bold 7.5pt
Verdana; line-height:normal; } #tabsH ul { margin:0; padding:10px 10px 0
50px; list-style:none; } #tabsH li { display:inline; margin:0;
padding:0; } #tabsH a { float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiLtHq-F7ms_rXPp72bCSPHc3qrsA8E9tbbSjdvzNaOagP2aUhKj7i_gJ6HdA4_1xkPyl8Hcw9PXiq2lyPZn9pPN4y5s5mZb2Y0-lJoFdmq3hNkOsFR1icDstmXS3C1AbRRvQ_HUUahrt0/s1600/tableftH.png)
no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
#tabsH a span { float:left; display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhMPSPwuMzfxsvBLfsjcrUsOlAqQkY-YWPDHHPRKJMsJeh-j7hUTf4QmiGADzKMHp4Jzl9cImaFb6APt5_wGMXtWt-spE8m9YjlPjjVN7yT2W8B01lD6TDkUt-U8b6yMHzHYEgOvmENJG8/s1600/tabrightH.png)
no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span
{float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; }
#tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span {
background-position:100% -42px; } </style> <div id="tabsH">
<ul>
<li><a href="Link 1"><span>Name 1</span></a></li>
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li>
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>
Style 5:
<style>
#navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0
.2em 0; font-family: georgia, serif; text-transform: uppercase;
font-size: 14px; } /* to stretch the container div to contain floated
list */ #navcontainer:after { content: "."; display: block; line-height:
1px; font-size: 1px; clear: both; } ul#navlist { list-style: none;
padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist
li { display: block; float: left; margin: 0; padding-bottom: 2px; }
ul#navlist li a { display: block; width: 100%; padding: 0.5em;
border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style:
solid; color: #777; text-decoration: none; background: #f7f2ea; }
#navcontainer>ul#navlist li a { width: auto; } ul#navlist li#active a
{ background: #f0e7d7; color: #800000; } ul#navlist li a:hover,
ul#navlist li#active a:hover { color: #800000; background: transparent;
border-color: #aaab9c #fff #fff #ccc; } </style> <div
id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name 1</span></a></li>
<li><a href="Link 2"><span>Name 2</span></a></li>
<li><a href="Link 3"><span>Name 3</span></a></li>
<li><a href="Link 4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name 5</span></a></li>
<li><a href="Link 6"><span>Name 6</span></a></li>
<li><a href="Link 7"><span>Name 7</span></a></li>
</ul> </div>
4. In this codes you can see, Name is what u have to put on navigation menu( Home,
Contact us.About me)
5: Link is what You put on there as name,Its URL.
6. Now save template and see. you are done.
0 comments:
Post a Comment