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 :
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----*/
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>
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 != "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>
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 != "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>
</head>
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>
</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>
<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.
Selain bagus tutorialnya, gaya penyampaiannya juga komunikatif karena ada emoticon segala :-)
ReplyDeleteSalam ukhuwah
BeDa > Makasih... baguslah kalo ternyata mudah dipahami.. lama tak bertemu gan.. ntar wa berkunjung & komeng jg ;)
ReplyDeleteijin save ya mas Andi, thanks tutorialnya
ReplyDeletemantab nich, tp di blogQ gak pake edit template jd gak khawatir waktu edit2 template. makasih kang
ReplyDeletemixedfresh > silahkan saja sob.. :)
ReplyDeletemuzzy musthofa > gk pake edit template..kok bisa begitu gan..? hehe.. :D
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..
ReplyDeleteetam grecek > silahkan kapan2 dicoba sob.. :D
ReplyDeletewah makasih mas... sayang q dah buat pakek tab view yang model lainya.. but.. nice info :D
ReplyDeletenah ini yang dicari2,lumyan buat referensi kl blog dah kepenuhan nanti!!!tp blog blom penuh sob,jd ga dulu!!!
ReplyDeletethanks dah share
hanumuslem > emg ada beberapa cara utk membuat menu multi tab ini.. jd tergantung kita mw memkai cara yg mana.. ;)
ReplyDeleteiplock > silahkan disave dulu gan.. :)
mantap.... nambah ilmu jadinya thanks =))
ReplyDeletePerlu dicoba ntar ne sob !!!
ReplyDeletemarkasi mas
ReplyDeletetapi kok agak bingung ya
asli yakin mumet
ReplyDeletentar aja lah nyobane
ilasloteng > thx gan.. :X
ReplyDeleteTopi > silahkan kapan2 dicoba gan.. :D
sigit super > wkwkwkk.... =)) ..gimana kamu ini gan.. ada2 aja.. apa yg bikin bingung ? :-/
Dulu pernah nich bikin yang kyk gini ^_^
ReplyDeleteNice Tutor
Karlz > thx gan.. ntar wa mampir kt4 lu ;)
ReplyDeletebisa dicoba nehh8-}
ReplyDeleteinfonya blm bs di terapkan nh sob
ReplyDeletexanders > silahkan gan.. :D
ReplyDeleteetam grecek > ya ntar2 aj sob... kalo diperlukan.. ;)
This comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeleteThis comment has been removed by a blog administrator.
ReplyDeletewaww. tutorial yang mantep banget sob.. patut dicona demi kebaikna blog.. loh??
ReplyDeletearfi > thx sob ;)
ReplyDeletenice info, tapi sekarang sudah ngga menggunakan blogspot lagi
ReplyDeletePs buat Blog ane, Biar makin bagus. Tanks ya,,,
ReplyDeleteGugun > oke gan gkpp.. di save aj dulu .. :D
ReplyDeleteHamz > Makasih gan.. :X
KERRRREnnnnnnnnnnnnnnnnnn
ReplyDeletewah...!!! keren gan..!! he he.. salam kenal..!!! mau ikutan jadi blogger nih..!!!! thanks atas imfox gan..!!!
ReplyDeleteCut Vivia Talitha > Thx vi.. hanya mencoba membuat tutor yg mudah dipahami.. :)
ReplyDeleteNaruto Online > salam kenal jg.. silahkan dipelajari & dicoba gan.. ;)
sorry aqu mo numpang belajar disini... maklum msh newbie... n jg lam kenal
ReplyDeleteboedy > salam kenal jg budi.. silahkan sj pelajari tutorial yang ada di blog ini.. :X
ReplyDeleteBanyak yg saya curi dari blog ini
ReplyDeletetkhn
Ka Damar > krn ada sahabat blogger yg tanya gan.. makanya gw bahas .. :)
ReplyDeleteKRESEKpikiran > :D asal bisa bermanfaat buatmu silahkan saja gan..
di coba dulu gan,salam kenal gan dari blogtegal.com
ReplyDeletethanks gan,,,,,
ReplyDeletesangat membantu... :D
wah menarik ini mas, sangat membantu !!
ReplyDeleteku copy gan tutuorial ini dan ku pasang di blog ku ok.........kunjungi blog ku ea http://geratisanah.blogspot.com
ReplyDeletemohon bimbingan dan keritik di blog aku ea
thanks tutorialnya.. salam kenal :) ;))
ReplyDeletegan, aku udah coba, namun tidak berhasi.. semua menyatu dalam satu halaman dan tidak berbentuk multi tab... Apa kesalan saya yah? ~x{
ReplyDeleteaku pilih cara yg terakhir
tx. ok sih....tapi edit font sama posisinya gimana gan..?
ReplyDelete