Menu Tab View di Blog

Selasa, 12 Juni 2012 | 6komentar

Menu Tab View Menu Tab View di Blog - Cara Membuat Menu Tab View di Blog - Menu Multi kolom.  Adakalanya kita pun dipusingkan dengan penempatan widget yang terlalu banyak, ingin membuat kesan tampilan apik dan indah, anmun malah berantakan. Untuk menyiasati hal ini diperlukan satu tempat widget namun bisa menyimpan banyak widget.

Penggunaan Menu Tab View di Blog ini sangatlah tepat dan bermanfaat terutama bagi kita yang ingin menghemat ruang untuk menampilkan banyak widget dalam blog kita. Desain yang menarik juga membuat tampilan blog kita terlihat apik dan menawan ini memungkinkan blog kita seolah profesional. Langkahnya pembuatannya sangatlah mudah, namun tetap saya anjurkan bila dalam oprek template ini sebaiknya kita jangan lupa untuk mendonloadnya terlebih dahulu, agar terhindar dari kesalahan fatal.
Langka yang harus sobat ikuti .
1. Masuk ke akun blogger kita masing-masing.
2. Klik Rancangan.
3. Klik edit HTML.
4. Klik Expand Template Widget.
5. Lalu cari kode berikut. ]]></b:skin> Letakan kode berikut di atasnya.

/* Menu Tab View */
div.TabView div.Tabs {
padding-top: 0px;
height: 24px;
overflow: hidden;
}

/* Menu Utama */
div.TabView div.Tabs a {
float: left;
display: block;
width: 80px; /*ukuran lebar tabmenu*/
text-align: center;
height: 24px; /*ukuran tinggi tabmenu*/
padding-top: 3px;
margin-right:4px; /*jarak antartabmenu*/
vertical-align: middle;
border: 1px solid #CCC; /*warna border menu*/
border-bottom-width: 0;
font-family: "Arial", Times New Roman, Serif; /*jenis hurup menu*/
font-size: 12px; /*besar hurup menu*/
letter-spacing: -1px;
background-color: #0414FC; /*warna latar menu*/
color: #FFFFFF; /*warna hurup menu*/
-moz-border-radius-topleft:10px;
-moz-border-radius-topright:10px;
-webkit-border-top-left-radius:10px;
-webkit-border-top-right-radius:10px;
}

div.TabView div.Tabs a.Active {
background-color: #FC0C0C; /*warna background menu aktif*/
color: #FFFFFF;
}

div.TabView div.Tabs a:hover {
background-color: #0CFC0C; /*warna background menu hover*/
color: #FFFFCC;
font-weight: bold;
}

/* Kotak Utama */
div.TabView div.Pages {
clear: both;
border: 1px solid #CCC; /*warna border kotak utama*/
overflow: hidden;
background:url("http://sites.google.com/site/ruangsc/image/bgtabview.gif"); /*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;
font-size: 12px; /*besar hurup kotak utama*/
}

6. Cari kode berikut.]]></b:skin>
Letakan javascript berikut di bawahnya.

<script src="http://evawangi.googlecode.com/files/tabviewev.js" type="text/javascript"/>

Sampai sini Save Template sobat, lalu :

7. Langkah Selanjutnya :
Klik menu rancangan.
Klik add gadget.
Pilih HTML/JavaScript.
Masukan kode berikut.

<form action="tabview.html" method="get">
<div id="TabView" class="TabView">
<div style="width: 100%;" class="Tabs">
<a title="Keterangan Menu 1">Menu 1</a>
<a title="Keterangan Menu 2">Menu 2</a>
<a title="Keterangan Menu 3">Menu 3</a>
<a title="Keterangan Menu 4">Menu 4</a>
</div>
<div style="width: 100%; height: 200px;" class="Pages">

<!--Awal Menu 1-->
<div class="Page"><div class="Pad">
Isi Menu 1.1<br/>
Isi Menu 1.2<br/>
Isi Menu 1.dst<br/>
</div></div>
<!--Akhir Menu 1-->

<!--Awal Menu 2-->
<div class="Page"><div class="Pad">
Isi Menu 2.1<br/>
si Menu 2.2<br/>
Isi Menu 2.dst<br/>
</div></div>
<!--Akhir Menu 2-->

<!--Awal Menu 3-->
<div class="Page"><div class="Pad">
Isi Menu 3.1<br/>
Isi Menu 3.2<br/>
Isi Menu 3.dst<br/>
</div></div>
<!--Akhir Menu 3-->

<!--Awal Menu 4-->
<div class="Page"><div class="Pad">
Isi Menu 4.1<br/>
Isi Menu 4.2<br/>
Isi Menu 4.dst<br/>
</div></div>
<!--Akhir Menu 4-->
</div></div></form>
<script type="text/javascript"> tabview_initialize ('TabView'); </script>
 <a href="http://evawangi.blogspot.com/2012/06/menu-tab-view-di-blog.html" target="blank">[Get This]</a>

8. Klik Save Gadget dan selesai, mudah khan ? Semoga bisa bermanfaat !
Share this article :
Judul: Menu Tab View di Blog
Rating Blog: 5 dari 5
Ditulis oleh Eva Wangi
Anda sedang membaca artikel Menu Tab View di Blog. Anda bebas Copas untuk kode HTML pada Tutorial Blogging dan Tips Blogging, namun jika terpaksa ingin mengutip secara keseluruhan harap memberikan link aktif dofollow ke URL inihttp://evawangi.blogspot.com/2012/06/menu-tab-view-di-blog.html. Terima kasih sudah singgah dan berkomentar di blog ini.

6 komentar:

  1. Mantap sop,berhasil diterapkan di blog ane,makasih tipnya.

    BalasHapus
  2. Manjur sop,tolong lihat di blog saya. Sudah terpasang dan berhasil.
    Makasih banyak infoya.

    BalasHapus
  3. @AGC Badilah,@Laras Mays
    Senang bisa membantu, makasih kembali untuk sobat berdua.

    BalasHapus
  4. Sudah ta pasang di blogku,mohon di periksa jika salah penempatanya.
    Makasih tipsnya.

    BalasHapus
  5. broo terus gimana lagi dah kita copy yang ter akhirnya itu mohon bantuanya.

    BalasHapus
  6. kenapa banyak yang kurang pada semuanya saya udah lakukan

    BalasHapus

Tulis Komentar Yang Menyejukan Hati saja.
Tidak menerima Komentar Yang bermuatan Sara, Politik, Makar,
tidak pula Komentar Yang menjurus Iklan.
Terima Kasih sudah sedikit meluangkan Waktunya disini!

Ketik Yang Sobat Mau !

Artikel Terbaru

 
Support : Creating Website | Johny Template | Mas Template
Copyright © 2012. Shaka InghetS - All Rights Reserved
Template Modify by Creating Website
Proudly powered by Blogger