Salam Blogger, selalu terucap dari "Karya Anak Kidoel" Menu horizontal merupakan kumpulan beberapa link yang diletakkan secara horizontal dan biasanya ditempatkan di bawah header. Pada kesempatan ini, Karya Anak Kidoel 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, Karya Anak Kidoel sediakan di bawah tuuuch tingal pilih OK, sobat 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 demi langkah sobat jalani, dan siap melihat hasilnya, tinggal sobat Simpan Template, kemudian lihat hasilnya, "Selamat Mencoba, dan Semoga artikel ini bisa Bermanfaat buat anda"

Terima Kasih

Created By Syarief Hidayat



------------------------------------------------------------------------------------------