Membuat Tab View

Apa itu Tab View…? Apa ya…..
Atau lihat deh contohnya disini, lihat Daftar Isi di side bar kanan. Dalam Tab View bisa kita tampilkan Link, Komentar, Artikel postingan, Banner dll. So, karena berbentuk sebuah kotak yang bisa kita atur besarnya sehingga dapat menghemat ruang sidebar blog kita.

Mau tau cara buatnya:

Langkah pertama:

• Login ke Account Blogger-Mu
• Klik ”Layout / Tata letak” --> "Edit HTML"
• Kemudian cari kode ini ]]></b:skin>
• Copy-kan kode dibawah ini, letakkan sebelum atau diatas kode ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* Lebar Menu Utama Atas */ text-align: center;
height: 24px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000; /* Warna Font Menu Utama Atas */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #FF9900; /* 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;
}

• Perhatikan text-text yang dicetak biru, itu adalah keterangan yang ada di Tab View. Ada ukuran, style border dan warna . Silahkan ganti sesukamu.
Untuk melihat kode warna klik disini.
Melihat style border klik disini.
• Selanjutnya copy kode dibawah ini, letakkan sebelum kode </head>

<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>

• Kemudian Simpan

Langkah Kedua:

• Pilih "Page Elements"
• Trus Pilih "Add a Gadget" --> "HTML/Javascript" untuk meletakkan Tab Menu View ini.
• Copy script dibawah ini kedalamnya:

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">



<div class="Page">
<div class="Pad">
Tab 1.1 <br />
Tab 1.2 <br />
Tab 1.3 <br />
</div>
</div>



<div class="Page">
<div class="Pad">
Tab 2.1 <br />
Tab 2.2 <br />
Tab 2.3 <br />
</div>
</div>


<div class="Page">
<div class="Pad">
Tab 3.1 <br />
Tab 3.2 <br />
Tab 3.3 <br />
</div>
</div>


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


<script type="text/javascript">
tabview_initialize('TabView');
</script><br/>
Trik by: <a href="http://tips-mempercantik-blog.blogspot.com"><font color ="red">Tips Mempercantik Blog</font></a>

• Simpan

Keterangan:

• Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar Tab View.
• Kode yang berwarna Ungu text yang muncul di Menu utama (Menu Atas).
• Kode yang berwarna Kuning adalah isi dari Tab View.

Related Posts