Cara Membuat Menu Tab View Widget

ada Hari Ini Saya Akan Memberi Tau Teman Teman Bloggers Semua Tutorial Bagaimana Cara Membuat TabView Widget Di Blog, Tab View sendiri menurut saya adalah sebuah menu untuk meletakkan menu menu lainnya sehingga tidak memakan tempat pada template Blog kita baiklah langsung saja untuk melihat Demonya lihat pada Blog Ini.


Kita Mulai Perhatikan Baik Baik Langkah Langkah Cara Membuat Tab View Di Bawah ini :

• Langkah Pertama
• Login ke akun Blogger kamu.
• Dari halaman dashboard, pilih Edit HTML.
• Pada halaman Edit HTML, centang "Expand Template Widget", cari kode ]]></b:skin> pada script template blog kamu. Tekan Control F atau F3 untuk lebih mudah mencarinya.
• lalu copy Script berikut dan letakkan diatas kode  tersebut ]]></b:skin>

/* Menu Tab View<br /> ----------------------------------------------- */<br /> div.TabView div.Tabs {<br /> padding-top: 0px;<br /> height: 24px;<br /> overflow: hidden;<br /> }<br /> <br /> /* Menu Utama */<br /> div.TabView div.Tabs a {<br /> float: left;<br /> display: block;<br /> width: 90px; /* ukuran lebar menu */<br /> text-align: center;<br /> height: 24px; /* ukuran tinggi menu */<br /> padding-top: 3px;<br /> margin-right:4px; /* jarak antarmenu */<br /> vertical-align: middle;<br /> border: 1px solid #CCC; /* warna border menu */<br /> border-bottom-width: 0;<br /> font-family: "Arial", Times New Roman, Serif; /* jenis hurup menu */<br /> font-size: 12px; /* besar hurup menu */<br /> letter-spacing: -1px;<br /> background-color: #A4A4A4; /* warna latar menu */<br /> color: #FFFFFF; /* warna hurup menu */<br /> -moz-border-radius-topleft:10px;<br /> -moz-border-radius-topright:10px;<br /> }<br /> <br /> div.TabView div.Tabs a.Active {<br /> background-color: #888888; /* warna background menu aktif */<br /> color: #FFFFFF;<br /> }<br /> <br /> div.TabView div.Tabs a:hover {<br /> background-color: #999999; /* warna background menu hover */<br /> color: #FFFFCC;<br /> font-weight: bold;<br /> }<br /> <br /> /* Kotak Utama */<br /> div.TabView div.Pages {<br /> clear: both;<br /> border: 1px solid #CCC; /* warna border kotak utama */<br /> overflow: hidden;<br /> background:url("http://i864.photobucket.com/albums/ab206/kibagus/th_bgtabview.gif"); /* background kotak utama */<br /> }<br /> <br /> div.TabView div.Pages div.Page {<br /> height: 100%;<br /> padding: 0px;<br /> overflow: hidden;<br /> }<br /> <br /> div.TabView div.Pages div.Page div.Pad {<br /> padding: 3px 5px;<br /> font-size: 12px; /* besar hurup kotak utama */<br /> }

Langkah Kedua, Setelah itu letakkan kode berikut dibawah kode ]]></b:skin>

<script src="http://sites.google.com/site/kibagusnet/x-design/tabview.js" type="text/javascript"/>

• Lalu Simpan Hasil Editing Tersebut.

• Langkah Ketiga

• Pilih tab Elemen Halaman ( Page Element ).
• Klik pada bagian Tambah Gadget dan pilih HTML/JavaScript.

Copykan script berikut dan letakkan pada kotak Content yang tersedia:

<form action="tabview.html" method="get"><br /> <div id="TabView" class="TabView"><br /> <div style="width: 100%;" class="Tabs"><br /> <a title="Keterangan Menu 1">Menu 1</a><br /> <a title="Keterangan Menu 2">Menu 2</a><br /> <a title="Keterangan Menu 3">Menu 3</a><br /> </div><br /> <div style="width: 99%; height: 200px;" class="Pages"><br /> <br /> <!--Awal Menu 1--><br /> <div class="Page"><div class="Pad"><br /> Isi Menu 1.1<br/><br /> Isi Menu 1.2<br/><br /> Isi Menu 1.dst<br/><br /> </div></div><br /> <!--Akhir Menu 1--><br /> <br /> <!--Awal Menu 2--><br /> <div class="Page"><div class="Pad"><br /> Isi Menu 2.1<br/><br /> Isi Menu 2.2<br/><br /> Isi Menu 2.dst<br/><br /> </div></div><br /> <!--Akhir Menu 2--><br /> <br /> <!--Awal Menu 3--><br /> <div class="Page"><div class="Pad"><br /> Isi Menu 3.1<br/><br /> Isi Menu 3.2<br/><br /> Isi Menu 3.dst<br/><br /> </div></div><br /> <!--Akhir Menu 3--><br /> <br /> </div></div></form><br /> <br /> <script type="text/javascript">tabview_initialize('TabView');</script><br /> <div style="font-size:90%; text-align:right; text-shadow:2px 2px 2px #adadad;"><a href="http://kibagus-homedesign.blogspot.com/" target="_blank" title="Tabview Widget">HDesign-comm</a></div>

• Keterangan :

Pada tulisan yang tercetak tebal dapat kamu ubah disesuaikan dengan kebutuhan. Milsalnya pada ukuran width (lebar) dan height (tinggi), dapat kamu gunakan ukuran % atau pixel (px) yang disesuaikan dengan lebar sidebar blog kamu. Begitupun dengan judul Menu dan Isi Menu dapat kamu buat sendiri sesuai dengan isi blog kamu.

Selain itu kamu juga bisa menambahkan menu-menu lain ( lebih dari 3 ) asalkan lebar sidebar blog kamu mencukupi. Atau bisa juga dengan cara memperkecil ukuran lebar menu pada script yang tadi diletakkan pada HTML template blog kamu.

Untuk mengganti kode warna bisa kamu lihat disini Kode Warna atau Menggunakan kode warna dalam blogging. Lanjut Artikel Blog ini Tentang cara membuat tab view widget animasi.

Saran Dan Kritik Anda Sangat Membantu Saya Dalam Menulis Artikel Selanjutnya Pada Blog Ini...

Posted in: Blogger