Pada waktu lalu pernah kita bersama membahas soal pembuatan recent post pada sidebar, untuk kali ini Awanzo Blogs akan mencoba menyajikan santapan pengetahuan mengenai pembuatan tab view pada sidebar.
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab*/
height: 22px; /* Tinggi Kotak Tab*/
text-align: center; /* Posisi Teks Menu Tab ** Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas*/
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten*/
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak Teks Dalam Content Tab */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: # fff "> Tab1 </span></a>
<a><span style="color: # fff "> Tab2 </span></a>
<a><span style="color: # fff "> Tab3 </span></a>
</div>
<div style="width: 300 px; height: 200 px;" class="Pages">
<div class="Page">
<div class="Pad">
konten 1
</div>
</div>
<div class="Page">
<div class="Pad">
konten 2konten 2
</div>
</div>
<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>
<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>
Setelah beberapa hari mencoba tampilan tab view yang untuk scriptnya sendiri di ambil dari blog sahabat creating website. Tab view yang ukuran dan tampilanya cukup simpel serta di tambah sebuah icon anak panah yang berada pada setiap link yang kita taruh di dalamnya.
Untuk tujuan pemasangan tab view biasanya diberlakukan pada blog yang memiliki pilihan konten, kategori blog, atau widget yang untuk penempatannya memerlukan tempat terpisah. Tujuannya adalah untuk memudahkan para pengunjung untuk menemukan artikel yang mereka cari.
Seperti contoh : artikel yang menurut sobat sebagai unggulan, kumpulan link sahabat dll.
Tapi ada juga tab view diberlakukan bagi sobat blogger yang kekurangan tempat dalam menampilkan label, atau konten yang ada.
Selain itu penggunaan tab view juga memberi kesan rapi pada tampilan blog. Perlu dimengerti pada sebuah pembangunan blog yang besar tidak hanya cuma perlu mengedit ataupun memasang meta description dan juga meta keywordmemasang meta content dan juga meta keyword saja pada blog tapi perlu tampilan yang indah serta rapi. Jadi jika ada pengunjung yang datang pada blog kita akan merasa nyaman dan untuk kemudiannya mau kembali mengunjungi blog kita.
Untuk langkah pembuatan tab view pada kali ini tidaklah begitu sulit. Tidak perlu edit HTML template, cuma hanya tinggal add Gadget -> pilih HTML/ JavaScript -> next Copas script berikut:
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 80px; /* Lebar Kotak Tab*/
height: 22px; /* Tinggi Kotak Tab*/
text-align: center; /* Posisi Teks Menu Tab ** Posisi Teks Menu Tab */
margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */
background-color: #000; /* Warna background Kotak Tab */
padding-top: 2px; /* Spasi Atas*/
border: 1px solid #ffffff; /* Warna border kotak Tab */
border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */
font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */
font-weight: 900; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #736F6E; /* Warna background utama kotak tab */ }
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #ffffff; /* Warna background Kotak konten*/
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 5px; /* Jarak Teks Dalam Content Tab */
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
</style>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 300px;" class="Tabs">
<a><span style="color: # fff "> Tab1 </span></a>
<a><span style="color: # fff "> Tab2 </span></a>
<a><span style="color: # fff "> Tab3 </span></a>
</div>
<div style="width: 300 px; height: 200 px;" class="Pages">
<div class="Page">
<div class="Pad">
konten 1
</div>
</div>
<div class="Page">
<div class="Pad">
konten 2konten 2
</div>
</div>
<div class="Page">
<div class="Pad">
konten 3
</div>
</div>
</div></div></form>
<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script></div>
Kemudaian Klik Simpan...!
setelah semua langkah di atas sudah selesai, tinggal sobat cek saja hasil tampilan dari pekerjaan pembuatan tab view sobat tadi.
Okey...Sekian dulu dalam pembahasan artikel kali ini.Dari saya selamat mencoba dan semoga sukses..