mari berbagi ilmu dan pengetahuan

09/06/10

cara membuat tab view di blogger

Langkah Pertama Login ke akun Blogger kamu. Dari halaman dashboard, pilih Edit HTML. Pada halaman Edit HTML, cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F untuk mencarinya. Kopikan kode CSS berikut (gunakan Control C) dan letakkan di atas kode ]]></b:skin> tersebut.


/* Menu Tab View ----------------------------------------------- */ 
div.TabView div.Tabs { padding-top: 0px; height: 24px; overflow: hidden; } /* Menu Utama */ div.TabView div.Tabs a { float: left;
display: block; width: 80px; /*ukuran lebar tabmenu*/ text-align: center; height: 24px; /*ukuran tinggi tabmenu*/ padding-top: 3px; margin-right:4px; /*jarak antartabmenu*/ vertical-align: middle; border: 1px solid #CCC; /*warna border menu*/ border-bottom-width: 0; font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/ font-size: 12px; /*besar hurup menu*/ letter-spacing: -1px; background-color: #A4A4A4; /*warna latar menu*/ color: #FFFFFF; /*warna hurup menu*/ -moz-border-radius-topleft:10px; -moz-border-radius-topright:10px; -webkit-border-top-left-radius:10px; -webkit-border-top-right-radius:10px; } div.TabView div.Tabs a.Active { background-color: #888888; /*warna background menu aktif*/ color: #FFFFFF; } 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:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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; font-size: 12px; /*besar hurup kotak utama*/






Setelah itu letakkan sumber script berikut di bawah ]]></b:skin> 






<script src="http://enes-sc.googlecode.com/files/tabview.js" type="text/javascript"/>  






Simpanlah hasil editing tersebut. Langkah Kedua Pilih tab Elemen Halaman (Page Element).  
Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript. Kopikan script berikut dan letakkan pada kotak Content yang tersedia:  






<form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 100%;" class="Tabs"> <a title="Keterangan Menu 1">Menu 1</a> <a title="Keterangan Menu 2">Menu 2</a> <a title="Keterangan Menu 3">Menu 3</a> <a title="Keterangan Menu 4">Menu 4</a> </div> <div style="width: 100%; height: 200px;" class="Pages"> <!--Awal Menu 1--> <div class="Page"><div class="Pad"> Isi Menu 1.1<br/> Isi Menu 1.2<br/> Isi Menu 1.dst<br/> </div></div> <!--Akhir Menu 1--> <!--Awal Menu 2--> <div class="Page"><div class="Pad"> Isi Menu 2.1<br/> si Menu 2.2<br/> Isi Menu 2.dst<br/> </div></div> <!--Akhir Menu 2--> <!--Awal Menu 3--> <div class="Page"><div class="Pad"> Isi Menu 3.1<br/> Isi Menu 3.2<br/> Isi Menu 3.dst<br/> </div></div> <!--Akhir Menu 3--> <!--Awal Menu 4--> <div class="Page"><div class="Pad"> Isi Menu 4.1<br/> Isi Menu 4.2<br/> Isi Menu 4.dst<br/> </div></div> <!--Akhir Menu 4--> </div></div></form> <script type="text/javascript" src="http://enes-sc.googlecode.com/files/tabview-tab.js"></script>

4 komentar:

cucu hermawan mengatakan...

nice post deh,,
coba - coba

SAEBA ARIES WIBAWA mengatakan...

thanks

Anonim mengatakan...

coba deh

bhu mengatakan...

dsdsds

Posting Komentar