ARSIP BLOG

Cara Membuat Horizontal Link Tab Menu Di Blog

Posted by Bhernadin Erryco on Sabtu, 01 September 2012

Sistem navigasi yang baik dalam blog sangatlah diperlukan yang jelas2 dapat mempermudah pengunjung blog saat sedang menjelajahi isi blog kamu. Sistem navigasi ini bisa berupa Menu, baik horizontal maupun vertikal, atau berupa post yg dengan sedemikian rupa diubah menjadi halaman navigasi. Lalu, apa yg menarik dari Menu Horizontal Tab ini?

horizontal menu

Menu Horizontal bisa menjadi alternatif buat Menu Vertikal biasanya dan bisa jadi ngebuat halaman

blog jadi lebih hemat. Melihat dari pentingya keberadaan nya, Menu Horizontal Tab biasanya diletakkan di tempat yg mudah dilihat pengunjung. Di bawah Header contohnya.

1. Langkah pertama, masuk ke Layout > Edit HTML.

2. Masukkan kode CSS ke dalam template, gampangnya letakkan di atas kode ]]></b:skin>

#navigation{font-size:110%;
height:2.2em;
line-height:2.2em;
margin:0 1px;
color:#999;
}
#navigation li{
float:left;
list-style-type:none;
border-right:1px solid #ccc;
white-space:nowrap;
}
#navigation li a{
display:block;
padding:0 10px;
font-size:0.8em;
font-weight:normal;
text-transform:uppercase;
text-decoration:none;
background-color:inherit;
color: #999;
}
* html #navigation a {width:1%;}
#navigation a:hover{
background:#ccc;
color:#fff;
text-decoration:none;
}

3. Selanjutnya cari kode ini:

<b:section class="header" id="header" maxwidgets="1" showaddelement=”no”>

Kalo engga ketemu cari section dengan class="header".
Lalu ubah menjadi:

<b:section class="header" id="header" maxwidgets="10" showaddelement="yes">

Ini dilakukan supaya kamu bisa memasukkan element di bawah bagian header blog kamu.

4. Lalu masuk ke Page Elements. Di bawah bagian Header, klik Add a Gadget. Pilih HTML/JavaScript

5. Masukkan kode2 ini ke dalamnya:

<div style="text-align: center;">
<div id="navigation">
<ul>
<li class="selected">
<a href="http://blogkamu.blogspot.com/">Home</a></li>
<li><a href="http://blogger-holic.blogspot.com/search/label/LABEL" >Link Label</a></li>
<li><a href="http://blogger-holic.blogspot.com/">Blogroll Links</a></li>
</ul>
</div>
</div>

6. Klik save.


Menu horizontal tab sebaiknya diisi dengan link yg bisa menjadi 'pintu2' bagi artikel lainnya. Contohnya dengan link menuju label tertentu. Dan jangan juga mengisi nya dengan terlalu banyak link, tentunya bakal bikin jadi penuh nantinya.

Pas lagi2 jalan ke blognya O-OM, saya nemuin ada sebuah online tools yg bisa ngedesain menu, horizontal bisa.. vertikal apalagi. Namanya MyCSSMenu. Tools ini rasanya perlu dicoba, selain prosesnya yg mudah, pilihan menunya juga banyak.


Update:
Ok, menu sudah terpasang, terus bagaimana caranya nambah isi link ke dalam menunya?
Caranya mudah aja koq..
tinggal tambahkan:

<li><a href="LINK_YANG_DIINGINKAN" >Anchor text</a></a></li>

diantara <ul> dan </ul>. Ubah LINK_YANG_DIINGINKAN dengan link yang akan dimasukkan ke dalam menu dan ubah Anchor text sesuai link yang dituju. 


Sumber

{ 23 comments... read them below or add one }

Science Share mengatakan... Reply Comment

thanx gan atas infonya..

chuck nuris mengatakan... Reply Comment



punyakku kok ini mas ? yg atas itu kok ndak ada yah

Bhernadin Erryco mengatakan... Reply Comment

@chuck nuris:Blog anda dimana?:-/ biar saya lihat dulu

suanda tohari mengatakan... Reply Comment

Thanks infonya

Bengkel Digital Studio mengatakan... Reply Comment

gan.... supaya menu bar pas di klik ada isinya gmana,,, maklum newbe bisa di cek blog nya nih www.bengkeldigitalstudio.blogspot.com

fajri mengatakan... Reply Comment

mantap sekali masta...izin cb n jgn lupa mmpir ya di blog bru saya...
http://belprog.blogspot.com

inaya s. meidiana mengatakan... Reply Comment

masih ga ngerti ._.
kalau mau ngisi tabnya berarti harus yg udah kita post sebelumnya?
bantuin ya, makasih

mariyanto widodo mengatakan... Reply Comment

terina kasih atas berbagi ilmu yang bermanfaat, salam kenal sobatku.

Tutorial Blogspot dan SEO mengatakan... Reply Comment

wah bagus nih , boleh di coba

Obat Sesak Nafas mengatakan... Reply Comment

postingan ini sangat menarik serta enak di baca tentang cara membuat horizontal link tab menu.... saya berharap bisa berkunjung lagi

Oto Biazza mengatakan... Reply Comment

mksh infonya..
kunjungi jg
http://otobiazza.blogspot.com

Risma Salsabila mengatakan... Reply Comment

artikel yg bgus ijin copas gan

PR IPM SIAK mengatakan... Reply Comment

bingung nich mas
pas terakhir na

Fajar Abdillah mengatakan... Reply Comment

Thanks to information....

iqbal gonzaga mengatakan... Reply Comment

Gan itu kok tiga doang tab nya ,, bisa lebih gk?? 4 atau 5 tab ?? tlong balas yah ;)

Miswanto Antho mengatakan... Reply Comment

oke sobat sebenarnya saya sudah mengerti, tapi hanya sedikit, jadi setiknya saya sangat bertrima kasih kpd sobat, trima kasih atas infonya sobat, silahkan sobat kunjungi blog saya di http://anthosaputra.wordpress.com

Dhani Minho mengatakan... Reply Comment

mau nanya kalau cara nambah lebih dari satu link dalam menu gimana????

thanks banget kalau mau di jawab??

hmi ngabar mengatakan... Reply Comment

punya aq g da d cari

bisnis online paling murah mengatakan... Reply Comment

berhubung ane orang awam nie gan, bagaimana sih, ane masih kurang tau, kalu di blog itu banyak banget kode-kodenya...

my inspiration mengatakan... Reply Comment

mantap gan!!...langsung ane praktekan.....thankz tutorial'y

Marinus mengatakan... Reply Comment

thanks ea gan

Damar Hardianto mengatakan... Reply Comment

Terima kasih atas infonya.
bisa bantu tidak bagaimana menambahkan drop down box nya.
terima kasih

Anonim mengatakan... Reply Comment

thankz kk, blog nya keren abiiz

:) :( ;) :D ;;-) :-/ :x :P :-* =(( :-O X( :7 B-) :-S #:-S 7:) :(( :)) :| /:) =)) O:-) :-B =; :-c :)] ~X( :-h :-t 8-7 I-) 8-| L-) :-a :-$ [-( :O) 8-} 2:-P (:| =P~ :-? #-o =D7 :-SS @-) :^o :-w 7:P 2):) X_X :!! \m/ :-q :-bd ^#(^ :ar!

Poskan Komentar

Ketentuan komentar:
- Baik dan Sopan.
- Komentar harus sesuai dengan isi postingan.
- No Spam, No Junk, No Rubbish, No Porn.
- Mudah Dimengerti.

Dimohon juga untuk Meng-Kritik atau kasih Saran buat Blog ini

Terima Kasih