Featured Posts

Wallpaper DesktopWallpaper Desktop:Love ni aku ada buat wallpaper untuk desktop. kalau ada yang nak download, boleh download di sini

Readmore

Panduan Percuma Nuffnang – Jana Trafik , Wang dr reze tidak terlibat dengan mana-mana aktiviti meninggalkan komen di blog (Spam) atau forum, 100% enjin carian...enjin carian sahaja ok..

Readmore

nak bg komen ke tak "u follow i, i follow u balik", paksaan komen, pasal copycat, dan suruh klik iklan nuff.mmg rata-rata yang buat entri pasal ni mesti tidak puas hati dengan blogger lain. ada yang tersangat marah, ada yg beremosi sikit je..dan ada hanya yg beri teguran..teguran mengingati antara satu sama lain...

Readmore

Monday, November 2, 2009

Create Tab View Navigation Widget for Blogger





1. Install CSS Code

1.1 Login blogger account
1.2 Klik Layout -> Edit Html -> Expand Widget Templates
1.3 Backup Template asal dulu
1.4 Cari </b:skin>

.
1.5 Kalau tak jumpa, tekan control f, paste </b:skin> dekat kotak find, lepas tu klik
next
1.6 Letak code baru yg dibawah ni, sebelum </b:skin>





div.TabView div.Tabs



{

height: 24px;

overflow: hidden;

}



div.TabView div.Tabs a

{

float: left;

display: block;



width: 90px;

text-align: center;



height: 24px;

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000000;

border-bottom-width: 0;



text-decoration: none;

font-family: "Arial", Times New Roman, Serif;

font-weight: 900;

color: #000080;

}



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

{

background-color: #BDBDBD;

}



div.TabView div.Pages

{

clear: both;

background-color: #FFFFFF;

border: 1px solid #000000;

overflow: hidden;

}



div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}



div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}











2. Install Javascript Code

2.1 cari code " </head> "

2.2 Letak code baru di bawah ni sebelum " </head> "


<script src='http://sites.google.com/site/angga123site/tabview.txt' type='text/javascript'/>

2.3 save template

3. Create Tab View Widget

3.1 Pergi dekat Layout - Page Element - Add a Gadget - Choose HTML/JavaScript

3.2 copy dan paste code do bawah



<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>





note untuk diubah:

1: tulisan warna merah untuk content tab anda
2: tulisan width: 350px untuk saiz tab(atas) anda
3. tulisan width: 350px untuk saiz keseluruhan petak tab anda

credit to : http://bloggertipandtrick.blogspot.com

0 comments:

Post a Comment