ArthaX Community
Silahkan Login dulu / Register Free

ArthaX Community

- Game
- Softwere
- Tips
- Trick



 
LoginPendaftaranIndeksCalendarFAQPencarianAnggotaGroup
Login
Username:
Password:
Login otomatis: 
:: Lupa password?
Top posters
Arthax (160)
 
Legend (4)
 
abdoel (2)
 
dedung (1)
 
prshkr07 (1)
 
Latest topics
» SHANK PC RIP MEDIAFIRE
Sun Jul 20, 2014 10:42 am by prshkr07

» [ Deus Ex ]
Mon Mar 19, 2012 10:48 am by abdoel

» Onimusha 3: Demon Siege ( RIP Only 462MB )
Mon Mar 19, 2012 10:34 am by abdoel

» Kaspersky Anti-Virus 12.0.0.374
Sun Dec 25, 2011 5:20 pm by Arthax

» AVG Anti-Spyware 7.5.1.43
Sun Dec 25, 2011 5:19 pm by Arthax

» Avast! Free Antivirus 6.0.1367
Sun Dec 25, 2011 5:17 pm by Arthax

» AntiVir Personal 12.0.0.872
Sun Dec 25, 2011 5:16 pm by Arthax

» Windows Media Player Firefox Plugin 1.0.0.8
Sun Dec 25, 2011 5:14 pm by Arthax

» Opera 11.60
Sun Dec 25, 2011 5:12 pm by Arthax

» Java Runtime Environment
Sun Dec 25, 2011 5:11 pm by Arthax

» Internet Explorer
Sun Dec 25, 2011 11:29 am by Arthax

» Google Toolbar
Sun Dec 25, 2011 9:07 am by Arthax

» Google Chrome 17.0.963.12 Beta
Sun Dec 25, 2011 9:02 am by Arthax

» Hot Keyboard
Sun Dec 25, 2011 8:36 am by Arthax

» Flock 2.6.1
Sun Dec 25, 2011 8:25 am by Arthax


Share | 
 

 Cara Membuat Menu Tab View

Go down 
PengirimMessage
Arthax
Admin
Admin
avatar

Jumlah posting : 160
Join date : 30.11.11
Age : 20
Lokasi : Denpasar

PostSubyek: Cara Membuat Menu Tab View   Tue Dec 06, 2011 2:44 pm

Karena sering ditanya tentang bagaimana caranya
membuat Tab VIew (Biasanya nanyanya gini: "Mas cara membuat menu yg
kayak punya mas gmn? yg ada "Tips & Trik", "Lain-lain", "Terbaru",
"Komentar" itu lho). Ya kan? hayo ngaku... Tabview itu sangat berguna
sekali, karena dengan ukuran kotak yang relatif kecil tapi bisa memuat
isi yang buanyak. Sebenarnya dah dari dulu pingin posting tentang itu,
tp karena yg dulu cara pasanganya sulit jadi belum bisa aku jelaskan.
Trus akhirnya aku menemukan metode baru dalam pembuatannya. Cara yang
ini mungkin mirip dengan punyanya o-om, tp scriptnya agak beda. Dan aku
dapet script ini juga bukan dari o-om lho Very Happy
Tab view itu contohnya seperti ini :




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.
Quote :

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. Perhatikan text-text yang berwarna merah, itu
adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk
mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

Quote :
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

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

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


Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.
Kembali Ke Atas Go down
Lihat profil user http://arthax-community.the-up.com
 
Cara Membuat Menu Tab View
Kembali Ke Atas 
Halaman 1 dari 1
 Similar topics
-
» (bagaimana) cara membuat peringatan di chatbox?
» Arsip: Cara Membuat Jumlah Posting,Birthday,Join Date,Webs Seperti Ini
» [Tutorial] Cara membuat forum forumotion
» Cara membuat pendataan&list list barang menjadi seperti di sini?
» HT & Throat mic buat yg doyan touring

Permissions in this forum:Anda tidak dapat menjawab topik
ArthaX Community :: Blogger :: Tips - Trick Blogger-
Navigasi: