Langkah Membuat Tab View

Salah satu yang diingini oleh para blogger pemula terhadap blognya adalah bagaimana menampilkan blog seindah mungkin dengan berbagai fasilitas penunjang yang memungkinkan pengunjung betah terhadap blog kita. Uj sendiri belum nyampai ke arah ini, tapi setidaknya ada usaha.

Uj sendiri banyak menemukan berbagai trik yang disampaikan dalam upaya "memperkenalkan" blognya, demikian juga dengan para sobat semua. Salah satunya yang mungkin sering sobat temukan adalah bagaimana caranya membuat Tab Views. Namun tidak salahnya, Uj kali ini mereviews kembali tentang cara membuat Tab Views, dan mudah-mudahan bisa membantu bagi para blogger pemula ( maaf Uj juga blogger pemula ...bro!! ).

Terus bagaimana caranya membuat Tab View, berikut review-nya :

Pertama, silahkan klik kostumisasi pada navbar dihalaman webblog sobat, atau login dulu ke account blogger bila navbar tidak ditampilkan. Pilih / klik tata letak, lalu pilih edit HTML. Sebelumnya simpan template sobat di notepad agar masih ada backup apabila terjadi kesalahan editing guna mengembalikan template ke bentuk semula, atau tinggal contreng di box yang ada disamping tulisan Expand Template Widget, lalu klik "ok". ( ingat ini hanya langkah apabila sobat melakukan kasalahan atau merasa ragu akan editing yang dilakukan )

Kembali ke topik kita, setelah tampilan kede HTML sobat lihat pada box yang tersedia, selanjutnya sobat tinggal cari kode seperti ini :]]>

Untuk pencarian cepat kode diatas, sobat tinggal tekan tombol F3 pada keyboard bila sobat menggunakan fire fox, lalu masukan kode diatas, enter. Secara otomatis sobat akan diarahkan ke kode dimaksud. Bila sobat telah menemukan kode tersebut, silahkan copy paste kode dibawah ini diatas kode tadi, berikut kodenya :

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



Kemudian cari kode ini ( gunakan cara pencarian cepat dengan langkah seperti atas ), bila sudah ketemu, sobat copy paste lagi kode dibawah ini diatas kode tadi, inilah kodenya :