Saturday, October 8, 2011

Cara Membuat Menu Horizontal (Vertikal juga)

menu horizontal adalah menu navigasi yang memilki arah deret horizontal. Jadi dengan menu ini, teman2 bisa mengatur beragam menu di blognya masing2. Biasanya menu yang disediakan meliputi home atau halaman depan blog, daftar isi, profil admin, dsb dan tentunya teman2 bisa mengaturnya sedemikian rupa sesuai keinginan masing2.

Agar lebih jelasnya teman2 bisa nengok ke bagian atas alias header blog ini, nah deretan horizontal yang terdapat menu seperti Home, Daftar Isi, English, العربية, dsb ...nah, itulah yang dinamakan menu Horizontl



Dah, langsung aja yaaa...cara bikinnya seperti biasa teman2 login ke blogger dulu, lalu klik tuh Tata Letak lalu Edit HTML


Selanjutnya letakkan kode berikut ini tepat di atas kode tag ]]></b:skin>

.horizontal-menu{width:100%; overflow:hidden; border-bottom:1px solid #000000;}
.horizontal-menu ul{margin:0; padding:0; padding-left:0px; font:11px Arial; list-style-type:none}
.horizontal-menu li{display:inline; margin:0}
.horizontal-menu li a{float:left; display:block; text-decoration:none; margin-right:2px; padding:2px 2px 2px 2px; color:#000000; background:#999999;}
.horizontal-menu li a:hover{color:#FFFFFF; background:#FF9900}

Sudah itu klik simpan template


Bagian Utama yang bisa teman2 ubah adlh sbg berikut:

-------------------------------------
Biru: Itu adalah ketebalan garis pinggir di bawah menu, bagi teman2 yg tdk menginginkannya silahkan 1px diubah menjadi 0px

Pucat: itu adalah warna tampilan menu, contoh:. Silahkan cari kode warna di sini

Orange: Adalah Warna background ketika disorot, ketika tman2 menyorot menu horizon pada blog ini pasti warnanya seperti ini:. Silahkan cari kode warna di sini
-------------------------------------


Selanjutnya yang harus teman2 lakukan yaitu menaruh kode HTML menu horizontal pada elemen add gadged bagian header (bagian atas blog)

Bagi teman2 yang ternyata template-nya gak ada elemen add gadget pada bagian headernya, maka bisa ditambah dengan menggunakan trik yang berada di postingan "cara menambah add elemen pada bagian header", pilih add elemen di bawah header, bukan yang di atas header. Kalau sudah menerapkan trik tersebut, maka langkah selanjutnya (pastikan anda sekarang berada pada halaman tata letak/layout) adalah klik add gadget/tambah gadget, pilih gadget HTML JavaScript, dan isikan kode HTML berikut di dalamnya

<div style="overflow:no; width:100%px; height:100%px; padding:0px; border:0px solid #FFFFFF; background:#FFFFFF;">

<div class="horizontal-menu">
<li>

<a href="http://trojanramnitr.blogspot.com">HOME</a>
<a href="http://http://trojanramnitr.blogspot.com">DAFTAR ISI</a>

<a href="http://trojanramnitr.blogspot.com">BLOGGING</a>


</li>
</div>
</div>


Klik Simpan


Yang perlu teman2 ubah adalah pada bagian2 yang telah saya tandai denagn warna biru itu adalah link/URL menu serta bagian yang di-bold/ditebalkan yaitu keterangan dari link/URL tersebut, ex:http://trojanramnitr.blogspot.com ===>> HOME

Bagi teman2 yg merasa ribet dengan cara d atas ,temen2 dapat mengakses Accessify.com .menu yg dapat di buat gak cuma horizontal saja,tapi vertikal juga.

Berhubung itu webnya memakai bhs inggris,maka temen2 bisa pakai Google translate.



Semoga Bermanfaat []

Tags: cara membuat menu Horizontal, script menu horizontal, kode HTML buat menu Horizontal, edit CSS menu Horizontal, add gadget menu horizontal

0 komentar:

Post a Comment

tinggalkan komentar anda untuk mendukung blog ini :-)

Share

Twitter Delicious Facebook Digg Stumbleupon Favorites