Tuesday, June 29, 2010

Gadget Menu Multi Tab


Ada pertanyaan dari sobat blogger Sigit Super... " oia gan caranya buat daftar isi kaya bung book online gimana?ajarin lagi dong.cz kemarin aku nyoba dengan tak contek di view page source malah eror ".

Gadget menu multi tab ini biasanya digunakan untuk menghemat ruang karena bisa 3 gadget di dalam 1 gadget, tinggal klik menu tabnya saja untuk berpindah ke widget lainnya.


Langkah-langkah sebagai berikut :

1. Login ke blogger > rancangan > edit html, centang expand template widget.

2. Lalu copy kode dibawah ini.
/*----MultiTab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/

3. Dan paste sebelum kode ]]></b:skin> seperti contoh dibawah ini.
/*----MultiTab----*/
div.TabView div.Tabs
{
height: 35px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
background-color: #56FCFA;
-moz-border-radius:10px 0px 0px 0px;
width: 125px;
text-align: center;
height: 35px;
padding-top: 3px;
vertical-align: middle;
border: 0px solid #999999;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #56FCFA;
text-shadow: 4px 4px 4px #aaa;
font-size:12px;
}
div.TabView div.Pages
{
clear: both;
border: 0px solid #999999;
-moz-border-radius:0px 0px 0px 10px;
text-shadow: 4px 4px 4px #aaa;
font-size:14px;
overflow: hidden;
background-color: #56FCFA;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
/*----end----*/
]]></b:skin>

4. Kemudian copy lagi kode dibawah ini.

<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

5. Paste kan lagi sebelum kode </head> seperti contoh dibawah ini.
<script type='text/javascript'>
function tabview_aux(TabViewId, id)
{
var TabView = document.getElementById(TabViewId);

// ----- Tabs -----

var Tabs = TabView.firstChild;
while (Tabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

var Tab = Tabs.firstChild;
var i = 0;

do
{
if (Tab.tagName == &quot;A&quot;)
{
i++;
Tab.href = &quot;javascript:tabview_switch(&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
Tab.className = (i == id) ? &quot;Active&quot; : &quot;&quot;;
Tab.blur();
}
}
while (Tab = Tab.nextSibling);

// ----- Pages -----

var Pages = TabView.firstChild;
while (Pages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

var Page = Pages.firstChild;
var i = 0;

do
{
if (Page.className == &#39;Page&#39;)
{
i++;
if (Pages.offsetHeight) Page.style.height = (Pages.offsetHeight-2)+&quot;px&quot;;
Page.style.overflow = &quot;auto&quot;;
Page.style.display = (i == id) ? &#39;block&#39; : &#39;none&#39;;
}
}
while (Page = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switch(TabViewId, id) { tabview_aux(TabViewId, id); }

function tabview_initialize(TabViewId) { tabview_aux(TabViewId, 1); }
</script>

</head>

6. Simpan Template.

7. Tambah gadget > html/javascript.

8. Lalu copy kode dibawah ini.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 80;text-shadow: 4px 4px 4px #aaa;font-size: 12px;">
<a>Nama menu tab 1</a>
<a>Nanti menu tab 2</a>
<a>Nama menu tab 3</a>
</div>
<div class="Pages" style="width: 465px; height: 250px;">

<div class="Page">
<div class="Pad">
Paste disini kode widget pertama
</div>
</div>

<div class="Page">
<div class="Pad">
Paste disini kode widget kedua
</div>
</div>

<div class="Page">
<div class="Pad">
Paste disini kode widget ketiga
</div>
</div>

</div>
</div>
</form>

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

9. Simpan & refresh blog.


Selamat Mencoba.


47 comments:

  1. Selain bagus tutorialnya, gaya penyampaiannya juga komunikatif karena ada emoticon segala :-)

    Salam ukhuwah

    ReplyDelete
  2. BeDa > Makasih... baguslah kalo ternyata mudah dipahami.. lama tak bertemu gan.. ntar wa berkunjung & komeng jg ;)

    ReplyDelete
  3. ijin save ya mas Andi, thanks tutorialnya

    ReplyDelete
  4. mantab nich, tp di blogQ gak pake edit template jd gak khawatir waktu edit2 template. makasih kang

    ReplyDelete
  5. mixedfresh > silahkan saja sob.. :)

    muzzy musthofa > gk pake edit template..kok bisa begitu gan..? hehe.. :D

    ReplyDelete
  6. mantap nh infonya..aku juga kemarin nanya sama kang muzzy mustofa...okelah ntar di coba..tp msh bnyak gawean nh jd cm bs blogwalking dl..

    ReplyDelete
  7. etam grecek > silahkan kapan2 dicoba sob.. :D

    ReplyDelete
  8. wah makasih mas... sayang q dah buat pakek tab view yang model lainya.. but.. nice info :D

    ReplyDelete
  9. nah ini yang dicari2,lumyan buat referensi kl blog dah kepenuhan nanti!!!tp blog blom penuh sob,jd ga dulu!!!
    thanks dah share

    ReplyDelete
  10. hanumuslem > emg ada beberapa cara utk membuat menu multi tab ini.. jd tergantung kita mw memkai cara yg mana.. ;)

    iplock > silahkan disave dulu gan.. :)

    ReplyDelete
  11. mantap.... nambah ilmu jadinya thanks =))

    ReplyDelete
  12. Perlu dicoba ntar ne sob !!!

    ReplyDelete
  13. markasi mas
    tapi kok agak bingung ya

    ReplyDelete
  14. asli yakin mumet
    ntar aja lah nyobane

    ReplyDelete
  15. ilasloteng > thx gan.. :X

    Topi > silahkan kapan2 dicoba gan.. :D

    sigit super > wkwkwkk.... =)) ..gimana kamu ini gan.. ada2 aja.. apa yg bikin bingung ? :-/

    ReplyDelete
  16. Dulu pernah nich bikin yang kyk gini ^_^
    Nice Tutor

    ReplyDelete
  17. Karlz > thx gan.. ntar wa mampir kt4 lu ;)

    ReplyDelete
  18. infonya blm bs di terapkan nh sob

    ReplyDelete
  19. xanders > silahkan gan.. :D

    etam grecek > ya ntar2 aj sob... kalo diperlukan.. ;)

    ReplyDelete
  20. waww. tutorial yang mantep banget sob.. patut dicona demi kebaikna blog.. loh??

    ReplyDelete
  21. nice info, tapi sekarang sudah ngga menggunakan blogspot lagi

    ReplyDelete
  22. Ps buat Blog ane, Biar makin bagus. Tanks ya,,,

    ReplyDelete
  23. Gugun > oke gan gkpp.. di save aj dulu .. :D

    Hamz > Makasih gan.. :X

    ReplyDelete
  24. wah...!!! keren gan..!! he he.. salam kenal..!!! mau ikutan jadi blogger nih..!!!! thanks atas imfox gan..!!!

    ReplyDelete
  25. Cut Vivia Talitha > Thx vi.. hanya mencoba membuat tutor yg mudah dipahami.. :)

    Naruto Online > salam kenal jg.. silahkan dipelajari & dicoba gan.. ;)

    ReplyDelete
  26. sorry aqu mo numpang belajar disini... maklum msh newbie... n jg lam kenal

    ReplyDelete
  27. boedy > salam kenal jg budi.. silahkan sj pelajari tutorial yang ada di blog ini.. :X

    ReplyDelete
  28. klo Tab View sih udah bisa Kang..SIP

    ReplyDelete
  29. Banyak yg saya curi dari blog ini

    tkhn

    ReplyDelete
  30. Ka Damar > krn ada sahabat blogger yg tanya gan.. makanya gw bahas .. :)

    KRESEKpikiran > :D asal bisa bermanfaat buatmu silahkan saja gan..

    ReplyDelete
  31. di coba dulu gan,salam kenal gan dari blogtegal.com 

    ReplyDelete
  32. thanks gan,,,,,
    sangat membantu... :D

    ReplyDelete
  33. wah menarik ini mas, sangat membantu !!

    ReplyDelete
  34. ku copy gan tutuorial ini dan ku pasang di blog ku ok.........kunjungi blog ku ea http://geratisanah.blogspot.com
    mohon bimbingan dan keritik di blog aku ea

    ReplyDelete
  35. thanks tutorialnya.. salam kenal :) ;))

    ReplyDelete
  36. Info yang baguz sekali untuk disimak.....
    Bermanfaat sekali untuk saya....

    Mohon kunjungan baliknya yaa....
    Dan saya juga sangat berterima kasih sekali kalau anda berkenan FOLLOW dan Backlink Blog sederhana saya.... :-)

    ( http://zamrudhijau.blogspot.com/ )

    ReplyDelete
  37. gan, aku udah coba, namun tidak berhasi.. semua menyatu dalam satu halaman dan tidak berbentuk multi tab... Apa kesalan saya yah? ~x{

    aku pilih cara yg terakhir

    ReplyDelete
  38. tx. ok sih....tapi edit font sama posisinya gimana gan..?

    ReplyDelete
N.B.
1. Berkomentarlah dengan sopan.
2. Dilarang membuat spam, terutama yang mengandung SARA/ Pornografi/ Judi dan Iklan.