Wednesday, August 8, 2012

Cara Membuat Menu Tab View 3 Kolom Tanpa Edit HTML

Cara Membuat Menu Tab View 3 Kolom Tanpa Edit HTML| Terkadang sobat semua bingung ketika blognya sudah penuh terisi dengan berbagai widget yang ada, tapi tidak usah khawatir karena kita dapat membuat hemat ruang blog kita dengan cara membuat menu tab view 3 kolom Tanpa Edit HTML yang dapat menghemat halaman blognya. Trik kali ini berbeda dengan trik sebelumnya yang pernah saya bahas karena tanpa edit HTML. Langsung saja untuk  ikuti langkah-langkahnya di bawah ini:

 

1. Masuk ke dasboard blogger
2.Tambah gadget
3.Pilih html/javasript
4.dan kemudian masukan kode scrift dibawah ini


<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; /* 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: #E67B00; /* 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: #03AED0; /* 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"> NAMA GADGET 1 </span></a>
<a><span style="color: #fff"> NAMA GADGET 2 </span></a>
<a><span style="color: #fff"> NAMA GADGET 3 </span></a>
</div>
<div style="width: 300px; height: 320px;" class="Pages">
<div class="Page">
<div class="Pad">
<== KODE GADGET 1 ANDA DISINI ==>
</div>
</div>
<div class="Page">
<div class="Pad">
<== KODE GADGET 2 ANDA DISINI ==>
</div>
</div>
<div class="Page">
<div class="Pad">
<== KODE GADGET 3 ANDA DISINI ==>
</div>
</div>
</div></div></form>
<script src="http://johnytemplate.googlecode.com/files/tab_view.js">
</script>
<script type="text/javascript">
tabview_initialize('TabView');
</script>

G+

Komentar Anda

 
Indoking (Kumpulan Berbagai Macam Informasi) © Copyright 2015 - Designed by Muhammad Iqbal
Back to top
Selamat Datang di www.indoking.blogspot.co.id (Download Mp3, Software, Games, Film, ebook, Chord Gitar, Tips and Trick, Operator Sekolah, Android, dll). Terima Kasih Atas Kunjungannya, Jangan lupa Komentarnya, Dan Berkunjunglah Kembali Untuk Mendapatkan Informasi Terbaru 2016.