Posted by : Karta_Jaya

Sejak kemarin saya hanya terfokus dengan cara membuat menu navigasi pada blog. Kenapa yah?
Yang pasti semua tips yang saya berikan bermanfaat buat kita. Tips kali ini, saya ingin memberikan sebuah tips untuk membuat "Menu Tab View" dimana menu tab view ini biasanya dipasang pada sedebar blog, dimana menu Tab View ini terbagi 3 kolom dalam satu tempat. Biar lebih jelasnya, silahkan lihat ganbar di bawah ini.


Beginilah cara untuk membuat menu tab view tersebut?

Berikut caranya, silahkan ikuti langkah-langkah berikut.

1. Login ke Blogger.com dengan Akun anda
2. Pada Dasbor anda, silahkan pilih Rancangan
3. Kemudian Pilih Edit HTML
4. Cari kode seperti ini ]]></b:skin>
5. Kemudian letakkan kode css berikut tepat di atas kode ]]></b:skin>

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;
}
Perhatikan tulisan yang berwarna hijau di atas, itu adalah untuk mengatur tampilan Tab View, untuk melihat kode warna silahkan klik DISINI
6. Setelah itu silahkan letakkan kode berikut di atas kode </head>
<script src='http://kendhin.890m.com/blog/tabview.js' type='text/javascript'/>

7. Kemudian "Di Simopan"
8. Lalu pergi ke menu "Elemen Laman"
9. Trus PIlih "TambahGadget" --> "HTML/Javascript" tempat peletakan Manu Tab View.

<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 :
- Angka-angka atau text yang berwarna biru (350px) adalah ukuran tinggi dan lebar tabview.
- Kode yang berwarna Merah Adalah text yang di Menu utama (Menu Atas).
- Kode yang berwarna Hijau 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.

Kemudian Silahkan DiSimpan
Selesai, semoga Bermanfaat

{ 1 komentar... read them below or add one }

Tukaran Link Yooo...Silahkan Masukkan Nama dan URL Blog Kamu di Dalam Kotak di Bawah Ini. Silahkan Konfirmasi Saya di HUBUNGI KAMI untuk Melakukan Link Balik ke Blog Anda. Terima Kasih

Terima Kasih Telah Bertukaran Link Dengan Kami. Secepatnya Akan Kami Link Balik

Welcome to My Blog

Blog Archive

Tips Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.





Page Rank Checker Logo Forantum I Blogging Is My Life Photobucket Blogger Help Templates Widgets SEO Tips aRvaNs Site's WAHYOKU BLOG

Jika Sobat Menghapus Link TTB dari blog sobat, maka TTB-pun akan Berbuat hal yang sama. Adil kan?




Silahkan Anda Klik Salah Satu Link Iklan Di Atas


Widget Blog


Silahkan Anda Baca Artikel Kami, Jangan Lupa Tinggalkan Jejak Anda di Kolom Komentar.


- Copyright © TIPS dan TRIK BLOG -Robotic Notes- Powered by Blogger - Designed by Johanes Djogan -