Skip to main content

Membuat Menu Navigasi Horizontal


Beberapa hari yang lalu, sahabat saya My Bands dari Malaysia, melalui Shout Box bertanya tentang cara membuat menu navigasi horizontal seperti di blog ini. Untuk membuatnya, kita bisa menggunakan JavaScript atau bisa juga dengan CSS (Contek Sana Sini ...). Banyak tutorial yang membahas masalah ini, seperti Suhu "Kang Rohman", karena saya adalah orang yang sangat awam dengan dunia CSS, maka saya hanya akan menunjukkan link-linknya saja, tanpa membahasnya secara detail. Hal ini juga termasuk rasa terima kasih saya pada mereka, para Suhu Blogger...

Untuk menu di blog ini, sang pembuat templet tampaknya memang sengaja memakai Widget LinkList yang ada pada fitur blogger, lalu ditaruh di bagian header, dan dikombinasikan sedikit dengan bahasa CSS. Templet blog ini saya dapatkan dari Suhu O_OM, yakni Elegant Style & SEO Friendly yang kemudian saya improvisasikan dengan templet milik O_OM sendiri. Sorry, Suhu...sudah "nyontek" templetnya tanpa idzin.... Thank's untuk Suhu atas templetnya...

Oke, kita langsung saja ke TKP. Ada banyak tampilan yang bisa kita aplikasikan di blog kita. Silahkan pilih yang sobat sukai.

Horizontal tab menu 10 :




Untuk membuatnya, silahkan klik di sini.

Horizontal Tab menu J :



Untuk membuatnya, silahkan klik di sini.


Free Horizontal Tab Menu F :




Untuk membuatnya, silahkan klik di sini.

Menu Drop down dengan CSS :



Untuk membuatnya, silahkan klik di sini.

Menu navigasi-dengan-css-2 :



Untuk membuatnya, silahkan klik di sini.

Menu Navigasi Css 6 :



Untuk membuatnya, silahkan klik disini.

Menu Navigasi Link List :



Untuk membuatnya, sobat bisa mendownload templet Elegant Style & SEO Friendly, kemudian improvisasikan dengan blog ini. Atau sobat bisa menambahkan kode Css sebelum tag dan id navbar pada bagian body.

Kode CSS :


/*-- (Menu/Nav) --*/
#nav{background:#fff url(http://i290.photobucket.com/albums/ll256/angkatan2006/untuk%20header/topmenubgrhy3.gif) no-repeat; height:32px; padding:4px 0 0; margin-bottom:0px}
#nav-left{float:left; display:inline; width:660px; padding-left:6px}
#nav-right{float:right; display:inline; width:200px}
#nav ul{position:relative; overflow:hidden; padding-left:0px; margin:0; font:1.0em Verdana,Arial,Helvetica,sans-serif;font-weight:bold;}
#nav ul li{float:left; list-style:none}
#nav ul li a, #nav ul li a:visited{display:block; color:#fff; margin:0 5px; padding:5px 4px; text-decoration:none}
#nav ul li a:hover{color:#800000; background-color:#fff; margin:0 5px; padding:5px 4px}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#fff; color:#fff; padding:5px 7px}
/*-- (Search) --*/
#search{background:#fff url(http://bp2.blogger.com/_C6KkooKXCEw/SJGsfIpnjYI/AAAAAAAACF4/5PYosH3CSkc/s400/search.gif) 6px 0px no-repeat; border:1px solid #333; float:right; height:23px; margin:0 15px 0 0; width:180px}
#search input{font-family:Verdana,Arial,Helvetica,sans-serif; background:transparent; border:0; color:#555; float:left; font-size:12px; margin:5px 0 0; padding:0px 2px 2px 30px; width:140px}



Dan id Navbar biasanya seperti ini.


<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='yes'>
<b:widget id='LinkList1' locked='true' title='' type='LinkList'/>
<b:widget id='HTML1' locked='true' title='Search' type='HTML'/>
</b:section>
</div>



* sesuaikan kode warna #fff dan link url yang berwarna merah dengan templet milik sobat.

Note :
Tiap templet kadang memakai kode yang berbeda. Ada yang berhasil dan ada pula yang gagal. Maka, jika sobat adalah termasuk tipe pemalas seperti saya , maka lebih baik cari templet garatisan saja (usahakan yang sudah terpasang menu navigasinya). Selamat bereksperimen ria...

Comments

  1. wah sip juga sangat jelas boss

    ReplyDelete
  2. @ suhu Jaloee ;

    Satu kehormatan lagi karena suhu sudah mau mampir sejenak di blogku..

    Sukses untuk Suhu...Amien.

    ReplyDelete
  3. Nyoba kommen nih...
    salam sukses, Ha'...

    ReplyDelete
  4. Halo, merasa blogger ? jangan lupa bergabung dengan KitaBlogger.com untuk membangun komunitas bersama-sama ^_^

    ReplyDelete
  5. yups benar klau makai wordpress gimana?? ksh tau dong...

    singgah ajha ke blog saya... http://Costri4efer.wordpress.com

    mohon kerja samanya y, thank's buat semuanya.

    ReplyDelete
  6. @ costri4efer ;
    Tidak semua theme wordpress mendukung menu navigasi, karena itu pilihlah theme yang ada menu navigasinya. Untuk lengkapnya, silahkan kunjungi link ini.

    Salam akrab...

    ReplyDelete
  7. thanks banget ya tips dan infonya...selamat puasa sob...!

    ReplyDelete
  8. Pusing Saya... Mohon Bantuannya

    ReplyDelete
  9. boleh dicoba nih mas coz lagi butuh buat template ^^

    ReplyDelete
  10. wah, makasih sekali infonya sob...

    sangat berguna sekali bagi saya yang masih newbie ini

    ReplyDelete
  11. tipsnya manteb nih,, patut buat dicoba :)

    ReplyDelete
  12. membantu sekali buat blogger pemula seperti saya ini, kang.... matur nuwun

    ReplyDelete
  13. ada yg tau gx cara menyisipkan contact di navigasi

    ReplyDelete
  14. Download aja contoh horizontal menu, vertical menu atau dropdown menu di www.designedmenus.blogspot.com

    ReplyDelete

Post a Comment

Kepada Sobat-Sobat sekalian silahkan komen Disini, Semuanya boleh komen, yang tua sampai muda bebas berkomen ria di bawah ini.

Silahkan menuliskan komentar anda pada opsi Google/Blogger untuk anda yang memiliki akun Google/Blogger.

Silahkan pilih account yang sesuai dengan blog/website anda (LiveJournal, WordPress, TypePad, AIM).

Pada opsi OpenID silahkan masukkan URL blog/website anda pada kotak yang tersedia.

Atau anda bisa memilih opsi Nama/URL, lalu tulis nama anda dan URL blog/website anda pada kotak yang tersedia. Jika anda tidak punya blog/website, kolom URL boleh dikosongi.

Gunakan opsi 'Anonim' jika anda tidak ingin mempublikasikan data anda. (sangat tidak disarankan)

Makacih ya atas komennya ...

Popular posts from this blog

HUMAN RELATION ; Perspektif Psikologi Humanistik, Fungsionalisme dan Behaviorisme (Sebuah Kajian Analitis-Interkonektif)*

Pendahuluan
Human Relation, merupakan hubungan atau kerjasama antara dua individu atau lebih, khususnya dalam status hubungan atau interaksi social. Buruk atau baiknya human relation dapat diukur dari adanya kepercayaan yang bersifat timbal balik antara satu orang dengan orang lain serta dari adanya sebuah penghormatan atau penghargaan dan rasa tolong menolong yang kokoh. Bukan menjadi keraguan lagi bahwasanya human relation menjadi suatu keinginan yang sangat primordial bagi setiap yayasan atau sebuah organisasi, bahkan menjadi syarat utama dari terealisasinya tujuan-tujuan serta pencapaian visi dan misi sebagai kunci kesuksesan organisasi pada umumnya.

Human relation sering disebut juga dengan “interpersonal relation”, yaitu kerjasama sekelompok individu dari masyarakat social yang tumbuh dari adanya hubungan antara satu individu dengan individu yang lain. Interpersonal relation merupakan sebuah deskripsi yang jelas tentang tata pergaulan atau tingkah laku manusia dan karakteristik pr…

Kumpulan Novel Jar (untuk HP Aplikasi Java)

Bagi para novel mania, membaca novel tentunya adalah kesenangan tersendiri. Semacam interaksi personal dengan dunia imaji yang kerap menghentak-hentak ambisi. Di dunia maya, kita banyak menjumpai situs-situs yang menyediakan novel dengan berbagai format dan ekstensinya. Ada format PDF (portable document format), yang dapat dibuka dengan program Acrobat Reader atau sejenisnya. Ada juga yang dengan bentuk format htm, yang dapat dibuka dengan browsing atau internet eksplorer secara offline. Ada juga yang berbentuk format exe. Ada juga yang menggunakan windjvu-viewer (untuk membuka file extensi *.djv / *.djvu). Ada format "lit Viewer"(untuk membuka file extensi *.lit). Dan banyak "ada juga-ada juga" yang lain...

Tapi, pada postingan kali ini, saya akan berbagi lagi dengan sobat sekalian tentang Novel HP (aplikasi java). So, bagi sobat yang punya hobbi ngoleksi novel, tetapi jarang online dan tidak punya komputer, jangan khawatir. Berkat kecerdasan teknologi, kita yang …

Download Alfiyah MP3

Di kalangan pondok pesantren, nama Ibnu Malik dan Kitab Alfiyah adalah dua entitas yang sudah tidak asing lagi, terlebih bagi pondok pesantren salaf yang setiap harinya bergumul dengan kitab kuning dan tata gramatika bahasa Arab (Nahwu & sharrof). Di pondok saya sendiri, Mambaul Ulum Bata-bata, Pamekasan, Madura, kitab Alfiyah Ibnu Malik menjadi Kitab standart acuan dalam pembelajaran Kaidah bahasa Arab, dan menjadi syarat pelulusan ke tingkat Aliyah B, yang orientasinya memang menitik beratkan pada kajian kitan klasik.

Pada malam-malam tertentu, para santri diwajibakan membaca nadham (bait-bait) Alfiyah dengan bersama-sama, dengan lagu dan irama yang bermacam-macam. diharapkan, dengan tradisi pembacaan Alfiyah secara rutin dan intens, santri mamapu menhafal dan memahami isi kandungan kitab Alfiyah ini dengan baik dan mudah.

Di era teknologi dan informasi yang serba canggih ini, kitab Alfiyah dan kitab-kitab kuning lainnya sudah tidak dipelajari secara manual dan klasikal, tetapi …