Cara Menambahkan Isi Menu Pada Tab View Blogger

Sabtu, 22 Mei 2010

Cara Menambahkan Isi Menu Pada Tab View

Malam Minggu hujan, banjir lagi, dari pada cuman bengong dirumah, dan menyianyiakan waktu, mendingan ku pakai buat posting artikel. Langsung aja sobat, menyambung artikel kemarin yang membahas tentang "Cara Membuat Tab View", ini dia lanjutannya yang nggak kalah penting "Cara Menambahkan Isi Menu Pada Tab View".
Setelah pada bahasan kemarin shobat sekalian berhasil melakuakan pembuatan Tab View, pasti shobat sekalian ada yang bertanya : Terus gi mana cara mengatur isi tab view tersebut...?

Setelah melakukan cara kedua dan shobat sekalian berhasil, berikut ini cara selanjutnya untuk menambahkan atau mengisi Tab View Tersebut.

Huruf-huruf yang dicetak tebal dibawah silahkan ganti dengan keinginan shobat sekalian...

<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">

Contoh :

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Tips Blogging">Tips Bloging</a>
<a title="Link Temah">Ling Teman</a>
<a title="Banner Sahabat">Banner Sahabat</a>
</div>
<div style="width: 99%; height: 230px;" class="Pages">

Kemudian pada menu satu yang akan di isi dengan Tips Bloging :

<!--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-->

Ganti atau shobat edit seperti  contoh dibawah ini :

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
<ul>
<li><a href="Alamat Halaman URL blog Shobat" target="_blank" title="Judul">Judul</a></li>
<li><a href="Alamat Halaman URL blog Shobat" target="_blank" title="Judul">Judul</a></li>
<li><a href="Alamat Halaman URL blog Shobat" target="_blank" title="Judul">Judul</a></li>
<li>Dan seterusnya sesuai link yang akan dimasukan</li>
</ul>
</div></div>
<!--Akhir Menu 1-->

huruf yang ditulis tebal silahkan ganti sesuai dengan keinginan shobat sekalian.

Kemudian pada menu Link Teman :

<!--Awal Menu 2-->

<div class="Page"><div class="Pad">

Isi Menu 2.1<br/>

Isi Menu 2.2<br/>

Isi Menu 2.dst<br/>

</div></div>

<!--Akhir Menu 2-->

Diganti dengan :

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
<ul>
<li><a href="Alamat URL blog Shobat" target="_blank" title="Judul Blog Shobat Anda ">Judul Blog Shobat Anda</a></li>
<li><a href="Alamat URL blog Shobat" target="_blank" title="Judul Blog Shobat Anda ">Judul Blog Shobat Anda</a></li>
<li><a href="Alamat URL blog Shobat" target="_blank" title="Judul Blog Shobat Anda ">Judul Blog Shobat Anda</a></li>
<li>Dan seterusnya sesuai link yang akan dimasukan</li>
</ul>
</div></div>
<!--Akhir Menu 2-->

Untuk Banner Shabat :

<!--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-->

Diganti dengan :

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
<ul>
<a href="http://s1006.photobucket.com/albums/af182/PIKREMAJA/?action=view&current=1521434.pngquot;
<li>Code Banner Shobat Anda</li>

<li>dan seterusnya</li></ul>
</div></div>
<!--Akhir Menu 3-->

Ganti semua huruf yang dicetak tebal sesuai dengan keinginan shobat masing-masing. Shobat semua juga bisa membuat Tab View lebih dari 4. Tinggal teruskan kembali kode-kode diatas.

Selamat mencoba...!!!

Related Post