On the website navigation buttons are needed for the purpose of efficient page webpage also helps viewers to explore the contents very easy, I would like to Introduce Some vertical navigation buttons for you, easy you just add widgets for blogspot and plug ins for wordpress, read following postings
You Should change title menu in accordance with the title of your blogspot,
for example href="http://www.blogger.com/Home.html"
change to href="http://your.blogspot.html"
<style type="text/css">
<!--
/* CSS Tabs */
#navlist {
color: white;
background: #17a;
border-bottom: 0.2em solid #17a;
border-right: 0.2em solid #17a;
padding: 0 1px;
margin-left: 0;
width: 12em;
font: normal 10px Verdana, sans-serif;
}
#navlist li {
list-style: none;
margin: 0;
font-size: 1em;
}
#navlist a {
display: block;
text-decoration: none;
margin-bottom: 0.5em;
margin-top: 0.5em;
color: white;
background: #39c;
border-width: 1px;
border-style: solid;
border-color: #5bd #035 #068 #6cf;
border-left: 1em solid #fc0;
padding: 0.25em 0.5em 0.4em 0.75em;
}
#navlist a#current { border-color: #5bd #035 #068 #f30; }
#navlist a {
width: 99%;
/* only necessary for Internet Explorer */
}
#navlist a {
voice-family: "\"}\"";
voice-family: inherit;
width: 9.6em;
}
#navcontainer>#navlist a {
width: auto;
/* only necessary if you use the hacks above for the Internet Explorer */
}
#navlist a:hover, #navlist a#current:hover {
background: #28b;
border-color: #069 #6cf #5bd #fc0;
padding: 0.4em 0.35em 0.25em 0.9em;
}
#navlist a:active, #navlist a#current:active {
background: #17a;
border-color: #069 #6cf #5bd white;
padding: 0.4em 0.35em 0.25em 0.9em;
}
-->
</style>
<div id="navcontainer">
<ul id="navlist">
<!-- CSS Tabs -->
<li><a id="current" href="Home.html">Home</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
<li><a href="News.html">News</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
<style type="text/css">
<!--
body {
font-family: Verdana, Arial, Helvetica, sans-serif;
margin: 0;
font-size: 80%;
font-weight: bold;
background: #FFF;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
img {
border: none;
}
/*- Menu 9--------------------------- */
#menu9 {
width: 200px;
margin: 10px;
}
#menu9 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 24px;
text-decoration: none;
}
#menu9 li a:link, #menu9 li a:visited {
color: #FFF;
display: block;
background: url(http://i1046.photobucket.com/albums/b462/agusjokop2002/blog_posting/menu9.gif);
padding: 8px 0 0 35px;
}
#menu9 li a:hover, #menu9 li #current {
color: #FFF;
background: url(http://i1046.photobucket.com/albums/b462/agusjokop2002/blog_posting/menu9.gif) 0 -32px;
padding: 8px 0 0 35px;
}
-->
</style>
<div id="menu9">
<ul>
<!-- CSS Tabs -->
<li><a id="current" href="Home.html">Home</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
<li><a href="News.html">News</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
<style type="text/css">
#menu12 {
width: 200px;
margin: 10px;
}
#menu12 li a {
height: 32px;
voice-family: "\"}\"";
voice-family: inherit;
height: 22px;
text-decoration: none;
}
#menu12 li a:link, #menu12 li a:visited {
color: #666;
display: block;
background: url(http://i1046.photobucket.com/albums/b462/agusjokop2002/blog_posting/menu12.gif);
padding: 10px 0 0 35px;
}
#menu12 li a:hover, #menu12 li #current {
color: #000;
background: url(http://i1046.photobucket.com/albums/b462/agusjokop2002/blog_posting/menu12.gif) 0 -32px;
padding: 10px 0 0 35px;
}
</style>
<div id="menu12">
<ul>
<!-- CSS Tabs -->
<li><a id="current" href="Home.html">Home</a></li>
<li><a href="Products.html">Products</a></li>
<li><a href="Services.html">Services</a></li>
<li><a href="Support.html">Support</a></li>
<li><a href="Order.html">Order</a></li>
<li><a href="News.html">News</a></li>
<li><a href="About.html">About</a></li>
</ul>
</div>
If you want to see demo ,
please to trial website
Please leave your comments if you need more information
No comments:
Post a Comment