It's been a long time I did not write about the tutorial blog, a few weeks I always write about the news and wonders of nature. OK, it's time we tried to return to the tutorial blog, and which we will discuss today is how to create a tab view menu on the blog.
Tab view menu, very efficient, because it contains many titles in one place. In addition to saving space, tab view menu also looked very good. Creating tab view menu requires a lot of HTML code, so my advice, you should backup the template before you make the tab view menu.
To make it, please follow the steps below:
- Login to blogger with your ID.
- Click Layout.
- Click Edit HTML.
- Then look for the code ]]>
- Put the following code before the code ]]>
div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Width Main Menu Top */text-align: center;
height: 30px; /* High Main Menu Top */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Top Menu border color */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Main Menu Top Fonts */
font-weight: bold;
color: #000; /* Main Menu Top Font Colors */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px}
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Background colors on Main Menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Main Box border color */
overflow: hidden;
background-color: #E6E6E6; /* Main Box background color */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
} - Then place the following JavaScript code above the code
- Save Template.
- To make the tab view menu, please return to the Layout.
- Select a Page Elements .
- Click Add Gadget .
- Select the HTML / Javascript, then enter the following code :
- Then Save.
Description:
- For red code is the width and height of the menu, please adjust the content.
- Code green please fill in the title of the menu.
- And the color purple, the contents of the menu. You can add links, images, banners, etc..
No comments:
Post a Comment