Membuat Menu Tab View

Posted by Gani Mugni Minggu, 27 Maret 2011 0 komentar
Aku lagi dilanda ketagihan ne, tapi bukan lagi katagihan drug lho melainkan ketagihan nge-blog khususnya nge-postingin tutorial. Emang sih tutorialku hamper mirip or sama malahan dengan punya blog sebelah. Sedikit cerita ne, aku suka bgt ntu yang namanya ngutak-atik HTML, wlw gak jarang suka pusing juga gara-gara ntu kode-kode gak jelas.

Aku juga blogger baru kok, n blas gak ada ilmu ttg HTML , makanya setiap hal yang aku lakuin buat blogku pengen aku abadiin, hmm… itung-itung buat pengingat lah.

Awalnya aku pengen punya ntu yang namanya menu tab view (hayah paan ntu?) tapi lirik-lirik sana sini gak ada yang sreg, sekalinya sreg HTML-nya gak bisa respon (gagal maning gagal maning). Makanya isengku kambuh, ku gabungin ntu 2 tutorial ya Alhamdulillah berhasil juga.

Ntar jadinya seperti ini


1. Seperti biasanya Gan, kalian kudu Log-in dulu dengan ID masing-masing.

2. Langkah selanjutnya masuk ke “Rancangan/Tata Letak” kemudian “Edit HTML”

Seperti gambar dibawah ini ya


3. Yang sll aku tekanin kalian kudu “Download Template Lengkap” takutnya jika terjadi kekeliruan gan. Trus ne centang (V) Expand Template Widget.

4. Cari kode ]]></b:skin>
  • Untuk lebih mudahnya tekan CTRL + f
5. Copy paste kode dibawah ini tepat diatas kode ]]></b:skin>


div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 65px; /* Lebar Menu Utama Atas */

text-align: center;
height: 25px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #8F00FF; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #8F00FF; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #8F00FF; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #000000; /* 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;
}


6. Kemudian copy paste kode dibawah ini tepat di atas kode </head>


<script type='text/javascript'>
//<![CDATA[
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);
// ----- Tabs -----
var Tabs = TabView.firstChild;
while (Tabs.className != "Tabs" ) Tabs = Tabs.nextSibling;
var Tab = Tabs.firstChild;
var i = 0;
do
{
if (Tab.tagName == "A")
{
i++;
Tab.href = "javascript:tabview_switch('"+TabViewId+"', "+i+");";
Tab.className = (i == id) ? "Active" : "";
Tab.blur();
}
}
while (Tab = Tab.nextSibling);
// ----- Pages -----
var Pages = TabView.firstChild;
while (Pages.className != 'Pages') Pages = Pages.nextSibling;
var Page = Pages.firstChild;
var i = 0;
do
{
if (Page.className == 'Page')
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+"px";
Page.style.overflow = "auto";
Page.style.display = (i == id) ? 'block' : 'none';
}
}
while (Page = Page.nextSibling);
}
// ----- Functions -------------------------------------------------------------
function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }
function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
//]]>
</script>


7. Kemudian klik “Simpan Template”

8. Kemudian langkah selanjutnya Klik “Rancangan/Tata Letak”

9. Lalu Masuk Ke “Elemen Laman” lalu “Tambahkan Gadget”

10. Kemudian pilih “HTML/JavaScrip” dan masukkan kode dibawah ini


<form action="tabview.html" method="get">

<div id="TabView" class="TabView">

<div style="width: 277px;" class="Tabs">

<a class="Active" href="javascript:tabview_switch('TabView',%201);">Materi</a>

<a class="" href="javascript:tabview_switch('TabView',%202);">Deskripsi</a>

<a class="" href="javascript:tabview_switch('TabView',%203);">Tips</a>

<a class="" href="javascript:tabview_switch('TabView',%204);">Edukasi</a>
</div>

<div style="width: 277px; height: 180px;" class="Pages">

<div style="overflow: auto; height: 200px; display: block;" class="Page">

<div class="Pad">
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Materi</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Materi</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Materi </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Materi </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Materi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Materi</a></li>

</div>

</div>

<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">

<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Deskripsi</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Deskripsi</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4.Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Deskripsi </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Deskripsi </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Deskripsi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Deskripsi</a></li>

</div>

</div>

<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">

<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Tips</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Tips</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Tips </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Tips </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Tips </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Materi</a></li>

</div>

</div>
<div style="overflow: auto; height: 200px; display: none;" class="Page">

<div class="Pad">

<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 1. Edukasi</a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 2. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 3. Edukasi</a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 4. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 5. Edukasi </a></li>
<li><a href="# "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 6. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 7. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 8. Edukasi </a></li>
<li><a href=" #"><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 9. Edukasi </a></li>
<li><a href=" # "><img src="http://sites.google.com/site/cumaisenggroup/Home/Purplearrow.gif" /> 10. Edukasi </a></li>
</div>

</div>

</div>

</div></form>

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


11. Lalu “Simpan”
TERIMA KASIH ATAS KUNJUNGAN SAUDARA
Judul: Membuat Menu Tab View
Ditulis oleh Gani Mugni
Rating Blog 5 dari 5
Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://azharadzuan.blogspot.com/2011/03/membuat-menu-tab-view.html. Terima kasih sudah singgah membaca artikel ini.

0 komentar:

Posting Komentar

Panduan blog dan SEO support Jual Online Baju Wanita - Original design by Bamz | Copyright of Azhara Blog.