Memasang Tab Menu Horizontal

Ada beberapa jenis dan layout tentang Tab Menu, ada yang secara vertikal dan ada juga yang secara horizontal dan lain-lain. Tujuannya sendiri , selain merupakan navigasi yang memudahkan dan memanjakan pengunjung , Tab Menu juga mempercantik desain blog kita.

Dan untuk kali ini, saya akan menulis tentang Tab menu berjenis Horizontal seperti gambar di atas. dan agar memudahkan dalam pemasangnya kita akan mengunakan penyedia layanan Tab Menu Generator.

Langkah-langkahnya seperti berikut ini.

Pertama : buka situs www.cssmenumaker.com

Kedua : Dalam kolom Horizontal Css Menus pilih salah satu desain yang kita sukai. kemudian tekan link tulisan Customize.

Ketiga : Setelah terbuka halaman Customize. dalam kotak kosong isi berapa jumlah bottom ( tombol ) yang akan kita gunakan.misalkan di isi dengan 4 atau 5. kemudian tekan Submit. untuk menuju halaman berikutnya.

Keempat : Dalam halaman step 1 ini. Di bawah tulisan Enter Label And Link For Each Buttom , ada sejumlah kotak kosong yan perlu kita isi.

Kolom Button Label : Menamai Button/Tab Menu. misalkan Home, Album, Login dll.

Link : Isi alamat link url yang sesuai dengan Labelnya. misalkan Label Home Link url-nya di isi dengan http://alamatblogkita.com/. Label Photo Link url-nya di isi dengan Categorie/label photo di blog kita.

untuk langkah mudahnya seperti ini :

buat tab baru di browser baik IE atau FireFox,kemudian buka situs blog kita, pada categorie/label di blog kita klik kanan di atas label photo, dan pilih Copy Link Location.

Setelah itu balik lagi ke situsnya Cssmenumaker.com, pada kolom Link , klik kanan mouse kemudian pilih paste.

dan begitu juga untuk alamat url yang lainnya.

Setelah di isi semuanya, tekan tombol Generate Menu Code.

Kelima : Kemudian terbuka halaman donlot images file, html kode dan css kode. langkah pertama donlot dulu image filenya.

karena ini berbentuk file .zip extrakan dulu ke dalam komputer kita, kemudian upload atau simpan image filenya ke tempat biasa kita menyimpan gambar. misalkan ke photobucket.com.( baca cara menyimpan gambar ke server ).

Keenam : Sekarang kita balik ke situs kita dan buka halaman Template blog kita, kemudian pilih tulisan Edit Html.

kemudian cari kode ini ( baca cara mudah mencari kode di sini. )

<div id='header-wrapper'> <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>

Ganti angka satu ( 1 ) dengan angka tiga ( 3 ) dan tulisan no dengan yes. tujuannya untuk menambah elemen widget di bagian header.

kemudian masukan kode Css kode dari situs Cssmenumaker.com ke tempat kode Css template blog kita.

gambar css code dari Cssmenumaker.com

Copi dan simpan code dari cssmenumaker.com ini. contohnya saya menyimpanya di atas tag #header-wrapper kode Css template blog kita.

DI ATAS SINI /* Header ----------------------------------------------- */ #header-wrapper { width:660px; margin:20px auto 10px;

langkah selanjutnya misalkan kita di beri kode dari Cssmenumaker seperti ini.

ul#menu { width: 100%; height: 43px; background: #FFF url("images/menu-bg.gif") top left repeat-x; font-size: 0.8em; font-family: "Lucida Grande", Verdana, sans-serif; font-weight: bold; list-style-type: none; margin: 0; padding: 0; } bla..bla..bla ul#menu li a.current{ color: #FFF; background: #FFF url("images/current-bg.gif") top left repeat-x; padding: 5px 15px 0; }

ganti url (" images/menu-bg.gif") dengan alamat gambar "menu-bg.gif" url kita. begitu juga url ("images/current-bg.gif") dengan alamat gambar "curren.gif" url kita. Setelah beres Klik tulisan SIMPAN TEMPLATE.

Ketujuh : Setelah itu buka tab ELEMEN HALAMAN

Di atas widget header tekan tulisan TAMBAHKAN SEBUAH ELEMEN HALAMAN.

Dalam pemilihan widget tambahkan ke blog HTML/JAVASCRIP.

Setelah terbuka halaman HTML/JAVASCRIPT masukan HTML Code dari Cssmenumaker. misalkan kode Html code nya seperti ini.

<ul id='menu'> <li ><a class='current' href='http://www.jaloee.blogspot.com' >home</a></li> <li ><a href='http://http://jaloee.blogspot.com/search/label/Photo' >Photo</a></li> <li ><a href='http://http://www.blogger.com/' >login</a></li> </ul>

Masukan Html code -nya seperti gambar di bawah. sedangkan untuk kolom judul-nya ngga usah di isi.

Kemudian SIMPAN PERUBAHAN.

Jika ingin Tab Menu di bawah posisi Header kita tinggal drag/ pindahkan saja widgetnya ke bawah widget Header.

Sejauh ini kita telah membuat dan memasang sebuah Tab Menu Horizontal. Sekarang bagaimana kalau ingin menambah dan mengedit Tab Menu secara manual. Misalnya kita ingin menambah Label Tab Button dan alamat Urlnya.

Pertama : Dalam Template buka Elemen Halaman di lanjutkan dgn membuka widget Tab Menu untuk di edit.

Misalkan Code Html Tab Menu-nya seperti ini.

<ul id="menu"> <li><a class="current" href="http://www.jaloee.blogspot.com">home</a></li> <li><a href="http://http://jaloee.blogspot.com/search/label/Photo">Photo</a></li> <li><a href="http://http://www.blogger.com/">login</a></li> </ul>

untuk menambah Tab Menu kita tinggal menulis dan memasukan label dan alamat urlnya yang diapit oleh tag <li> ... </li> . contohna.

<li><a href="http://www.alamat url">Label Tab</a></li>

Menambahkannya di antara properti List seperti ini.

<ul id="menu"> <li><a class="current" href="http://www.jaloee.blogspot.com">home</a></li> <li><a href="http://www.alamat url">Label Tab</a></li> <li><a href="http://http://jaloee.blogspot.com/search/label/Photo">Photo</a></li>

Sekarang bagaimana jika memasang Tab Menu tidak mengunakan sebuah widget html/javascrip seperti lagkah ke enam di atas. Untuk mengetahuinya bisa anda baca (Memasang Tab Menu Bag ke2 di sini)

Technorati tags: Belajar blogs, New blogger