Membuat Tab Menu Horizontal

12/04/2009 Blogger Tips Trik Blog Tutorial Blogger Widget
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

Artikel Terkait

Previous
Next Post »
Penulisan markup di komentar
  • Untuk menulis huruf bold silahkan gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic silahkan gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline silahkan gunakan <u></u>.
  • Untuk menulis huruf strikethrought silahkan gunakan <strike></strike>.
  • Untuk menulis kode HTML silahkan gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silahkan parse dulu kodenya pada kotak parser di bawah ini.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

7 comments

Blogku dah berat banget loadingnya kang, klo misalnya dibikin widget menu horizontal sperti ini, kira2 tambah berat ga yah ?

Balas

Yaa kalau menurut Kang Fatur si biasa aja, tapi low pingin tidak berat, Backgroundnya jangan pake gambar pake kode warna aja.

Balas

gimana cara menampilkan postingan gambar sebagai menu home utama

Balas

pnya ane dah jadi Kang??? ane mau buat tab'y macem2,, nah cara buat page yang mengarah ksna gmn y Kang?? contohnya ane mau buat tab banner n link sahabat... ????? tolong y Kang,,, Terimaksih sblm'y...

Balas

Sobat Ginda Satria, di situ kan ada kata "URL Link Disini" nah itu untuk alamat Link yang akan kita arahkan. Terus ada kata "TAJUK" itu untuk Judul Link yang kita maksud misalnya LINK SAHABAT. Bila ingin menambahkan Tabnya lagi cukup tambahkan kode seperti ini
<li><a href='URL Link Disini' target='_blank'><span>TAJUK</span></a></li>

Balas

i am a free visual artist, any chance you'd like to publish some of my photos? i think it would be great for your blog :-)
really admire your design! send me a e-mail please in case you want to colaborate

Balas