Membuat Tab Menu Horizontal

Published by Kang Fathur Friday, December 04, 2009

Salam Blogger, selalu terucap dari "Kang Fatur"

Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, kang fatur akan membagikan trik blogger tentang membuat menu horizontal secara sederhana. Mengapa dikatakan sederhana? Karena jika kita optimasi lebih mendalam, ternyata terdapat beberapa varian dari menu horizontal tersebut alias model-model. Fungsi dari trik blogger ini adalah sebagai salah satu navigasi dalam blog agar memberikan layanan kemudahan shortcut link bagi pengunjung blog sobat. Yaa low pingin lihat contohnya gak jauh dari gambar dibawah ini :

Baik Sobat-sobat, teman teman, kita langsung aja ke-tahap pembuatan OK,

1. Seperti biasa Login ke-bloger sobat
2. Tataletak --->> Edit HTML
3. Cari kode ]]></b:skin> lalu pastekan kode dibawah ini tepat di atas kode tersebut :

/* linktab

================== */

#linktab{
background:url(http://i634.photobucket.com/albums/uu61/adetea/tabhijau.gif) ;
width: 864px;
height: 30px;
font-size: 11px;
font-family: georgia, Tahoma, Verdana;
color: #ffff66;
font-weight: bold;
margin: 0px auto 0px;
padding: 0px;
border-left: 1px solid #000;
border-right: 1px solid #000;
overflow: hidden;
}
#tabright {
width: 200px;
height: 30px;font-size: 11px;
float: right;
margin-right:10px;
margin-bottom:50px;
padding: 0px;
}
#tabright a img {
border: none;
margin: 5px;
padding: 0px;
}

#linktab ul {
margin:0;
padding:1px 10px 0px 0px;
list-style:none;
}
#linktab li {
display:inline;
margin:0;
padding:0;
}
#linktab a {
float:left;
background:transparent;
margin:0;
padding:0 0 0 3px;
text-decoration:none;
}
#linktab a span {
float:right;
height: 35px;
display:block;
background:transparent;
padding:7px 6px 4px 6px;
color:#ffff66;
border-right: 1px solid #000;
}
#linktab a span {
float:none;
}
#linktab a:hover span {
color:#fff;
}
#linktab a:hover {
background-position:0% -42px;
}
#linktab a:hover span {
background-position:100% -42px;
}

4. Untuk Kode Warna silahkan sobat atur aja sendiri sesuaikan dengan selera masing-masing yaa???
5. Kemudian untuk Gambar Background juga sobat tinggal ganti, kang fatur sediakan di bawah tuuuch tingal pilih OK, sobta tinggal ganti kode yang tebal dan berwarna merahnya aja. Tapi kalau sobat yang ahli bikin gambar, bikin aja hehehe.

(http://i634.photobucket.com/albums/uu61/adetea/tabungu.gif)

tabbiru.gif



tabmerah.gif



tabhijau.gif



tabmerah.gif



tabungu.gif

6. Kemudian cari kembali kode yang mirip seperti di bawah ini.

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='1'
showaddelement='no'>
<b:widget id='Header1' locked='true' title='test
(Header)' type='Header'/>

... dan seterusnya ...

</b:section>
</div>

7. Copas kode berikut tepat di bawah kode yang berwarna kuning atau berwarna biru (pokoknya sesuaikanlah dengan template sobat OK).

<div id='linktab'>
<ul>
<li><a href='URL Link Disini'><span>Home</span></a></li>
<li><a href='http://almansuqie-tips.blogspot.com/' target='_blank'><span>AlmansuQie</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>
</ul>

<div id='tabright'>
<form action='http://NAMABLOGSOBAT.blogspot.com/search' id='searchform' method='get' name='searchform'>
<input id='s' name='q' type='text' value=''/>
<input id='searchsubmit' type='submit' value='Cari'/>
</form>

</div></div>

8. Setelah langkah demilangkah sobat jalani, dan siap melihat hasilnya, tinggal sobat Simpan Template, kemudian lihat hasilnya, "Selamat Mencoba, Semoga Bermanfaat"

KOMENTAR ANDA SANGAT BERMANFAAT BAGI PERKEMBANGAN BLOG INI