Tab View Menu Generator

بِسْمِ اﷲِالرَّحْمٰنِ الرَّحِيْم

Tutorial kali ini saya akan membahas tentang Memasang Tab View Menu menggunakan Generator. Sebenarnya saya sudah membahasnya pada artikel ini, tapi untuk lebih mudah saya buat saja generator ini. Karena tutorial ini saya buat semudah mungkin, jadi saya harap pembaca bisa mengerti apa yang saya bahas dan saya harap mengerti telah apa yang saya maksud. OK kalau begitu kita langsung saja menuju ke TKP

1. Masuk ke akun blogger anda
2. Klik rancangan, kemudian Edit HTML
3. Pada Edit HTML, centang Expand Template Widget
   Expand Template Widget
4. Isilah form dibawah ini
5. Setelah selesai, klik Generate
6. Copy code yang ada di text area
7. Dan letakkan di atas code

</b:skin>

8. Setelah itu copy kode di bawah ini

<script src='http://dl.dropbox.com/u/22738692/TabViewMenu/script.js' type='text/javascript'/>

9. Kemudian letakkan di bawah kode

</b:skin>

10. Simpan Template
11. Kemudian masuk ke Elemen Laman
12. Klik Tambah Gadget
13. Pilih HTML/Javascript
14. Masukkan code di bawah ini pada kotak kontent

<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>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Tab View Menu
Isi Tab View Menu
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Tab View Menu
Isi Tab View Menu
Isi Tab View Menu
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Tab View Menu
Isi Tab View Menu
Isi Tab View Menu
</div></div>
<!--Akhir Menu 3-->

</div></div></form>
<script type="text/javascript">
tabview_initialize('TabView');</script>

15. Klik Simpan

ٱلۡحَمۡدُ لِلَّهِ رَبِّ ٱلۡعَـٰلَمِينَ

Artikel Terkait