Entri Populer
-
WA...H INILAH P artai K elompok S etan Inilah salah satu pemandangan kampanye sebuah partai yang ngaku-ngaku partai yang berbasis islam,p...
-
Mungkin anda Pernah dan bahkan kebanyakan bagi orang yang hobi download file-file di internet yang berekstension .rar dari internet ? Dan fi...
-
MUQADDDIMAH Segala puji hanya milik Allah, shalawat serta salam semoga tercurah kepada Rasulullah, keluarganya, para sahabatnya serta orang ...
-
Sebidang tanah di bumi ini yang paling dicintai oleh Allah Subhanahu wa Ta’ala adalah rumah-rumah-Nya (masjid) yang di dalamnya ditegakkan i...
-
Hardisk external merupakan barang yang tidak asing lagi bagi kita maniak komputer,baik mereka yang memang seorang " Dokter " PC ma...
Menu tabview adalah menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak diapakai untuk menghemat tempat pada blog dengan sistem menampilkan atau menutupi halaman tabel sesuai dengan tabel menu diatasnya. Jadi jika kita mengklik menu diatasnya maka halaman tabel yang muncul adalah halaman tabel yang dibuat sesuai dengan menu tabel diatasnya, dan jika kita mengklik menu tabel lain maka yang muncul adalah halaman tabel yang bersesuain namun tetap pada satu tempat itu.
Coba perhatikan dibawah ini :
Gimana sudah paham belum? mau cara buatnya?
Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layout kemudian masuk bagian Edit HTML
Selanjutnya taruh code CSS dibawah ini diatas code ]]>
<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>
Perhatikan text yang berwarna merah itu keterangan dari menu tab view yang bisa kamu edit sesuai keinginan kamu, untuk code warna bisa dilihat disini.
kalau sudah pasang script dibawah ini diatas code </head>
<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>
kalu sudah silahkan "Save Template" Anda.
kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilih HTML/JavaScript dan taruh Code dibawah ini :
<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 :
Kalau sudah tinggal SAVE.
0 komentar
Posting Komentar