Pasang Menu Tab View

Pasang Menu Tab View - Menu Tab View adalah Menu yang berbentuk tabel dengan pengelompokan halaman sesuai dengan tabel menu diatasnya. Menu ini banyak di pakai oleh Para Blogger, Di karenakan Menu Ini mempunya nilai yang lebih dan meng-hemat tempat sehingga blog/ website anda tidak terlalu ramai oleh script-script atau widget lainnya. Untuk lebih jelasnya anda bisa melihat tampilan Menu Tab View pada blog saya sebelah kiri atau perhatikan gambar Menu Tab View dibawah ini :



Apakah menurut anda Menu Tab View Sangat Bermanfaat pada blog / website anda ?
Jika "ya"... Silahkan ikuti Tahap-tahap Cara Pasang Menu Tab View sebagai berikut :

TAHAP I
1. Login ke Blogger
2. klik Tata Letak / Layout
3. klik Edit Html
4. Selanjutnya COPY PASTE code CSS dibawah ini, sebelum 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;
}

Kalimat yang bercetak tebal diatas adalah sebagai Keterangan dalam mengatur Kode Warna.

5. Silahkan anda Copy Paste kode dibawah ini, tepat sebelum / di atas kode </head>

<script src='http://anas.ku93.googlepages.com/tabview.js' type='text/javascript'/>

6. Klik Simpan / Save.

TAHAP II

1. Klik Elemen Halaman / Page Elements
2. Klik Tambah Gadget / Add New Gadget
3. Pilihlah Menu Html/Java Script
4. Copy Paste Kode di bawah ini, pada table Html/Java Script

<center>
<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 370px;" class="Tabs">
<a>Tutorial</a>
<a>OrLaNd</a>
<a>BPR</a>
<a>friend</a>
</div>
<div style="width: 370px; height: 250px;" class="Pages">

<div class="Page">
<div class="Pad">
Tab 1.1
Tab 1.2
Tab 1.3
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 2.1
Tab 2.2
Tab 2.3
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 3.1
Tab 3.2
Tab 3.3
</div>
</div>

<div class="Page">
<div class="Pad">
Tab 4.1
Tab 4.2
Tab 4.3
</div>
</div>

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

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

Kalimat yang bercetak tebal diatas adalah: Keterangan untuk mengganti Tab 1.1 ... s/d 4.1... Menjadi Link .
Sebagai contoh : anda bisa mengganti Tab 1.1 menjadi Link seperti kode dibawah ini:
<a href="http://OrLaNd.web.id" target="new">FREE ORLAND'S TEMPLATE </a><br/>

5. Klik Simpan / Save.
6. Selesai
Saya mendapatkan Informasi ini dari Nara Sumber :Trik-Tips Thanks atas tipsnya.


Terima Kasih atas kunjungan dan kepercayaan anda dalam mempercantik blog anda.
Semoga Bermanfaat buat anda dan selamat hari yang indah
Best Regard,

OrLaNd