postingan saya kali ini adalah cara membuat menu multi colum seperti di blog saya ini,oke langsung aja ke tkp
copy paste aja kode di bawah ini di gadget pilihan javascrip/html dan bisa anda tempatkan dimana saja!
isi link/daftar isi blog anda (CATEGORY1)
lalu simpan dan liat hasilnya,semoga bermanfa'at.
copy paste aja kode di bawah ini di gadget pilihan javascrip/html dan bisa anda tempatkan dimana saja!
<style type="text/css">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 97px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
font-size:13px; */
margin: 5px 0px 0px 2px; /* Posisi Kotak Tab */
background-color: #04B404; /* 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: bold; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF0000; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #FFFF00"; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 1px; /* 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: 100%;" class="Tabs">
<a><span >CATEGORY1</span></a>
<a><span >CATEGORY2</span></a>
<a><span >CATEGORY3</span></a>
</div>
<div style="width: 100%; height: 150px;" class="Pages">
<div class="Page">
<div class="Pad">
div.TabView div.Tabs a
{
float: left;
display: block;
width: 97px; /* Lebar Kotak Tab */
height: 22px; /* Tinggi Menu Utama Atas */
text-align: center; /* Posisi Teks Menu Tab */
font-size:13px; */
margin: 5px 0px 0px 2px; /* Posisi Kotak Tab */
background-color: #04B404; /* 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: bold; /* Ketebalan Teks kotak tab */
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF0000; /* Warna background utama kotak tab */
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #cccccc; /* Warna border Kotak Konten */
overflow: hidden;
background-color: #FFFF00"; /* Warna background Kotak konten */
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 1px; /* 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: 100%;" class="Tabs">
<a><span >CATEGORY1</span></a>
<a><span >CATEGORY2</span></a>
<a><span >CATEGORY3</span></a>
</div>
<div style="width: 100%; height: 150px;" class="Pages">
<div class="Page">
<div class="Pad">
isi link/daftar isi blog anda (CATEGORY1)
</div>
</div>
<div class="Page">
<div class="Pad">
</div>
<div class="Page">
<div class="Pad">
isi link/daftar isi blog anda (CATEGORY2)
</div>
</div>
<div class="Page">
<div class="Pad">
</div>
<div class="Page">
<div class="Pad">
isi link/daftar isi blog anda (CATEGORY3)
</div>
</div></div></div></form>
<script style="text/javascript"
src="https://sites.google.com/site/kodeblogger/javascript/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
</div></div></div></form>
<script style="text/javascript"
src="https://sites.google.com/site/kodeblogger/javascript/tab_view.js"></script>
<script type="text/javascript">tabview_initialize('TabView');
</script>
lalu simpan dan liat hasilnya,semoga bermanfa'at.
0 komentar:
Posting Komentar