Silahkan Pilih

Membuat Tab Multi Widget Standar di Blog

Posted by : AdiMPS Monday 8 July 2013


Tab Multi Widget tuh kyak yang disamping, biar menghemat ruang di blog. OK

nih caranya >>

1. Login ke akun Blogger sobat.
2. Masuk pada bagian Template.
3. Pilih Edit HTML.
4. Cari kode </head>, agar lebih mudah gunakan tombol ctrl+F.
5. Masukan kode berikut diatas kode </head> .




6. Cari kode ]]></b:skin>,  agar lebih mudah gunakan tombol ctrl+F.
7. Masukan kode berikut di atas kode  ]]></b:skin>.

div.TabView div.Tabs
{
height: 30px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 98px; /* Lebar Menu Atas */
text-align: center;
height: 30px; /* Tinggi Menu 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;
}
8. Klik Simpan Template.
9. Selanjutnya, Masuk ke bagian Tata Letak.
10. Klik Tambah gadget di posisi yang sobat inginkan.
11. Pilih HTML/Javascript.
12. Masukan kode berikut.
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 300px;">
<a>Menu 1</a>
<a>Menu 2</a>
<a>Menu 3</a>
</div>
<div class="Pages" style="width: 300px; height: 250px;">
<div class="Page">
<div class="Pad">
Copas kode widget menu 1 disini</div></div>
<div class="Page">
<div class="Pad">Copas kode widget menu 2 disini</div></div>
<div class="Page">
<div class="Pad">Copas kode widget menu 3 disini</div></div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

Keterengan, kode warna merah adalah kode-kode ukuran, kode warna biru adalah kode-kode warna yang bisa sobat ubah. Masukan judul Tab pada tulisan berwaana hijau. Dan masukan kode HTML widget pada tulisan warna ungu.

BERES

Leave a Reply

Problem ?

Subscribe to Posts | Subscribe to Comments

http://investklik.com/fjt1945
Presdir. Powered by Blogger.

- Copyright © AdiMPS - - Powered by Blogger - Designed by -