Minggu, 22 Mei 2011

Cara Membuat Tabview Unik Untuk Blog

Apa itu tabview?Itu adalah semacam Pengaturan sidebar Multi Kolom Agar bisa memuat banyak Konten .Nah mau tahu cara membuatnya?Ayo ikuti langkah-langkahnya sebagai Berikut :




  • Login Ke blogger, Kemudian Klik rancangan --> Edit HTML"
  • Lalu temukan kode ]]></b:skin> dengan CTRL +F
  • lalu letakkan kode berikut sebelum/diatas kode  ]]></b:skin> atau di  CSS tag.

  • div.TabView div.Tabs
    {
    height: 24px;
    overflow: hidden;
    }
    div.TabView div.Tabs a
    {
    float: left;
    display: block;
    width: 90px; /* Ukuran lebar  tabview */
    text-align: center;
    height: 24px; /*ukuran tinggi  tabview */
    padding-top: 3px;
    vertical-align: middle;
    border: 1px solid #000; /*warna border tabview */
    border-bottom-width: 0;
    text-decoration: none;
    font-family: "Times New Roman", Serif; /*font tabview */
    color: #000; /* Top main menu font color */
    font-weight: 900;
    }
    div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
    {
    background-color: #FF9900; /* Warna Background Menu atas*/
    }
    div.TabView div.Pages
    {
    clear: both;
    border: 1px solid #6E6E6E; /* Warna Border Isi */
    overflow: hidden;
    background-color: #FF9900; /* Warna Background Isi tabview */
    }
    div.TabView div.Pages div.Page
    {
    height: 100%;
    padding: 0px;
    overflow: hidden;
    }
    div.TabView div.Pages div.Page div.Pad
    {
    padding: 3px 5px;
    }
  • Ganti Kode warna Pada tabviewmu sesuai warna yang kamu Inginkan.Kalau mau contohnya lihat disini
  • lalu letakkan Kode berikut diatas Kode </head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>

  • Lalu save Template
  • Kemudian Pergi Ke tata letak  "Page Elements" menu
  • Klik "Add Page Element" lalu pilih gadget "HTML/Javascript" Lalu letakkan Kode berikut dengan cara copy paste

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


CATATAN
  1. Kode Berwarna Biru (350px) adalah ukuran dari  tabview.
  2. Kode berwaran Hijau adalah Text di menu Utama
  3. Kode berwarna merah itulah Kode widget atau script yang mengisi Tabview
  4. Untuk Menambah Tabview,sobat tinggal menambah kode seperti menu berkedip itu dibawahnya,jangan lupa kode berwarna hijau juga ditambahkan


Good luck every body.Kalau Mau share Jangan lupa Link baliknya Oke..

0 komentar:

Posting Komentar