Selamat Datang
tamankayzen. Diberdayakan oleh Blogger.

0 Cara membuat menu tab view

Menu tab view ini sangat berguna sekali untuk menghemat tempat di sidebar dan dapat memasukan link atau gambar ke dalam menu ini, karena ukurannya yang kecil sehingga dapat mempermudah kita dalam menghemat ruangan di sidebar, tertarik untuk membuatnya???? Sebelumnya backup dulu template sobat untuk mencegah hal-hal yang dapat merusak template jadi berantakan. Langsung saja kita mulai langkah demi langkah pembuatannya

1. Login ke blogger
2. Pilih Rancangan/tata letak
3. Klik edit HTML
4. Centang Expand Template Widget
5. Cari kode (untuk pencarian cepat tekan ctrl + f)
6. Copy kode di bawah ini, dan letakan diatas kode



7. Kemudian Cari kode ]]>
8. Dan letakkan kode berikut di atas kode ]]>

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;
}

9. Kemudian simpan template

10. Langkah berikutnya klik rancangan/tata letak
11. klik tambah gatget
12. Pilih HTML JavaScript, dan copy/paste kode di bawah ini kedalamnya







Tab 1.1

Tab 1.2

Tab 1.3





Tab 2.1

Tab 2.2

Tab 2.3





Tab 3.1

Tab 3.2

Tab 3.3









13. Terakhir simpan... sobat tinggal memasukan judul dan isi sesuai dengan keinginan

Catatan :
  • Untuk angka yang dicetak tebal silakan sobat ganti dengan lebar sidebar
  • Huruf yang berwarna merah ganti dengan judul
  • Dan huruf yang berwarna biru adalah isi dari menu
    contohnya dengan memasukan link...

  • Source : http://adibey.blogspot.com/2010/08/cara-membuat-menu-tab-view.html#ixzz1XpwqPqhQ
    Read more

    Delete this element to display blogger navbar

    Pengikut

    Lomba
     
    © Sekedar Berbagi... | Design by Blog template in collaboration with Concert Tickets, and Menopause symptoms
    Powered by Blogger