Membuat Menu Tab View

menu tabview adalah menu yang terbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu di atas . menu ini banyak di pakai untuk menghemat tempat pada blog dengan sistem menampilakan atau menutupi halaman tabel sesuai dengan  tabel menu di atasnya. jadi jika mengklick menu di atasnya maka halaman tabel yang muncul adalah halaman tabel yang di buat sesuai dengan menu tabel di atasnya ,dan jika mengklick menu tabel lain maka yang muncul adalah halaman tabel yang bersesuaian namun pada satu tempat itu

Coba perhatikan dibawah ini :


Gimana sudah paham belum? mau cara buatnya?

Oke kita pakai teori dari Mas Kendhin saja karena mudah dipahami.

Pertama yang harus kamu lakukan adalah Log In dan masuk menu Layoutkemudian masuk bagian Edit HTML

Selanjutnya taruh code CSS dibawah ini diatas code ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* Warna 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;
}

1. code berwarna hijau muda di ganti dengan warna hitam

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://sites.google.com/site/anasku2000/tabview.js' type='text/javascript'/>

1. code yang berwarna hijau muda di ganti dengan warna hitam
kalu sudah silahkan "Save Template" Anda.

kemudian masuk bagian "Layout -> Page Elements, lalu cari tempat gadgetnya kemudian klik Add new gadget kemudian pilihHTML/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 :

1. Code yang berwarna biru diatas adalah lebar dan tinggi tabview yang bisa kamu sesuaikan.
2. Code yang berwarna hijau adalah text judul dari menu tabel (tab 1, tab 2, tab 3 ....)
3. Code yang berwarna merah diatas adalah halaman dari tabel yang bisa kamu pasangi code-code gagdet, gambar atau link.
4. Dan jika ingin menambah halaman tabel perhatikan code yang berkedip, dan tambah seperti itu dibawahnya.
5. code yang berwarna hijau muda di ganti dengan warna hitam

Kalau sudah tinggal SAVE.

Posted By  Anasku On Feb 22, 2009 at 7:00 PM

Hyperlink html

Hyperlink atau sering di singkat dengan link penjelasan serta contoh-contohnya dapat di lihat di Belajar HTML tentang Hyperlink HTML. Sedikit koreksi dari contoh link dengan gambar yang kita buat disana yaitu:

<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="contoh.jpg" border="0" width="147" height="31" align="left" alt="yahoo"></a>
Atribut border dan align merupakan deprecated atribut jika di gunakan di dalam tag <img> jadi kita dapat menggantinya dengan atribut style dengan properti border untuk atribut border dan properti float untuk atribut align.

<a href="http://www.yahoo.com" title="Hai... klik gambar ini maka anda akan dibawa ke Yahoo.com"><img src="yahoo.gif" style="border:none;float:left" width="147" height="31" alt="yahoo"/></a>
Hasil:



Lorem ipsum dolor sit amet, nulla gravida fusce, sem id. Lectus justo condimentum. Arcu fringilla velit. Pretium elit id, scelerisque penatibus fermentum, adipiscing dui. Habitasse ut. Ac in, semper aliquam ligula, quisque class tellus.

Hyperlink yang akan kita pelajari dalam tutorial ini sebagai tambahan dari pelajaran HTML sebelumnya antara lain: Thumbnail link. Thumbnail link digunakan untuk gambar yang berukuran besar. Caranya dengan membuat duplikat dari gambar tersebut dengan ukuran yang jauh lebih kecil yang disebut dengan thumbnail. Jadi gambar ukuran besar tersebut baru ditampilkan setelah kita mengklik gambar tumbnail tersebut.

<a href="lokasi gambar original"><img src="lokasi gambar thumbnail"></a>
Contoh:

<a href="images/besar-1160X700px.jpg"><img src="images/kecil-150X100px.jpg" style="border:none" width="150" height="100" title="Klik untuk melihat gambar original" alt="contoh tumbnail" /></a>
Hasil:



Membuat link di dalam satu halaman website.

Pada tulisan ini tepatnya pada bagian atas setelah titel Hyperlink HTML saya menambahkan tag di bawah ini:

<a name="top"></a>
Dengan tag tersebut kita dapat membuat link ke lokasi tersebut dengan membuat link seperti berikut ini:

Klik link berikut untuk <a href="#top">Kembali ke atas</a>
Hasil:

Klik link berikut untuk Kembali ke atas

Dengan cara diatas kita juga bisa membuat link ke suatu halaman website dan langsung melompat ke topik tertentu di dalam satu halaman.

Link berikut akan membawa anda ke halaman Belajar HTML dengan topik <a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>.
Hasil:

Link berikut akan membawa anda ke halaman Belajar HTML dengan topik Hyperlink HTML.

Contoh diatas dapat dibuat dengan menambahkan tag berikut sebelum titel Hyperlink HTML di dalam halaman tujuan seperti contoh diatas adalah halaman Belajar HTML:

<a name="hyperlink-html"></a>
Atau bisa juga dengan menambahkan atribut "id" di dalam tag titel. Seperti contoh diatas, titel Hyperlink HTML tersebut berada di dalam tag <h3> jadi kita bisa menuliskan:

<h3 id="hyperlink-html">Hyperlink HTML</h3>
Untuk membuat link ke lokasi tersebut kita harus membuat link ke halaman utamanya dulu baru kemudian di ikuti dengan nama atau id dengan format: "#nama-link".

<a href="http://htmlcssguides.com/belajar-html#hyperlink-html">Hyperlink HTML</a>
Hasil:

Hyperlink HTML

Membuat Email Link.

<a href="mailto:alamat email">link teks</a>
Contoh:

Jika ada masalah silahkan kirim <a href="mailto:support@nama-domain.com">Email</a> ke bagian pelayanan.
Hasil:

Jika ada masalah silahkan kirim Email ke bagian pelayanan.

Next tutorial: Background HTML.