.

Tab view adalah sebuah pengelompokkan artikel dari blog kita agar lebih tertata sesuai kategori artikel masing-masing. tab view juga berguna untuk memudahkan pengunjung untuk melihat daftar artikel blog kita dan mencari informasi yang mereka butuhkan karena dengan tab view ini artikel telah tersusun sesuai kategori dari artikel tersebut. bagi teman yang belum tahu bagaimana bentuk tab view bisa di lihat di sisi kanan atas blog ini. langsung saja berikut cara menambah tab view pada blog..


1. masuk ke blogger-rancangan-editHTML
2. centang tulisan expand template widget
3. letakkan kode berikut sebelum 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 #000000; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: &quot;Arial&quot;, Times New Roman, Serif; /* Font Menu Utama Atas */
font-weight: 900;
color: #000080; /* Warna Font Menu Utama Atas */
}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #BDBDBD; /* Warna background Menu Utama Atas */
}

div.TabView div.Pages
{
clear: both;
background-color: #FFFFFF; /* Warna background Kotak Utama */
border: 1px solid #000000; /* Warna border Kotak Utama */
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;
}

4. letakkan kode berikut 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>
5. simpan template.
6. kemudian masuk ke rancangan-tambah gadget-HTML/JavaScript
7. copas kode berikut ini pada kotak kosong
<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>
8. ganti tulisan tab 1 dengan tips blogger atau kategori dari artikel anda.
9. untuk isi dari kategori di atas tinggal anda ganti tulisan tab 1.1 dengan link artikel anda. contohnya seperti ini
<li><a href="http://www.blogndine.co.cc/2010/09/cara-menambah-mp3-ke-blog.html">Cara menambah mp3 ke blog</a></li>
10. klik simpan dan lihat hasilnya.

selamat mencoba dan jangan lupa di amalkan ya..