Create Tab View Menu

Tab view the menu was very useful to blogger .that was small but could keep many title posting.So you could put forward favourite article,link favourite In order to be easy to be seen in your blog , you blog were also seen better and that was most important with used tab view mode the visitor could see the content syour posting were easier and more. your can look example like this



The method of making tab view menu

1.klik lay out from dashboard blogger
2.klik Edit HTML
3.Afterwards looked for this code ]]></b:skin>
4.put the script code below this before the code ]]></b:skin>
this script code

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /*Wide Main Upper menu */
text-align: center;
height: 24px; /* High Main Upper menu */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* colour border the Box of the upper menu */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font main upper menu */
font-weight: 900;
color: #000; /* colour border the box main upper menu */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* colour background the main upper menu */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /*border colour main menu */
overflow: hidden;
background-color: #FF9900; /* background colour main box*/
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

5.than putting on the code <script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/> along with this before the code < /head >

6.than save
7.go "Page Elements"
8.klik "Add Page Element" --> "HTML/Javascript"
9.Input script this below

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>

</div>
</div>
</form>

<script type="text/javascript">
tabview_initialize('TabView');
</script>

10.save

note

You could replace the measurement wide,colour,bacground,size like you liked

good luck