cara untuk membuat menu tab view

Beginilah cara untuk membuat menu tab view tersebut

1. Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode ini :]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin>atau kedalam tag CSS.
div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna background Kotak Utama */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
4. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode : </head>

<script src='http://archie.opik.googlepages.com/tabview.js' type='text/javascript'/>

5. Kemudian "Di save"
6. Lalu pergi ke menu "Page Elements"
7. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
8. Inilah script yg harus kamu pasang :

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

Related Posts by Categories



Comments (4)

raka Depok

March 5, 2009 at 12:11 PM

aku lom bisa...gmn caranya bu...susah kali..!!!

Anonymous

November 12, 2009 at 1:56 PM

I found this site using [url=http://google.com]google.com[/url] And i want to thank you for your work. You have done really very good site. Great work, great site! Thank you!

Sorry for offtopic

Anonymous

December 19, 2009 at 2:19 PM

Ditasunnits [url=http://wiki.openqa.org/display/~buy-cipro-without-no-prescription-online]Buy Cipro without no prescription online[/url] [url=http://wiki.openqa.org/display/~buy-flomax-without-no-prescription-online]Buy Flomax without no prescription online[/url]

Anonymous

December 25, 2009 at 7:47 AM

windows server 2003 sp1 activation crack
gangland crack file
ghost recon crack no cd
stuffit standard edition crack
crack for virtual dj 2.5
masai editor crack
advanced excel 2000 password recovery crack
city of heroes cd key crack
fruity loops plugin crack
sam3 broadcaster keygen




3d max 5 crack
network searcher crack
refox x crack
protools xp crack
anydvd keygen 4.5.6.2
deviance no cd crack
snak crack
cossacks european wars crack
math type 5.2a crack
crack upper back
quarkxpress 6 serial crack
roxio easy media creator 7 keygen
datamaster keygen
x win32 5.4.4 crack
avast 4.6 professional crack
office 2003 installation id crack
abf password recovery crack
grafx saver pro 4.0 keygen