Cara membuat Menu Tabview di Blog

Minggu, Januari 27, 2013

InfoDari - Cara membuat Menu Tabview di Blog

Tutorialnya ada di bawah ini, silahkan di Praktekkan.

• Login ke Blogger : Dasbor  anda!
• Masuk ke Rancangan -> Edit HTML
• Letakkan kode dibawah ini sebelum kode </head>

<script src='http://u-sup.googlecode.com/files/tabview.js' type="text/javascript"/>

• Selanjutnya Copy Paste kode dibawah ini sebelum kode ]]></b:skin>

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Utama Atas */
text-align: center;
height: 30px; /* Tinggi Menu Utama Atas */
padding-top: 3px;
vertical-align: middle;
border: 1px solid #BDBDBD; /* Warna border Menu Atas */
border-bottom-width: 0;
text-decoration: none;
font-family: "Verdana", Serif; /* Font Menu Utama Atas */
font-weight: bold;
color: #000; /* Warna Font Menu Utama Atas */
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #E6E6E6; /* Warna background Menu Utama Atas */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #BDBDBD; /* Warna border Kotak Utama */
overflow: hidden;
background-color: #E6E6E6; /* 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;
}

• Simpan Template Anda 
• Selanjutnya Pilih Menu Element laman
• Klik Tambah gadget dan pilih HTML/JavaScript dan masukkan kode berikut didalamnya!

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Tab 1</a>
<a>Tab 2</a>
<a>Tab 3</a>
</div>
<div class="Pages" style="width: 300px; 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');
</script>

• Kemudian Simpan

Keterangan:

• Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan ganti sesuai dengan isi.
• Kode yang berwarna kuning silahkan isi dengan judul - judul dari menu. 
• Dan yang berwarna ungu, adalah isi dari menu.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.

Buruan Pasang Iklan Anda Di DHE Dengan Harga Yang Terjangkau.Pajang bisnis online anda di DHE dan dapatkan keuntungan yang lebih dari penjualan produk bisnis anda.