Add Navigation Button In Your Blog-2
Posted On Sunday, January 4, 2009 at at 1:00 AM by RashedI have already Post an article on this topic. That was the simple process and a Link widget for navigation. But if you want a colorful navigation Button then follow this Article. It is a little difficult than 1st article but it is very easy. You can do it.
Follow this process:
- Go to your Dashboard > > Layout > > Edit HTML
- Find Out this word <b:skin> <![CDATA[/* and ]]> </b:skin> . Paste the codes within these. If it doesn't work then paste the codes just before body {
- Here is These code.
<!--menu attributes-->
/* Menu */
#foxmenucontainer{
height:35px;
background:url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/menu.jpg) ;
display:block;
padding:0px 0 0px 14px;
}
#foxmenu{
position:relative;
display:block;
height:25px;
font-size:11px;
font-weight:bold;
font-family:Arial,Verdana,Helvitica,sans-serif;
}
#foxmenu ul{
margin:0px;
padding:10px 20px 0 0;
list-style-type:none;
width:auto;
float:left;
}
#foxmenu ul li{
display:block;
float:left;
margin:0 1px 0 0;
width:105px;
}
#foxmenu ul li a{
display:block;
float:left;
color:#dfdcd6;
text-align: center;
text-decoration:none;
padding:6px 0px 0 0px;
width: 105px;
height: 19px;
background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top right;
}
#foxmenu ul li a:hover{
color:#ffc35a;
background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top left;
width: 105px; height: 19px;
text-align: center;
}
#foxmenu ul li a.current,#foxmenu ul li a.current:hover{
color:#ff9600;
width: 105px; height: 19px;
background:transparent url(http://i522.photobucket.com/albums/w346/charcoal2-template/charcoal2/charcoal1/li2.gif) no-repeat top right;
}
.post a:link,
.post a:visited {
color: #ad4100;
background-color: transparent;
}
.post a:hover {
color: #fff;
background-color: transparent;
text-decoration: none;
}
<!--ends menu attributes--> - You have added the attributes for menu in your template. You can change these attributes if you want to make a unique one. You van change the image, hover color etc.
- Then you need the Button Code. Copy and paste these code within your <body>......</body>.
(NB: Please remember: You will see a lot of codes within body. You should paste the codes where you want to see your menu. You may want it in Head portion, Sidebar or Footer Portion. So paste your codes and preview it to make sure it is in right position)
- Button code. Copy and paste these.
<!--button code-->
<div id="foxmenucontainer">
<div id="foxmenu">
<ul>
<li class="current"> <a href="http://your site url">HOME</a> </li>
<li class="current"> <a href="http://your site url">FREE SOFTWARE</a> </li>
<li class="current"> <a href="http://your site url">TUTORIAL</a> </li>
<li class="current"> <a href="http://your site url">BLOGGING</a> </li>
</ul>
</div>
</div>
<!--end of button code--> - Change your site url with your url
- And change HOME, FREE SOFTWARE, TUTORIAL, BLOGGING with your desired name. You can also add more button. To add more button copy <li class="current"> <a href="http://your site url">BLOGGING</a> </li> and paste before </ul>
