membuat menu tab di blog

aku pernah lihat blog orang.saya lihat widgetnya.kotak manunya itu ada tab nya.terus aku jadi kepingin membuatnya.saya browsing di google.akhirnya ketemu.kotak ini fungsinya banyak sekali,bisa buat menyimpan link temen,daftar isi blog kamu,iklan,dan lain lain.jika kamu gak tahu bagai mana contoh kotak nya lihat aja widget blog aku yang kanan atas.yang tulisanya menu.langsng aja cara cara nya sebagai berikut:
1.kamu masuk account blog kamu
2.masuk tata letak ---> editHTML
3.cari kode ]]></b:skin> dan copy kode di bawah ini:

div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px;
    text-align: center;
    height: 24px;
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000000;
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Arial", Times New Roman, Serif;
    font-weight: 900;
    color: #000080;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #BDBDBD;
    }
    div.TabView div.Pages
    {
    clear: both;
    background-color: #FFFFFF;
    border: 1px 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;
    }

4.dan letakan kode tersebut di atasnya ]]></b:skin>
5.setelah itu kamu cari lagi kode </head>
dan copy kode di bawah 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.simpan template,ini belum selesai.tugas terakir
7.masuk ke tata letak ---> elemen laman--->tambah gedget--->HTML/javascript
lalu masukan code di bawah ini:

<form action="tabview.html" method="get">
    <div class="TabView" id="TabView">
    <div class="Tabs" style="width: 200px;">
    <a>==link==</a>
    <a>Judul Tab 2</a>
    </div>
    <div class="Pages" style="width: 184px; height: 200px;">
    <div class="Page">
    <div class="Pad">
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
  <div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
<div class="list">
<a href="url anda" target=_blank>tulisan anda</a></div>
    </div>
    </div>
    <div class="Page">
    <div class="Pad">
    </div>
    </div>
    </div>
    </div>
    </form>
    <script type="text/javascript">
    tabview_initialize('TabView');
    </script>

keterangan:
ganti tulisan ==link== untuk judul tap pertama
ganti tulisan Judul Tab 2 untuk judul tap ke dua
ganti tulisan url anda dengan url anda
dan ganti tulisan anda dengan tulisan yang akan anda buat
itu saja info dari saya semoga bermanfaat bagi anda semua...
jangan lupa komentarnya...

Posted in: blogger,tutorial blog,WIDGET