Cara Membuat Menu Multi Kolom di blog

Oleh Mashudi

Friday, 11 July 2014

assalamualaikum sobat onnetz.
Melihat lihat template atau blog orang lain yang indah-indah pasti bikin kita iri. dari mulai ada kursor yang berubah-ubah, tulisan terbang, iklan terbang, tulisan berjalan (marque) dan lain-lainnya. nah disini sobat onnetz akan belajar bagaimana menghias dan mempercantik blog kita sekaligus membuatnya lebih dinamis dengan menambahkan menu multi kolom pada gadget.
sebenernya menu multi kolom itu apa sih ?
yang dimaksud menu multi kolom ialah. Membuat menu lebih dari satu menu dalam satu kolom, ini berguna sekali untuk menghemat space blog anda yang sudah memiliki menu yang banyak.
nah bagi mana sudah mengerti ?, tertarik kah?
kalau sudah tertarik langsung aja dicoba bagaimana cara membuat menu multi kolom pada blog.
mari kita pehatikan bagaimana langkah-langkahnya.

Langkah-langkah untuk membuatnya ialah :
1. Login ke blogger
2. buka 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;
}

ayo kita lihat keterangan-Keterangan berikut apabila anda ingin sedikit mengotak-ngatiknya :

- 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. Silahkan masukkan kode dibawah ini sebelum kode </head>

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>

Keterangan:

- 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

Ayo silahkan mencoba, otak atik demi memperindah tampilan blog sobat onnet. dan ingat masih banyak pengetahuan untuk memperindah blog kita tanpa harus membuatnya berat.

Terima Kasih Atas Kunjungan Anda
DITULIS OLEH Mashudi
Jika mengutip harap berikan link yang menuju ke artikel Cara Membuat Menu Multi Kolom di blog ini. Jika artikel ini bermanfaat, ajak kawan mu untuk ambil manfaatnya. Terima kasih atas perhatiannya, baca juga yang lainnya yah.

Tag : SEO , Tips dan tricks Blogger

Translate all