Minggu, 18 September 2011

Cara Membuat Menu Tab View di Blogspot

Assalamualaikum Wr. Wb.



Cara Membuat Menu Tab View. Ngomong-ngomong menu tab view itu apa ya?.Pasti beberapa dari kalian ada yang nggak ngerti menu tab view,menu tab view itu bentuknya seperti gambar disamping,menu tab view memiliki kelebihan yaitu hemat tempat,yaudah biar gak kelamaan langsung aja kita mulai tapi sebelum itu usahakan follow blog saya dulu kalo udah follow baru kita mulai:

1.Login ke akun blogger anda
2.Pilih tab rancangan
3.Pilih Edit html
4.Back up dulu templatenya biar kalo salah bisa dikembaliin backup dengan cara klik "Download template lengkap"
5.Kemudian cari kode ]]></b:skin> (agar lebih mudah mencarinya gunakan f3)
6.Masukkan kode dibawah ini sebelum kode  ]]></b:skin>

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {widht:100%;
padding-top: 0px;
height: 24px;
overflow: hidden;
}
/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 110px; /* ukuran lebar menu */
text-align: center;
height: 30px; /* ukuran tinggi menu */
padding-top: 7px;
margin-right:4px; /* jarak antarmenu */
vertical-align: middle;
border: 1px solid #ccc; /* warna border menu */
border-bottom-width: 0;
margin:0px;
padding: 5px 0;
font-family:Arial,Helvetica,sans-serif;
font-size:12px;
font-weight:bold;; /* besar hurup menu */
background-color: #4c4c4c; /* warna latar menu */
color: #FFFFFF; /* warna hurup menu */
-moz-border-radius-topleft:15px;
-moz-border-radius-topright:15px;
-webkit-border-top-left-radius:15px;
-webkit-border-top-right-radius:15px;
}
div.TabView div.Tabs a.Active {
background-color: #FFFFFF; /* warna background menu aktif */
color: #000000;
}
div.TabView div.Tabs a:hover {
background-color: #999999; /* warna background menu hover */
color: #FFFFCC;
font-weight: bold;
}
/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /* warna border kotak utama */
overflow: hidden;
background:#FFFFFF; /* background kotak utama */
}
div.TabView div.Pages div.Page {
height: 100%;
padding: 7px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad {
padding: 5px 0px;
font-size: 12px; /* besar hurup kotak utama */
}
/* tabview css end */
7.Pasang kode dibawah ini sebelum kode </head>
<script src='http://miftahulanwar.fileave.com/tabview.js' type="text/javascript"/>

8.Kalo udah tinggal disimpan 
LANGKAH DIATAS BELUM SELESAI SEKARANG KITA MULAI MEMBUAT KODE UNTUK MEMANGGIL TAB VIEW NYA

1.Login ke akun blogger anda
2. Pilih tab rancangan
3.Klik tab elemen laman
4.Klik tambah gadget
5.Kemudian pilih yang HTML Java/Script
6.Masukkan kode dibawah ini di kotak yang telah disediakan:

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs"> 
Disini letakkan kode untuk menu tab 1 
</div>
<div style="width: 99%; height: 200px;" class="Pages">
<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 2 </div></div>
<!--Akhir Menu 1-->
<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 3 </div></div>
<!--Akhir Menu 2-->
<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Disini letakkan kode untuk menu tab 4 </div></div>
<!--Akhir Menu 3-->
</div></div></form>
<script type="text/javascript">tabview_initialize('TabView');</script>
<div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"></div>
 


7.Kalo udah tinggal disimpan
NB:Kode yang ditulis tebal bisa diedit sendiri
Selamat Mencoba

Wassalamualaikum Wr. Wb.

9 komentar:

Unknown mengatakan...

KOde uuntuk menu tab 1 ituu maksudnyaa app??
kasii contoh donk!!!

mila mengatakan...

gmn zih buatny tab view ko mlh acak2n tlong cwx dong n kzih zaran di blog ak http://blogislamiindonesia.blogspot.com/

Rudy Hartono mengatakan...

ijin simak gan

Dunia Guru mengatakan...

tak coba dulu nich

Artikel Menarik mengatakan...

makasih banyak mas udah sharing tutorialnya :)

Baby Bear Parade mengatakan...

ahh ketauan banget COPAS dri blog orang

Full Software Registered mengatakan...

keren sob.. thanks infonya
ditunggu kunjungan baliknya.
http://softwareku4u.blogspot.com

Ramzi mengatakan...

Nanti pastinya akan sangat keren ni sob
thanks infonya

hado mengatakan...

gan, follow back donk :)

Automatic Backlink

Please copy code below to get free backlink, copy this in to your web/blog and after you click it it will automatic displayed in 'Backlink Created', in bottom bar.
Free Auto Backlink - Gratis Backlink Otomatis

Backlink

 
Copyright © . Blogger Pendidikan Keren - Posts · Comments
Theme Template by BTDesigner · Powered by Blogger