Membuat Menu Tab View
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
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 Unknown
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.Ditulis oleh Unknown
Rating Blog 5 dari 5
0 komentar:
Posting Komentar