Membuat Menu Horizontal

Apa itu menu horizontal? Menu horizontal adalah menu yang gak vertikal, itu penjelasan singkatnya...wkwkwkwk...serius2: 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://t4belajarblogger.blogspot.com">HOME</a>

<a href="http://t4belajarblogger.blogspot.com/2009/11/bagaimana-kalau-seorang-seniman-lagi.html">DAFTAR ISI</a>

<a href="http://t4belajarblogger.blogspot.com/2009/11/english-post.html">ENGLISH</a>

<a href="http://t4belajarblogger.blogspot.com/2009/12/arabic-blogger-tutorial.html">
العربية</a>

<a href="http://t4belajarblogger.blogspot.com/2009/12/sekilas-info.html">SEKILAS INFO</a>

<a href="http://t4belajarblogger.blogspot.com/2009/11/link-to-this-blog.html">LINK AND BANNER</a>

<a href="http://feeds.feedburner.com/%7Er/TutorialBlogDiBloggerBelajarMembuatBlogNgeblogUntukPemulaDanLanjutan/%7E6/2" target="_blank">FEED</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://t4belajarblogger.blogspot.com ===>> HOME

Bagaimana...gampangkan?

O ya, hampir kelupaan. Mungkin beberapa rekan blogger merasa trik di atas rada susah atau mungkin ribet, maka gak sah khawatir...masih ada alternatif lain, yaitu cara membuat menu horizontal secara instan. Tentu ini hanya membutuhkan waktu yang relatif pendek untuk membuatnya. Oh iya...gak hanya menu horizontal yang dapat teman2 buat, menu vertikal juga bisa...dan kerennya lagi bisa milih2 gaya/style suka2 kita. Biar gak kelamaan, langsung aja kunjungi web: Accessify.com

Berhubung itu webnya bule, jadi teman2 bisa menggunakan jasa Google translate. Itung2 buat nerjemahin kata2 yg susah. GoOd LuCk~





Semoga Bermanfaat []

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