Add Tabview In Blogspot

hey guys today im visit my friends blog, im very amazed that on my friends blog have a tabview like a mozilla browser. go you know? ok use mozillan and push ctrl+t or file >> new tab. yea tabview is like that. very cool? yea of course. with tabview so you can make your menus on one place, its make your age be more simply. and you can place your ads (Advertise) there, link and other widgets. ok lets to add tabview in blogspot.


Follow this step to add tabview in blogspot :

1. login into your blogger accouts

2. go to the dasboard

3. Go to the design/template

4. go to the edit html

5. download your full template before

6. After it cek expand widget template

7. Find this code ]]></b:skin>

8. Copy this code before ]]></b:skin>

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Main Menu Top Width */ text-align: center;

height: 24px; /* Main Menu Top height */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Top Menu border color */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Main Menu Top Fonts*/

font-weight: 900;

color: #000; /* Main Menu Font Color Top */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FF9900; /* Background colors on Main Menu */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Main Box border color */

overflow: hidden;

background-color: #FF9900; /* 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;

}

/* http://blogpostat.blogspot.com/ */

9. You can edit beside bold text for styling your tabview

10. after it you can placed this code before

</head>

<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>

11. And now save

12. to add tabview on your sidebar, go to the page elements

13. Add html/javascript gadget

14. And than fill with this code

<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');

15. Change the bold text with your PPC ads (PAY PER CLICK) or another script

16. Save and finish.

Simmilar Posts by Categories