Membuat Menu Tab View
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”
Tutorial Diatas di-Ilhami Dari
http://miscah.blogspot.com/
Dan
http://blog-tips-and-trick.blogspot.com/
http://miscah.blogspot.com/
Dan
http://blog-tips-and-trick.blogspot.com/
8 komentar:
woww, hoby bener ngutak ngatik HTML
aku aja suka pusing liat tu kode2, hehe ...
niy aja baru memperbaiki template aku, jadi lebih baru, butuh sedikit hal yang berbeda.
itu aja butuh brapa hari, hahaha ...
salam kenal ...
hal yang kuubah buat blog-ku pengen aku share aja
lagian kalo pengen nyoba yg sama kadang suka lupa
jadi ya aku posting kesini aja.......
salam kenal balik
kamu friendly ya ...
eh, kalo mau, add FB aku ya ..
okaii ...
kan bisa dpt ilmu gratis darimu, hehe ..
wkwkwkwk,..
iya,...tapi low suatu saat aku butuh bantuan kamu mohon petunjutknya ya
nah menu tab view wes dadi tapi aku pngen ngrubahnya.. kan kwi materi isine materi.. deskripsi isine deskripsi, tips isine tips edukasi isine edukasi,atiku isine mung mbak ratna... hehhee guyon... kuwi nek kata2ne pngen di rubah kepriwe carane..?? kant nek gonmu materi isine opo kae mau lali ngantian... kepikiran mbi koe ae gek... piye rat..??
kui,... kode neng no 10. kui
iso diganti linknya....iso diganti usernya
kan ono tulisane
1. edukasi
2. edukasi
3. edukasi
misale diganti
1. Andi cute
2. Tapi Boong
nah kode kui iso diganti
lah cara mengisinya bagaimana???
mba cara ngisi tulisan lagi didalam foldernya gimana ya..???
Post a Comment