Cara Membuat Tab View di Blog Anda

Cara Membuat Tab View di Blog Anda

Hallo rekan-rekan blogger dan pengunjung setia blog ini, malam ini tiba-tiba saya berpikir untuk sedikit meminimize halaman blog/web saya, agar lebih menghemat tempat dan para pengunjung semua bisa melihat Tampilan Link, Komentar, Artikel Postingan, Banner dan lain-lain. Dan Tab View ini berbentuk sebuah kotak yang besarnya bisa kita atur sesuai dengan yang kita inginkan, sehingga dapat menghemat ruang sidebar di blog/web kita.

Apa itu Tab View ?

Anda bisa melihatnya di bawah postingan blog/Blog Post saya, dan Anda ingin tahu cara membuatnya adalah sebagai berikut :

Sebagai Langkah Awal :

Login ke Account Blogger Anda

Lalu klik "Layout / Tata letak" dan lalu klik "Edit HTML"

Kemudian cari kode ini ]]></b:skin>

Lalu Copy-kan kode dibawah ini, dan letakkan sebelum atau diatas kode ]]></b:skin>

div.TabView div.Tabs

{

height: 24px;

overflow: hidden;

}

div.TabView div.Tabs a

{

float: left;

display: block;

width: 90px; /* Lebar Menu Utama Atas */ text-align: center;

height: 24px; /* Tinggi Menu Utama Atas */

padding-top: 3px;

vertical-align: middle;

border: 1px solid #000; /* Warna border Menu Atas */

border-bottom-width: 0;

text-decoration: none;

font-family: "Times New Roman", Serif; /* Font Menu Utama Atas */

font-weight: 900;

color: #000; /* Warna Font Menu Utama Atas */

}

div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active

{

background-color: #FF9900; /* Warna background Menu Utama Atas */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #6E6E6E; /* Warna border Kotak Utama */

overflow: hidden;

background-color: #FF9900; /* Warna 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;

}

Perhatikan text-text yang dicetak biru, itu adalah keterangan yang ada di Tab View. Ada ukuran, style border dan warna . Silahkan ganti sesukamu.Untuk melihat kode warna klik disini.

Melihat style border klik disini.

Selanjutnya copy kode dibawah ini, letakkan sebelum kode </head>

<script src='http://www.geocities.com/sehatserasi72/tabview.js' type='text/javascript'/>

Kemudian Simpan

Langkah Selanjutnya :

Pilih "Page Elements"

Trus Pilih "Add a Gadget" --> "HTML/Javascript" untuk meletakkan Tab Menu View ini.

Copy script dibawah ini kedalamnya:

<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');

Lalu Simpan/Save

Keterangan:

Text yang berwarna biru (350px) adalah ukuran tinggi dan lebar Tab View.

Kode yang berwarna Ungu text yang muncul di Menu utama (Menu Atas).

Kode yang berwarna Hijau adalah isi dari Tab View.

Demikianlah informasi yang bisa Saya berikan dan sudah di coba di blog/website ini, semoga berguna buat Anda semua.

Terimakasih.

Posted in: tutorial blog pemula