Cara membuat simpl menu 3 kolom

Ok kali ini saya akanmencoba mebahas tentang Cara membuat simpl menu 3 kolom mungkin blog kesayangan sobat suda banyak isi artikel atau tampilan blog sobat tidak muat lagi untuk menampilkan isi-isi dari blog kesayangan sobat.
Na kali ini sobat tidak usah kawatir ada cara yang jitu
untuk menampilkan dan mempercantik blog kesayangan sobat, dengan cara menampilkan isi blog sobat dengan Scrip simpl menu 3 kolom, Oke langsung saja sobat copy paste scrip di bawa ini. pemasangannya cukup muda sama seperti pemasangan scrip pada umumnya. tinggal sobat pili tataletak trus tambah gadet trus pili Javascrip/HTML, mudah bukan....

<div style="border:1px solid#cccccc">

<style type="text/css">

div.TabView div.Tabs a

{

float: left;

display: block;

width: 60px; /* Lebar Kotak Tab */

height: 20px; /* Tinggi Menu Utama Atas */

text-align: center; /* Posisi Teks Menu Tab */

margin: 5px 0px 0px 3px; /* Posisi Kotak Tab */

background-color: #000000; /* Warna background Kotak Tab */

padding-top: 2px; /* Spasi Atas */

border: 2px 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: #008000; /* Warna background utama kotak tab */

}

div.TabView div.Pages

{

clear: both;

border: 1px solid #ffffff; /* 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: 207px;" class="Tabs">

<a><span style="color:white"><b>MENU 1</b></span></a>

<a><span style="color:white"><b>MENU 2</b></span></a>

<a><span style="color:white"><b>MENU 3</b></span></a></div>

<div style="width: 205px; height: 275px;" class="Pages">

<div class="Page">

<div class="Pad">

 ISI MENU 1

</div></div>

<div class="Page">

<div class="Pad">

  ISI MENU 2

</div></div>

<div class="Page">

<div class="Pad">

  ISI MENU 3

</div></div>

<script style="text/javascript" src="http://pelajarandashblogdotblogspotdotcom.googlecode.com/files/tab_view.js"></script>

<script type="text/javascript">tabview_initialize('TabView');

</script></div></div></div></div></form></div>

Untuk lihat hasilnya sobat bisa klik di sini lihat di posting paling bawah, hanya saja suda di modif.. DEMO

Keterangan : 

Untuk tulisan yang berwarna Ijo godong itu hanya keterangan saja. untuk warna yang berwarna kuning sobat bisa ganti sesuai tinggi dan lebar posisi yang sobat inginkan. Untuk tulisan MENU 1 sampai 3 sobat bisa ganti judul tersera sobat yang di inginkan, Dan untuk tulisan yang berwarna merah ISI MENU 3 sobat isi dengan isi blog sobat....

Semoga berman fa'at...

Artikel Terkait:

Posted in: Tips dan trik javascrip