Untuk membuat template kita lebih ringkas dan tidak memakan ruang yang banyak maka kita perlu untuk membuat susunan tampilan yang singkat dan terorganisasi serta tersusun rapi, salah satu caranya adalah kita memakai Menu Multi Kolom, secara ringkas cara untuk membuat menu multi kolom sebagai berikut :
1. Buka blogger.com dan login ke account anda
2. Pilih Layout-->Edit HTML
3. Kemudian cari kode ]]></b:skin>
4. Masukan kode dibawah ini sebelum kode ]]></b:skin>
div.TabView div.Tabs {
height: 24px;
overflow: hidden;
}
div.TabView div.Tabs a
{
float: left;
display: block;
width: 90px; text-align: center; <!-- lebar kotak menu utama -->
height: 24px; <!-- tinggi kotak menu utama -->
padding-top: 3px;
vertical-align: middle;
border: 1px solid #000; <!-- warna border menu utama -->
border-bottom-width: 0;
text-decoration: none;
font-family: "Arial", Serif;
font-weight: 900;
color: #000; <!-- warna Font menu utama -->
}
div.TabView div.Tabs a:hover, div.TabView div.Tabs a.Active
{
background-color: #FF9900; <!-- Warna background menu utama -->
}
div.TabView div.Pages
{
clear: both;
border: 1px solid #6E6E6E; <!-- Warna border kotak utama -->
overflow: hidden;
background-color: #FF9900; <!-- warna background kotak utama -->
}
div.TabView div.Pages div.Page
{
height: 100%;
padding: 0px;
overflow: hidden;
}
div.TabView div.Pages div.Page div.Pad
{
padding: 3px 5px;
}
5. Masukkan kode dibawah ini sebelum kode </head>
<script src='http://geocities.com/asct14/tabview.js' type='text/javascript'/>
6. Kemudian Save
Masuk ke Layout-->Page Elements-->pilih Add Gadget yang ditempatkan menu multi kolom terus pilih HTML/Javascript
Masukkan script menu multi kolom dibawah ini ke gadget yang dipilih :
<form action="tabview.html" method="get">
<div class="TabView" id="TabView">
<div class="Tabs" style="width: 294px;">
<a>menu 1</a> <!-- menu anda -->
<a>menu 2</a>
<a>menu 3</a>
</div>
<div class="Pages" style="width: 294px; height: 150px;"> <!-- lebar dan tinggi menu -->
<div class="Page">
<div class="Pad"><ol>
<li>Link 1 menu 1 </li>
<li>Link 2 menu 1 </li>
<li>Link 3 menu 1 </li> </ol>
</div>
</div>
<div class="Page">
<div class="Pad"><ol>
<li>Link 1 menu 2 </li>
<li>Link 2 menu 2 </li>
<li>Link 3 menu 2 </li> </ol>
</div>
</div>
<div class="Page">
<div class="Pad"><ol>
<li>Link 1 menu 3 </li>
<li>Link 2 menu 3 </li>
<li>Link 3 menu 3 </li> </ol>
</div>
</div>
</div>
</div>
</form>
<script type="text/javascript">
tabview_initialize('TabView');
</script>
Ubah nilai-nilai diatas dan sesuaikan dengan template yang dipakai. Untuk kode-kode unik HTML warna minta bantuan sama Google saja biar cepat ketemunya.
menu 1, menu 2 dan menu 3 --> diganti nama sesuai selera kita, misalnya Tutorial, Bisnis dan lainnya.
Link 1 menu 1, Link 1 menu 2 dan Link 1 menu 3 --> Pasang link anda yang mau dipanggil misalnya
<a href="http://www.blogmu.com" target="_blank">Blogmu</a> --> Nama yang akan tampil di menu adalah Blogmu dan target=”_blank” berfungsi untuk membuat tab baru jika Blogmu di klik.
Untuk mengganti warna Blogmu bisa ditambahi <font color=”Blue”>Blogmu</font> jadinya seperti
<a href="http://www.blogmu.com" target="_blank"><font color=”Blue”>Blogmu</font></a>
Jadinya seperti di sebelah kanan blog saya ini
Selamat mencoba
0 comments:
Post a Comment