Facebook Twitter Friendfeed
Gratis berlangganan artikel!

9 Mei 2012

Cara Membuat Widget 3 Kolom Pada Blog

9 Mei 2012

Date
Tags →

Cara Membuat Widget 3 Kolom Pada Blog membuat lebih dari satu menu dalam satu kolom  ini sangat berguna sekali untuk menghemat space blog kita yang sudah memiliki menu yang banyak Menu Widget di halaman depan Homepage Blog kita.




Langkah-langkah untuk membuat menu multi kolom silahkah ikuti seperti dibawah ini:

1. Login ke blogger anda
2. Layout-->Edit HTML
3. Kemudian cari kode  ]]></b:skin>
4. Copy kode dibawah ini dan letakkan sebelum kode ini ]]></b:skin>

div.TabView div.Tabs
{
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center;
height: 24px;
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000;
border-bottom-width: 0;
text-decoration: none;
font-family: "Times New Roman", Serif;
font-weight: 900;
color: #000;
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900;
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E;
overflow: hidden;
background-color: #FF9900;
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}

Catatan :
- Angka yang berwarna merah = lebar kotak menu utama
- Angka yang berwarna biru = tinggi kotak menu utama
- Kode yang berwarna hijau =  warna border menu utama
- Kode yang berwarna ungu = warna Font menu utama
- Kode yang berwarna abu-abu = warna background menu utama
- Kode yang berwarna kuning = warna border kotak utama
- Kode yang berwana orange = warna background kotak utama

5. Selanjutnya masukkan kode dibawah ini sebelum kode ini </head>

<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>


6. Simpan Template


Selanjutnya kita menuju ke menu Layout -->Page Elements --> Add Gadget --> HTML/Javascript

Silahkan masukkan script menu multi kolom dibawah ini ke HTML/Javascript :

<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 350px;">
<a>Title menu 1</a>
<a>Title menu 2</a>
<a>Title menu 3</a>
</div>
<div class="Pages" style="width: 350px; height: 250px;">

<div class="Page">
<div class="Pad">
Link 1 di menu 1 <br />
Link 2 di menu 1 <br />
Link 3 d1 menu 1 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 2 <br />
Link 2 di menu 2 <br />
Link 3 d1 menu 2 <br />
</div>
</div>

<div class="Page">
<div class="Pad">
Link 1 di menu 3 <br />
Link 2 di menu 3 <br />
Link 3 d1 menu 3 <br />
</div>
</div>

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

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

Catatan :
- kode yang berwarna hijau adalah title menu anda
- kode yang berwarna biru adalah lebar dan tinggi menu multi kolom
- kode yang berwarna merah adalah isi dari menu anda



3 komentar:

  1. Cara ini memang efisien sob Bengkel Bangun juga pakai.
    Selamat pagi selamat beraktifitas.

    BalasHapus
  2. nice, keep on writting :D

    BalasHapus
  3. Kayaknya ini lebih lengkap tutorialnya. Mo nyoba gan.

    BalasHapus

semoga komentar anda bermanfaat bagi kami semua dan turut memajukan semangat untuk memperbaiki kesalahan kami......

-:: TRIMAKASIH ANDA TIDAK BERKOMENTAR SPAM ::-

 

Stats & Directories

Berlangganan Artikel Via Email

Join and get updates by Submitting your email address:
GET UPDATE VIA EMAIL

Join Our Team!

Ghost Blog is proudly powered by Blogger.com | Template by Pendiari
Related Posts Plugin for WordPress, Blogger...