To add a horizontal list of top blogger code enables you to shorten your own blog topics and presented in clear and simple for visitors to your blog especially when the top menu shows all visitors, without the trouble as you can divide your blog into several sections and each section and the allocation of specific subjects.
To add a list horizontal top blogger code follow the following simplified explanation
- Sign in to your blog on blogger.
- From the control panel of your blog Select planning and then choose Edit html.
- Keep a copy of your blog template.
- Press the f3 key of the keyboard and then look for the following code:
- From the control panel of your blog Select planning and then choose Edit html.
- Keep a copy of your blog template.
- Press the f3 key of the keyboard and then look for the following code:
</b:skin>
Put the following code immediately before the previous code, we searched for
URL: http://www.AllBlogTools.com/ */
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}
.basictab li a:visited{
color: #2d2b2b;
}
.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 3px;
border: 1px solid gray;
border-bottom: none;
background-color: #f6ffd5;
color: #2d2b2b;
}
.basictab li a:visited{
color: #2d2b2b;
}
.basictab li a:hover{
background-color: #DBFF6C;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #DBFF6C;
color: black;
}
And then save the template blogThen go to start planning select tool (html) and then select and paste the following code:
ul class="basictab">
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>
<li class="selected"><a href="http://www.AllBlogTools.com.com">Home</a></li>
<li><a href="http://www.allblogtools.com/blogger-templates/">Blogger Templates</a></li>
<li><a href="http://www.allblogtools.com/blogger-tricks-and-hacks/">Blogegr Tricks</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
<li><a href="#">Edit</a></li>
</ul>
- You can change the background color of the menu by searching for the following code and change the color code that you want.
background-color: #f6ffd5;
- And change the color of the list when you pass it right through
the following code:
background-color: #DBFF6C;
- And change the color of the text through the following code:
color: black;
No comments:
Post a Comment