Tuesday, June 29, 2010

CARA MEMBUAT MENU MULTI TAB DI BLOG...

...Menjawab pertanyaan dari Sobat 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 " ..baiklah kalau begitu akan saya bahas melalui posting ini..

MySpace...Menu Multi Tab ini biasanya digunakan pada blog yang kontennya sudah padat.. jadi bisa menghemat ruang .. 3 in 1 widget jadinya...tinggal klik tabnya saja untuk berpindah-pindah ke isi menu tab berikutnya... didalam widget multi tab ini pada tiap-tiap tab-nya bisa kamu sematkan kode script Buku Tamu (Tab 1), Kode script Daftar isi (Tab 2), dan Kode Script Blogroll (Tab 3) atau terserahlah sesuai keinginan kamu...

MySpace...Pahami langkah-langkah cara membuatnya berikut ini ;

A. Menyisipkan Kode Script Menu Multi Tab di Kode HTML Template Blog

1. Seperti biasa.. Login ke Blogger > Rancangan > Edit HTML ( Biasakan centang expand template widget )..
2. Lalu Copy kode script 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 kan 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. Kembali ke Wigdet Edit HTML... 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. Jika sudah selesai dan benar, sesuai dengan langkah-langkah diatas.. maka klik Simpan Template...


B. Menambahkan Widget Menu Multi Tab di Elemen Halaman Blog

1. Blogger > Rancangan > Elemen Halaman > Tambah Gadget > HTML/Javascript... ( Silahkan letakan widget Menu Multi Tab ini di bagian halaman blog yang kamu inginkan )...
2. Lalu Copy kode script 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>GANTILAH NAMA MENU TAB 1 INI</a>
<a>GANTILAH NAMA MENU TAB 2 INI</a>
<a>GANTILAH NAMA MENU TAB 3 INI</a>
</div>
<div class="Pages" style="width: 465px; height: 250px;">

<div class="Page">
<div class="Pad">
ISI MENU TAB 1 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 2 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

<div class="Page">
<div class="Pad">
ISI MENU TAB 3 - PASTE KODE SCRIPT BUKU TAMU ATAU DAFTAR ISI ATAU BLOGROLL DISINI YA..
</div>
</div>

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

<script type="text/javascript">
tabview_initialize('TabView');
</script>
3. Jika sudah.. Simpan & Refresh blog kamu untuk melihat hasilnya...


MySpace
...Menghemat Ruang Blog...

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.

Emoticon : Untuk menyisipkan emoticon dalam komentar, silahkan klik pada emoticons icon yang tersedia dibawah ini untuk melihat kodenya lalu tinggal di copy dan di paste [ sisipkan ] kodenya ke dalam komentar.