Bagaimana Cara Menciptakan Tab View Pada Blog ?

Membuat sajian tab view di blog itu sangat dibutuhkan bagi blogger yang ingin membuat desain blognya terlihat lebih profesional dan hemat ruang.

Apakah kita pernah mengunjungi sebuah blog dan melihat adanya sajian tab view yang di pasang di sidebarnya? Atau apakah kita sendiri belum tahu apakah sajian tab view yang dimaksud beserta kegunaannya?

Menu tab view yaitu sebuah pernak-pernik blog yang menampilkan beberapa widget yang berbeda lalu digabungkan penempatannya menjadi satu kepingan dalam bentuk tab-tab yang terpisah. Fungsi dari sajian tab view ini sanggup kita gunakan untuk menghemat ruang di kepingan sidebar maupun footer dan membuat kesan tampilan blog kita terlihat lebih profesional.

Seperti yang kita tahu kalau fasilitas kanal pembaca dalam menjelajahi blog kita ini sangat diperlukan. Selain menguntungkan bagi kita sebab blog kita sanggup dieksplorasi dengan baik, blog yang gampang diakses juga membuat adanya efisiensi dalam menempatkan widget blog supaya terbaca oleh pembacanya. Salah satu fungsi lain dari adanya sajian tab view ini yaitu fasilitas bagi pembaca dalam mengakses widget-widget dalam blog kita.

Cara yang dipakai untuk membuat sajian tab view ini juga relatif mudah. Kita hanya perlu sedikit memodifikasi HTML template blog dengan penambahan arahan HTML dan javascript baru.

Adapun cara untuk membuat sajian tab view di blog milik kita yaitu sebagai berikut:

Langkah pertama.

Masuk ke akun blogger kita masing-masing.

Klik rancangan.

Klik edit HTML.

Klik expand template widget.

Cari arahan berikut.

]]></b:skin>

Letakan arahan berikut di atasnya.

/* Menu Tab View
----------------------------------------------- */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #A4A4A4; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #888888; /*warna background sajian aktif*/
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #999999; /*warna background sajian hover*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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;
font-size: 12px; /*besar hurup kotak utama*/
}

Cari arahan berikut.

]]></b:skin>

Letakan javascript berikut di bawahnya.

<script src="http://panduanbelajarblog.googlecode.com/files/tabview.js" type="text/javascript"/>

Klik simpan dan selesai.

Keterangan:

1. Tekan tombol Ctrl+F pada keyboard untuk mempermudah proses pencarian arahan HTML yang diinginkan pada HTML blog kita.
2. Unduh dan simpan template blog kita terlebih dahulu sebagai langkah antisipasi kalau kita mengalami kegagalan ketika editing berlangsung.

Langkah kedua.

Klik sajian rancangan.

Klik add gadget.

Pilih HTML/JavaScript.

Masukan arahan berikut.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Bagaimana Cara Membuat Tab View Pada Blog ?">Menu 1</a>
<a title="Bagaimana Cara Membuat Tab View Pada Blog ?">Menu 2</a>
<a title="Bagaimana Cara Membuat Tab View Pada Blog ?">Menu 3</a>
<a title="Bagaimana Cara Membuat Tab View Pada Blog ?">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->

</div></div></form>

<script type="text/javascript"> tabview_initialize ('TabView'); </script>

Klik simpan dan selesai.

Penggunaan sajian tab view ini sangat bermanfaat terutama bagi kita yang ingin menghemat ruang untuk menampilkan banyak widget dalam blog kita. Desain yang menarik juga membuat tampilan blog kita menjadi lebih profesional.

Share this post