Cara Membuat Tab View Menu

Pada kesempatan kali ini saya ingin menjelaskan bagaimana Cara Membuat Tab View Menu (menu dengan tab). Tab view menu ini bisa membuat blog kita terlihat lebih cantik dan lebih profesional karena memang tampilannya yang menarik. Selain mempengaruhi tampilan blog, tab view menu ini juga bermanfaat untuk memperluas ruang pada blog yang membuat blog tidak terlalu berantakan. Kalau pengen tau bagaimana penampakannya silahkan lihat gambar di bawah.

Langkah-Langkah / Cara Membuat Tab Menu View: Ok, sekarang kita masuk kepada proses pembuatan / pemasangan tab menu view. Pertama, Sobat login dulu ke akun blogger sobat, kemudian masuk ke Menu Tata Letak,  klik Tambah Gadget, lalu pilih yang HTML/Javascript. Selanjutnya masukkan script dibawah ini kepada gadget tersebut.

<style type="text/css"> div.TabView div.Tabs a { float: left; display: block; width: 80px; /* Lebar Kotak Tab */ height: 22px; /* Tinggi Menu Utama Atas */ text-align: center; /* Posisi Teks Menu Tab */ margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */ background-color: #000; /* Warna background Kotak Tab */ padding-top: 2px; /* Spasi Atas */ border: 1px solid #ffffff; /* Warna border kotak Tab */ border-bottom: 1px solid #ccc; /*Warna border bawah kotak tab */ font-family: "Arial, Helvetica, sans-serif", Arial; /* Font Kotak Tab */ font-weight: 900; /* Ketebalan Teks kotak tab */ } div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active { background-color: #736F6E; /* Warna background utama kotak tab */ } div.TabView div.Pages { clear: both; border: 1px solid #cccccc; /* Warna border Kotak Konten */ overflow: hidden; background-color: #ffffff; /* Warna background Kotak konten */ } div.TabView div.Pages div.Page { height: 100%; padding: 5px; /* Jarak teks dalam kotak content */ overflow: hidden; } div.TabView div.Pages div.Page div.Pad { padding: 3px 5px; } </style>
<form action="tabview.html" method="get"> <div id="TabView" class="TabView"> <div style="width: 300px;" class="Tabs"> <a><span style="color: #fff">Tab 1</span></a> <a><span style="color: #fff">Tab 2</span></a> <a><span style="color: #fff">Tab 3</span></a> </div> <div style="width: 300px; height: 200px;" class="Pages">
<div class="Page"> <div class="Pad"> Konten 1 </div> </div>
<div class="Page"> <div class="Pad"> Konten 2 </div> </div>
<div class="Page"> <div class="Pad"> Konten 3 </div> </div> </div></div></form>
<script src="http://septiamujizat.googlecode.com/files/tab_view.js"> </script> <script type="text/javascript"> tabview_initialize('TabView'); </script></div>

Keterangan Script : Tulisan yang berwarna kuning adalah keterangan dari masing-masing kode. Tulisan yang berwarna orange adalah warna judul Tab. Tulisan yang berwarna hijau adalah judul Tab Angka 300 pada 'Width' menunjukkan panjang kotak dan 200 pada 'height' menunjukkan tinggi kotak Tulisan yang dicetak miring merupakan isi tab view.
Demikian tadi cara membuat tab view, cara ini sudah terbukti bekerja 100% dan mudah-mudahan juga bekerja pada template blog Sobat semua. Mohon maaf atas segala kekurangannya, barangkali ada salah dalam penulisan atau kata yang kurang berkenan.
____________________________________________________________________________ Terima kasih sudah mampir di ANTOAZZA Silahkan tinggalkan komentar dengan baik dan sopan Silahkan masukan komentar jika ada pertanyaan Dengan senang hati jika anda mempunyai saran untuk kami Silahkan sobat copy/paste jika bermanfaat Dan camtumkan link sumber antoazza.blogspot.com ____________________________________________________________________________ ____________________________________________________________________________ Jika Anda ingin selalu mengikuti update software terbaru dari ANTOAZZA silahkan klik tombol like pada Facebook dan tombol join/sign in pada Gmail Mari kita saling membantu dan berbagi sesama Blogger Semoga semua artikel yang kami berikan dapat bermanfaat bagi Anda semua ____________________________________________________________________________