Cara membuat Multi tab widget view untuk blogger

Ngerti gk tab menu view itu?? tab menu view itu menu yang biasanya berada disamping atau side bar yang dalam satu kolom itu punya beberapa menu, untuk lebih jelasnya lihat contohnya di sini   seperti pada gambar di bawah ini

tab menu view

1. Login ke account blogger kamu trus pilih menu "Layout ---> Edit HTML"
2. Kemudian cari kode ini </head>
3. Kalau dah dapat paste kode di bawah ini diatasnya

    <link rel="stylesheet" type="text/css" href="http://dsai.588.googlepages.com/tabcontent.css" />
    <script type="text/javascript" src="http://dsai.588.googlepages.com/tabcontent.js">
    /***********************************************
    * Tab Content script v2.2- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
    * This notice MUST stay intact for legal use
    * Via http://BloggerStop.Net
    * Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
    ***********************************************/
    </script>

4. Kemudian save template

5. Setelah itu klik page element dan Add gadget dan pilih HTML/JavaScrip

6. Setelah itu paste code dibawah ini di dalamnya

    <div id="pettabs" class="indentmenu">

    <ul>

    <li><a href="#" rel="dog1" class="selected">Tab 1</a></li>

    <li><a href="#" rel="dog2">Tab 2</a></li>

    <li><a href="#" rel="dog3">Tab 3</a></li>

    <li><a href="#" rel="dog4" id="myfavorite">Tab 4</a></li>

    <li><a href="http://www.barumbung.co.cc">Blogger Widgets</a></li>

    </ul>

    <br style="clear: left" />

    </div>

    <div style="border:1px solid gray; width:550px; height: 150px; padding: 5px; margin-bottom:1em">

    <div id="dog1" class="tabcontent">
    Tab content 1 here<br />Tab content 1 here<br />
    <p><b><a href="javascript: mypets.expandit('myfavorite')">Click here to select tab with id="myfavorite"</a></b></p>
    </div>

    <div id="dog2" class="tabcontent">
    Tab content 2 here<br />Tab content 2 here<br />
    </div>

    <div id="dog3" class="tabcontent">
    Tab content 3 here<br />Tab content 3 here<br />
    </div>

    <div id="dog4" class="tabcontent">
    Tab content 4 here<br />Tab content 4 here<br />
    </div>

    </div>

    <script type="text/javascript">

    var mypets=new ddtabcontent("pettabs")
    mypets.setpersist(true)
    mypets.setselectedClassTarget("link")
    mypets.init(2000)

    </script>
    <a href="http://www.barumbung.co.cc/" target="_blank"><span style="font-size: x-small;">Blogger Widgets</span></a>

7. Selanjutnya update dan lihat hasilnya.

Catatan : Tulisan yang berwarna biru adalah code yang anda bisa ganti untuk mengatur tinggi dan lebarnya, dan warna merah adalah isi dari multi tabview teresebut

Gimana dah ngerti kan bikin tab view nya....mau contoh lagi..klik aja di sini

Maksih ya dah datang...lain kali datang lagi.

Kalau cara yang pertama tidak berhasil! silakan coba cara yang berikut..

    * Login ke account blogger kamu dan pilih Edit HTML
    * Cari code berikut ]]></b:skin>
    * Masukkan code di bawah ini sebelum code diatas

    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; /* Color 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; /* Color Font Menu Utama Atas */

    }

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

    {

    background-color: #FF9900; /* Color background Menu Utama Atas */

    }

    div.TabView div.Pages

    {

    clear: both;

    border: 1px solid #6E6E6E; /* Color border Kotak Utama */

    overflow: hidden;

    background-color: #FF9900; /* Color 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;

    }

    * Teks-teks yang berwarna merah adalah keterangan code yang anda boleh rubah, untk pengaturan warna tab view anda.
    * Selanjutnya anda cari code </head>
    * Masukkan code di bawah ini sebelum tag </head>

    <script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

    * Kemudian anda save HTML anda dan selanjutnya...
    * Masuk ke Elemenen halaman-->Add Widget-->Pilih HTML/JavaScript
    * Dan Masukkan Code di bawah ini ke dalamnya....

    <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

Simpan hasilnya....