15 April 2009

MEMBUAT TAB VIEW

Membuat tab view seperti yang terpajang di kolom sidebar kanan bawah di blog ini tidaklah sulit, buktinya ... aku saja bisa ( kebetulan gitu ... ), tentunya, sobat-sobat juga bisa. Nah, tanpa nobro.. lagi, langsung saja kita ikuti langkah-langkah membuatnya.


  1. Login dulu ke acount blogger sobat, atau bila sobat sudah berada dihalaman muka blog, silahkan klik tab kustomisasi, pilih tata letak, lalu pilih EDIT HTML
  2. Contreng kotak yang bertuliskan "Expand Template Widget"
  3. Kemudian cari kode berikut : ]]> </b:skin>
Untuk pencarian cepat tekan saja tombol F3 pada keyboard, masukan kode diatas, lalu enter, nanti secara otomatis akan terarah sendiri ke kode yang dicari.

Bila sudah ketemu kode diatas, silahkan letakan kode dibawah ini diatasnya :

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





Cari lagi kode berikut : </head> melalui cara seperti diatas,
dan bila sudah ketemu, silahkan copy kode yang ada disini dulu, kemudian paste diatas kode tersebut.

Sampai disini, tahapan memasukan kode sudah selesai
  • Simpan / Save edit template sobat
  • Pilih tambah elemen halaman, >>>>>>> klik tambah Gadget ( terserah mau diletakkan dimana, tapi biasanya pada halaman sidebar atau pada halaman footer )
  • Akan muncul box pilihan gadget >>>>>> pilih HTML / JavaScript
  • Kemudian copy paste kode yang ada disini
  • Simpan / Save ----->> SELESAI

Sumber : Optimasi Blog

Tidak ada komentar:

Posting Komentar