Membuat TabView / tabbertab

Menu tampilan tabview / tabbertab sudah banyak digunakan pada blog. Tabbertab tampilan sangat berguna, terutama dalam hal menghemat ruang. Karena, pada tab widget tampilan, kotak bisa terdiri dari beberapa tabview.
Mungkin Anda pernah membaca tutorial seperti ini banyak tutorial blog, tapi tidak ada salahnya untuk kita tinjau sekali lagi.
Saya belajar tutorial widget blog ini setelah beberapa kali mencoba untuk menginstal tampilan tabview beberapa blog , tetapi tidak dapat digunakan atau tidak sesuai dengan template ,kemudian saya mencoba mencari lagi akhirnya saya mendapatkan blog widget ini .

Membuat TabView / tabbertab

1. Login ke blogger kemudian pilih menu "Layout -> Edit HTML"
2. Kemudian cari kode ini ]]>
3. Kemudian masukkan kode berikut sebelum kode ]]> atau ke dalam tag CSS

copy paste kode ini:

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Main Menu Top Width */ text-align: center;

height: 24px; /* Top High Main Menu */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Top Menu border color */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Top Fonts Main Menu */

font-weight: 900;

color: #000; /* Main Menu Font Color Top */

}

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

{

background-color: #FF9900; /* Background colors on Main Menu */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Main Box border color */

overflow: hidden;

background-color: #FF9900; /* Main Box background color */

}

div.TabView div.Pages div.Page

{

height: 100%;

padding: 0px;

overflow: hidden;

}

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

{

padding: 3px 5px;

}

4. Perhatikan teks-teks yang hitam dan tebal, itu adalah kesaksian pengaturan Tab View. Ada ukuran warna dll


5. salin berikut sebelum kode</head>

copy paste kode 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>

6. Kemudian  save'
7. Lalu pergi ke menu "Elemen Halaman"
8. Kemudian Pilih "Tambah Gadget" -> "HTML / Javascript" di tempat yang akan Anda masukkan tab menu View.
9. copas script ini

copy paste kode ini:

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

klik save
Anda dapat mengisinya dengan link, gambar, banner, script, dll.bila anda ingin melakukan dengan cara lain tenang ,, masih ada satu cara lagi  buat tabbertab tanpa mengubah Templete ..dan jangan lupa berikan komentar