Home » » Cara Membuat Menu Tab View

Cara Membuat Menu Tab View


Cara Membuat Menu Tab View


Cara Membuat Menu Tab View

tab viewSaya juga bingung dengan widget yang banyak harus di pasang di sidebar blog tapi tidak mencukupi, karena tidak mencukupi widget di sidebar saya pasang widget Menu Tab View seperti gambar disamping. Nah ini cara membuat menu tab view :
1. Masuk blogger dengan ID blog Sobat.
2. Pilih Menu Rancangan > edit html.
3. Centang expand template widget.
4. Cari kode ]]></b:skin>


5. Copy kode atau script di bawah ini kemudian paste tepat di atas kode ]]></b:skin>
 div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 103px;

text-align: center;

height: 24px;

padding-top: 3px;

vertical-align: middle;

border: 0.5px solid #000000;

border-bottom-width: 0;

text-decoration: none;

font: 12px Arial, "Times New Roman", Serif;

font-weight: 900;

color: #000080;

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #CEF6CE;

}

div.TabView div.Pages

{

clear: both;

background-color: #FFFFFF;

border: 0.5px solid #000000;

overflow: hidden;

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

div.TabView div.Pages div.Page div.Pad

{

padding: 3px 5px;

}

Perhatikan tulisan :
width: 103px; = lebar tabs (tab1, tab2, tab3).
background-color: #CEF6CE; = warna latar belakang tabs (tab1,tab2,tab3).
NB : Bisa di ganti dengan keinginan sobat.

6. Cari kode </head>    Copy kode dibawah ini lalu pastekan di atas kode </head>
<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>
7. Simpan / Save Template.
8. Selanjutnya Klik Design/Rancangan >> Page Element/Elemen Laman.
9. Add a Gadget >>HTML/Javascript
10. Copy kode di bawah ini di dalam box atau kotak HTML/Javascript
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Judul Tab 1</a>
<a>Judul Tab 2</a>
<a>Judul Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">
<div class="Page">
<div class="Pad">
Isi tab 1
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 2
</div>
</div>
<div class="Page">
<div class="Pad">
Isi tab 3
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Perhatikan tulisan merah width: 350px; ini adalah ukuran kotak seluruhnya bukan per tab. Kemudian tulisan Judul Tab 1,2,3 itu adalah lah judul tab, contoh gambar di atas judulnya adalah recent post, recent comment, statistic. Kemudian Isi tab 1,2,3  bisa di isikan script html, banner dan script widget


Cara Membuat Menu Tab View


DOWNLOAD NOW (MIRROR LINK)


Cara Membuat Menu Tab View

Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Tips Trik Blog

0 comments:

Post a Comment

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2011. Tips Trik Blog™ - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger