Cara Membuat Menu Tab View

Banyak Sekali kegunaan Tab view ini,bentuknya yang mungil nan imut ini bisa menampung berbagai contents yang yang sangat di perlukan dalam blog kita. Contohnya seperti punyaku yang ada disamping kanan itu,bisa dilihat sendiri.

Langsung Saja...

Beginilah cara untuk membuat menu tab view tersebut

1. PErtama anda harus Login ke blogger trus pilih menu "Layout --> Edit HTML"
2. Kemudian cari kode berikut ( gunakan CTRL+F untuk mempermudah pencarian) ]]></b:skin>
3. Kemudian masukkan kode berikut ini sebelum kode ]]></b:skin> atau kedalam tag CSS.

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

4. Yang perlu di perhatikan adalah text-text yang berwarna merah, itu adalah keterangan untuk pengaturan Tab View. Ada ukuran warna dll. Untuk mengetahui kode2 warna silahkan lihat DISINI
5. Langkah selanjutnya yaitu pasang kode berikut ini sebelum kode </head>

<script type='text/javascript'>

function tabview_auxundefinedTabViewId, id)
{
  var TabView = document.getElementByIdundefinedTabViewId);

  // ----- Tabs -----

  var Tabs = TabView.firstChild;
  while undefinedTabs.className != &quot;Tabs&quot; ) Tabs = Tabs.nextSibling;

  var Tab = Tabs.firstChild;
  var i   = 0;

  do
  {
    if undefinedTab.tagName == &quot;A&quot;)
    {
      i++;
      Tab.href      = &quot;javascript:tabview_switchundefined&#39;&quot;+TabViewId+&quot;&#39;, &quot;+i+&quot;);&quot;;
      Tab.className = undefinedi == id) ? &quot;Active&quot; : &quot;&quot;;
      Tab.blurundefined);
    }
  }
  while undefinedTab = Tab.nextSibling);

  // ----- Pages -----

  var Pages = TabView.firstChild;
  while undefinedPages.className != &#39;Pages&#39;) Pages = Pages.nextSibling;

  var Page = Pages.firstChild;
  var i    = 0;

  do
  {
    if undefinedPage.className == &#39;Page&#39;)
    {
      i++;
      if undefinedPages.offsetHeight) Page.style.height = undefinedPages.offsetHeight-2)+&quot;px&quot;;
      Page.style.overflow = &quot;auto&quot;;
      Page.style.display  = undefinedi == id) ? &#39;block&#39; : &#39;none&#39;;
    }
  }
  while undefinedPage = Page.nextSibling);
}

// ----- Functions -------------------------------------------------------------

function tabview_switchundefinedTabViewId, id) { tabview_auxundefinedTabViewId, id); }

function tabview_initializeundefinedTabViewId) { tabview_auxundefinedTabViewId,  1); }

</script>

<script type='text/javascript'>tabview_initializeundefined&#39;TabView&#39;);
</script>

6. Kemudian "Di save"
7. Lalu pergi ke menu "Page Elements"
8. Trus PIlih "Add a Gadget" --> "HTML/Javascript" di tempat yg akan km letakkan Manu Tab View ini.
9. Inilah script yg harus kamu pasang :

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

Keterangan :
- Angka2 atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Hijau Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna merah adalah isi dari tabvie tsb. Kamu bisa mengisinya dengan link, gambar, banner, script dll.
- Untuk menmbahkan jumlah menu maka perhatikanlah text yang berkedip2. tambahkan menu tersebut dibawahnya.

Artikel Terkai :)

artikel

• Patung-Patung Dari Suku Cadang Mobil Tua
• Pegangan Pintu Yang Keren
• 10 Negara Dengan Tarif Parkir Termahal
• Beberapa Logo Google Yang Pernah Ditolak
• Misteri Ruangan Berhantu di White House
• Film Hollywood Dalam Dunia Disney
• Takkan Pernah Ada Penggantimu
• Keuntungan Menjadi Orang 'Jelek'
• Menghilangan Komeda Dengan Bahan Alami
• Cara Membuat Cewek Tersenyum
• Atasi Stress Dengan 5 Menit
• Resika Diabetes Karena Kurang Tidur
• Jenis Kelelawar Unik bin Aneh
• Mengatsi Tekanan Darah Rendah Secara Alami
• Penyebab & Tips Mengatasi Mimisan
• Ular Paling Berbisa di Dunia
• 5 Cara Magic Menurunkan Berat Tubuh
• Makanan Yang Baik Untuk Otak Kita
• Membuat Link Bergoyang Saat Disorot Mouse
• Tips Mempercepat Download IDM
• Membuat Artikel Terkait Dengan Gambar di Blogger
• Membuat Burung Twitter Terbang di Blogger
• Membuat Animasi Twitter Flash di Blogger
• Tips Menghilangkan Jerawat & Bekasnya
• Manfaat Tertawa Itu Banyak!

pengetahuan

• Atasi Stress Dengan 5 Menit
• Resika Diabetes Karena Kurang Tidur
• Makanan Yang Baik Untuk Otak Kita
• Tips Mempercepat Download IDM
• Tips Menghilangkan Jerawat & Bekasnya
• Manfaat Tertawa Itu Banyak!
• Masker Buah Perawatan Kulit
• Mitos Aneh Seputar Perawatan Rambut
• Camilan Yang Memicu Sakit
• Kastil Paling Menakjubkan di Dunia
• Perbedaan Jepang-Indonesia Dalam Berbagai Situasi
• Masjid-Masjib Termegah di Dunia
• Cara Mengobati Sakit Hati Setelah Putus
• Virus Komputer Yang Paling Berbahaya
• Museum Terunik di Dunia
• Dibalik Lagu 'Someone Like You'
• Cara Memasang Tombol Share ke Sosial Bookmarking di Blogger
• 7 Kisah Cinta Abadi di Dunia
• Tradisi Tahun Baru yang Unik
• Karya Origami Yang Unik
• 7 Mayat Tokoh Dunia yang Masih Utuh
• Cara Mengatasi PMS (Pra Menstruasion Syndrome)
• 7 Buah Yang Berguna Untuk Wajah
• Tempat Terlarang Meletakkan Telepon Genggam

Tips

• Tips Cara Merawat laptop
• Menghilangan Komeda Dengan Bahan Alami
• Cara Membuat Cewek Tersenyum
• Atasi Stress Dengan 5 Menit
• Alasan Beralih Dari Facebook ke Google+
• Mengatsi Tekanan Darah Rendah Secara Alami
• Penyebab & Tips Mengatasi Mimisan
• 5 Cara Magic Menurunkan Berat Tubuh
• Tips Mempercepat Download
• Cek Apakah Blog Sudah Diindex Google
• Membuat Link Bergoyang Saat Disorot Mouse
• Tips Mempercepat Download IDM
• Tips Menghilangkan Jerawat & Bekasnya
• Manfaat Tertawa Itu Banyak!
• Masker Buah Perawatan Kulit
• Mitos Aneh Seputar Perawatan Rambut
• Camilan Yang Memicu Sakit
• Cara Memasang Tombol Share ke Sosial Bookmarking di Blogger
• Cara Membuat Shout Box di Blogger
• Cara Membuat 'Read More' Animasi
• Membuat Auto Read More di Blogger
• Cara Mengatasi PMS (Pra Menstruasion Syndrome)
• Tempat Terlarang Meletakkan Telepon Genggam