Membuat menu multi kolom disini maksudnya membuat lebih dari satu
menu dalam satu kolom, ini berguna sekali untuk menghemat space blog
anda yang sudah memiliki menu yang banyak seperti pada contoh screenshot
berikut:
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. Masukan kode dibawah ini sebelum kode diatas
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;
}
Keterangan :
- 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
Untuk mengetahui kode-kode warna silahkan klik
disini
5. Silahkan masukkan kode dibawah ini sebelum kode
</head>
<script src='http://superinhost.com/trikblog/tabview.js' type='text/javascript'/>
6. Kemudian
Save
Kemudian ke menu
Layout-->
Page Elements-->pilih
Add Gadget yang akan kamu tempatkan menu multi kolom ini-->
HTML/Javascript
Silahkan masukkan script menu multi kolom dibawah ini:
<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>
- 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
Silahkan dicoba,,semoga berhasil!!!
Kumpulan Turotial Blog
.
:
Pada episode yang lalu saya sudah menerangkan tentang kemunculan widget attribution blogger dan cara memindahkanya,
pada episode kali ini pun masih membahas tentang widget attribution
blogger namun yang saya bahas kali ini adalah cara menghilangkanya.
Tampilan
Komentar Owner atau pemilik blog berbeda ini sudah menjadi
pernak-pernik blog yang popular karena dengan trik ini pembaca komentar
bisa membedakan author dengan user di komentar artikel.
Hai
sobat blogger, bagaimanakah kabar Anda sekalian ? semoga dalam keadaan
sehat dan selalu ceria. Pada tulisan kali ini, saya akan membagikan ilmu
yang sudah saya pelajari kepada Anda yaitu masih tentang blogger dan
topik yang saya bahas kali ini adalah seputar "Menampilkan widget pada
halaman tertentu" yang sering digunakan pada template megazine, misalnya
anda ingin menampilkan widget dihalaman post saja atau tidak ada hanya
dihalaman post.
