Skip to main content

Cara Membuat Menu Tab view

 

Membuat menu dengan tab view memerlukan kode HTML yang lumayan panjang dan agak ribet, jadi sebaiknya simak baik baik tutorial ini dan yang paling penting jangan lupa untuk backup template  terlebih dahulu.

 


Jika setelah jadi nanti lebar atau tinggi menu tidak sesuai, silahkan Kamu sesuaikan sendiri dengan isi dari menu yang  digunakan. Karena jika tidak mengerti akan jadi berantakan atau terlihat jelek.

   1. Silahkan login ke blogger
      
   2. Tuju Tata Letak.

   3. Klik Edit HTML.

   4. Jangan lupa backup template Kamu terlebih dahulu dengan mengklik Download Template Lengkap.

   5. Kemudian letakkan kode javascript berikut sebelum kode

      


     

      
   6. Setelah itu 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;
      }

      
   7. Kemudian Simpan Template.

      
   8. Langkah selanjutnya, silahkan Kamu Buka Tata Letak.

      
   9. Klik Elemen Halaman dan tambahkan Gadget.

      
  10. Pilih yang HTML / Javascript, dan tambahkan kode berikut kedalamnya.

      

     

     

     
300px;">
      Tab 1
      Tab 2
      Tab 3
     

     
300px; height: 250px;">

     

     

      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
     

     


     

     

     

     

      
  11. Kemudian Simpan.


Keterangan :

    * Untuk kode yang berwarna merah adalah lebar dan tinggi menu, silahkan Kamu sesuaikan dengan isi.

      
    * Kode yang berwarna biru silahkan Kamu isi dengan judul - judul dari menu.

      
    * Dan yang berwarna ungu, adalah isi dari menu. Kamu bisa menambahkan link, gambar, banner, dll.
Labels:

Comments

Post a Comment

Popular posts from this blog

Angry Birds v2.1.0 GAME-CRD

Angry.Birds.v2.1.0.GAME-CRD Release name: Angry.Birds.v2.1.0.GAME-CRD Size: 42.8 MB Language : ENG NFO: Here Release Description: The survival of the Angry Birds is at stake. Dish out revenge on the green pigs who stole the Birds’ eggs. Use the unique powers of the Angry Birds to lay waste to the pigs’ confounding constructions. Angry Birds features challenging, physics-based demolition gameplay with hours and hours of replay value. Each of the 240+ levels requires logic, skill, and brute force to crush the enemy. Screenshot Total 42.8 MB Password=ganool.com Download From Tinypaste Related Posts: Angry Birds v1.6.2 cracked READ NFO-THETA Angry Birds Rio v1.4.2 Cracked GAME-ErES Angry Birds Rio v1.2.2 cracked READ NFO-THETA Angry Birds Space v1.0.0 GAME-CRD Angry Birds Seasons v2.3.0 Cracked GAME-ErES .:: Advertisements ::.
Post a Comment
Readmore

Uverworld

UVERworld adalah J-Rock band di Gr8! Catatan di bawah label Sony. Suara umum UVERworld adalah campuran rock dan pop dengan sesekali selingan rap dilemparkan oleh Takuya .Nama mereka adalah nama mereka yang diciptakan sendiri (dengan menggabungkan 'über' dan 'atas') dan kepada mereka berarti 'Pindah silang dunia mereka sendiri'.
Post a Comment
Readmore

Membuat Tampilan Komentar dan Jawaban Beda dengan CSS3

Untuk Template Lama (Template Tata Letak/Layout Templates) dan New Blogger Template). Salah satu cara memberikan "servis terbaik" kepada pembaca atau pengunjung blog adalah dengan memberikan ciri khusus pada jawaban komentar yang dibuat autor. Dengan cara ini maka komentar pengunjung dan jawaban yang berupa komentar dari author akan terlihat dengan sangat jelas. Beberapa cara bisa dilakukan misalnya dengan membuat bentuk teks berbeda atau dengan cara memberi background pada box yang berisikan komentar pengunjung atau sebaliknya pada komentar autor (jawaban komentar). Untuk membuat bentuk kolom komentar yang sangat menarik ini, tidak boleh tidak kita harus membongkar template guna menyimpan kode CSS dan xHTML pada bagian header dan body. Untuk penyimpanan xHTML dengan amat terpaksa juga harus kita lakukan melalui Expand Widget Template , karena tanpa melalui proses ini tidak mungkin apa yang kita rencanakan bisa terwujud. Heh ... heh ..., tapi jangan ...
Post a Comment
Readmore