mas template

Membuat Menu Navigasi Horisontal dan Kotak Pencari di Blog

Menu Navigasi pada blog merupakan elemen yang perlu diperhatikan di dalam sebuah blog yang mementingkan penampilan dan style untuk setiap detilnya. Ada bermacam-macam bentuk menu navigasi di dalam sebuah blog itu, ada menu navigasi horizontal, menu navigasi vertikal atau yang lainya. Selain menggunakan menu horisontal drop down menu, kita juga bisa membuat menu horisontal sederhana (tanpa cabang) ataupun membuat menu horisotal bercabang dengan script css. Seperti yang telah saya buat dalam postingan sebelumnya tentang menu horisontal versi dynamic drive, maka kali ini akan dibuat versi css menu maker. Tampilan menunya bisa dilihat pada gambar di bawah ini.


Untuk membuatnya bisa lakukan posedur berikut:
1.  Login ke menu blogger. Klik Design -> Edit HTML
2.  Backup template anda
3.  Setelah itu, letakkan kode dibawah ini diatas ]]></b:skin>

/*-- (Nav & Search Box) --*/
#nav{
background: #1c426d; /* Warna backgroud Kotak Navigasi */
height:31px; /* Tinggi Kotak Navigasi */
padding:0px;
margin-bottom:5px
}
#nav-left{
float:left;
display:inline;
width:580px
}
#nav-right{
float:right;
display:inline;
width:275px;
padding:1px 0px 0px 0px;
}
#nav ul{
position:relative;
overflow:hidden;
padding-left:5px;
padding-top:1px;
margin:0;
font:1.1em /* Ukuran font tab navigasi */
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:#ffffff; /* Warna teks pada kotak navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a:hover{
color:#ffffff;
background-color:#C4C5B8; /* Warna kotak ketika kursor melintasi teks navigasi */
margin:0 8px;
padding:5px 7px
}
#nav ul li a.current, #nav ul li a.current:visited, #nav ul li a.current:hover{margin:0 8px; background-color:#A6A994; color:#ffffff; padding:5px 7px}
#searchform {
margin: 0;
padding: 0;
overflow: hidden;
display: inline;
}
#searchbox {
background: #EEE url(http://lh3.ggpht.com/_15FopxVONSo/THEhOlDrX4I/AAAAAAAAD28/5oYAsTcO0G8/search-icon.gif) no-repeat left top;
width: 180px;
height: 16px;
color: #202020;
font-size: 12px;
font-family:Verdana,Arial,Helvetica,sans-serif;
font-weight: normal;
margin: 2px 0px 0px 15px;
padding: 4px 0px 3px 25px;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
display: inline;

#searchbutton {
background: #1c426d; /* Warna background tombol pencari */
color: #FFF; /* Warna teks tombol pencari */
font-size: 11px;
font-family:Verdana,Arial,Helvetica,sans-serif;
margin: 0px;
padding: 3px 0px 3px 2px;
font-weight: bold;
border-top: 1px solid #DDD;
border-right: 1px solid #666;
border-left: 1px solid #DDD;
border-bottom: 1px solid #666;
}

Keterangan:
Tulisan berwarna merah diatas merupakan keterangan dari masing-masing kode. Silahkan ganti sesuai dengan template anda.

Jika anda ingin mengganti background menu navigasi dengan gambar, maka tambahkan kode url(alamat gambar anda) dibelakang kode "warna background kotak navigasi". Contohnya:
background: #1c426d url(http://url-gambar);

4.  Setelah itu cari kode seperti dibawah ini
<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>
Cari kode di template anda yang paling mendekati dengan kode diatas

5.  Kalau sudah ketemu, letakkan kode berikut dibawahnya.

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

6.  Sehingga susunannya menjadi seperti ini:

<div id='header-wrapper'>
<b:section class='header' id='header' maxwidgets='3' showaddelement='no'>
<b:widget id='Header1' locked='true' title='Creating Website (Header)' type='Header'/>
</b:section>
<div style='clear: both'/>
</div>

<div id='nav'>
<b:section class='header-tabs' id='header-tabs' preferred='yes' showaddelement='no'>
<b:widget id='LinkList1' locked='true' title='Top Tabs' type='LinkList'>
<b:includable id='main'>
<div class='widget-content'>
<b:if cond='data:title'/>
<div id='nav-left'>
<ul>
<li><a href='/'>Home</a></li>
<b:loop values='data:links' var='link'>
<li><a expr:href='data:link.target'><data:link.name/></a></li>
</b:loop>
</ul>
</div>
</div>
</b:includable>
</b:widget>
<b:widget id='HTML30' locked='true' title='Search' type='HTML'>
<b:includable id='main'>
<div id='nav-right'>
<form action='/search' id='searchform' method='get' style='display:inline;'>
<input id='searchbox' maxlength='250' name='q' onblur='if (this.value == &quot;&quot;) {this.value = &quot;cari artikel disini...&quot;;}' onfocus='if (this.value == &quot;cari artikel disini...&quot;) {this.value = &quot;&quot;}' type='text' value='cari artikel disini...'/>
<input id='searchbutton' type='submit' value='GO'/>
</form>
</div>
</b:includable>
</b:widget>
</b:section>
</div>

7.  Kalau sudah, Save Template lalu lihat hasilnya.

Jika anda tidak mau menggunakan kotak pencari tinggal hapus kode yang dicetak tebal. Beres. Untuk menambah link pada menu navigasi. Buka menu Page Element lalu klik Edit pada "Top Tabs". Tambahkan link yang ingin anda tampilkan disana.

Selamat mencoba. Semoga bermanfaat.
Jika Anda menyukai Artikel di blog ini, Silahkan klik disini untuk berlangganan gratis via email, dengan begitu Anda akan mendapat kiriman artikel setiap ada artikel yang terbit di Creating Website

49 comments:

  1. waw, mantapppp....
    makasih, ya gan...



    mampir2 ya gan

    ReplyDelete
  2. gan kok saya pasang di blog saya gk ada tulisan home nya ?

    ReplyDelete
    Replies
    1. coba lihat di Tata Letak cari Widget dengan nama Top Tabs di samping favicon, agan bisa atur deh tu linknya lewat widget tu,,

      Delete
  3. klo buat page navigasi di footer, gmn ya om ?

    ReplyDelete
    Replies
    1. cari jawabannya disini http://dolar-software.blogspot.com

      Delete
  4. ini yang selama ini saya cari, mo coba nih, terima kasih ilmunya salam sukses....!

    ReplyDelete
  5. How can i Create Folder in My Blog

    ReplyDelete
  6. Mau tanya Gan,cara menyisipkan icon/gambar home pada menu horisontal bagaimana?
    Terimakasih and ditunggu replaynya di;
    z.reload03@gmail.com

    ReplyDelete
  7. tutorialnya bagus sob. ijin pasang ya..

    ReplyDelete
  8. Makasih infonya yang mudah dimerngerti. Salam kenal jug mas :)

    ReplyDelete
  9. Tambah ngilmu lagi Gan...
    Tks and Salam Sukses...

    ReplyDelete
  10. makasih infonya, boleh minta solusinya gak, saya gak nemuin kode < div id='header-wrapper' > apalagi rangkaian kodenya
    jonarendra.blogspot.com

    ReplyDelete
  11. kalo pasangnya di atas header bagaimana ya?

    ReplyDelete
  12. kalo itu dibuat widget semua tanpa edit html bisa?

    ReplyDelete
  13. Mas, Saya ga melihat code div id='header-wrapper' di template saya. saya pakai template bawaan blogger (picture window)
    dimana ya bisa dapat itu?

    ReplyDelete
  14. tutorial mas kholis yang gak bisa dimengerti hanya yang ini.bingung abis.

    ReplyDelete
  15. thanxx sob info nya


    http://adixetu.mywapblog.com
    http://adixetu.hexat.com
    http://facebook.com/ariyadhiuchiha
    http://twitter.com/ariyadi_a7x

    email ; aaariyadi@gmail.com
    Y.M. ; aaariyadi

    ReplyDelete
  16. Terima kasih banyak. artikelnyas sangat membantu.

    ReplyDelete
  17. ko di blog saya kalo mau edit teamplate nda ada tanda "Expand Template Widget". nya yah.. mohon pencerahanya .

    ReplyDelete
    Replies
    1. Untuk template blogger 2013 emang ga' pake expand template widget jadi langsung edit aja..

      Delete
  18. Ya, ini yang saya cari akhirnya ketemu juga. Terima kasih kang mas
    akan saya coba, mari jalan jalan ke blog ane kang mas

    ReplyDelete
  19. Permisi boss..... mohon izin pakai template nya........ya... mantaf template nya... bosss........

    ReplyDelete
  20. Gan dah saya coba,tapi kok link menu nya ga mau keluar yah......link "Home dan lainya hilang". Gimana nih gan,pencerahanya

    ReplyDelete
    Replies
    1. Coba agan atur linknya dari widget di Tata Letak..

      Delete
  21. Produk dijamin asli
    TILLA SHOP : Barang yang Kami Tawarkan Semuanya Barang Asli Original Garansi Resmi Distributor dan Garansi TAM .
    Semua Produk Kami Baru dan Msh Tersegel dLm BOX_nya.
    BERMINAT HUB-SMS:0896-9198-6275 ATAU KLIK WEBSET RESMI KAMI
    BlackBerry>Samsung>Nokia>Apple>Acer>Dell>Nikon>DLL

    Dijual

    Ready Stock !
    BlackBerry 9380 Orlando - Black
    Rp.900.000,-

    Ready Stock !
    BlackBerry Curve 8520 Gemini
    Rp.500.000,-

    Ready Stock !
    BlackBerry Bold 9780 Onyx 2
    Rp.800.000,-

    Ready Stock !
    Blackberry Curve 9320
    Rp.700.000,-

    Ready Stock !
    Samsung Galaxy Tab 2 (7.0)
    Rp. 1.000.000

    Ready Stock !
    Samsung Galaxy Nexus I9250 - Titanium Si
    Rp.1.500.000,-

    Ready Stock !
    Samsung Galaxy Note N7000 - Pink
    Rp.1.700.000

    Ready Stock !
    Samsung Galaxy Y S5360 GSM - Pure White
    Rp.500.000,-

    Ready Stock !
    Nokia Lumia 800 - Matt Black
    Rp.1.700.000,-

    Ready Stock !
    Nokia Lumia-710-white
    Rp. 900.000,-

    Ready Stock !
    Nokia C2-06 Touch & Type - Dual GSM
    Rp.450.000,-

    Ready Stock !
    Nokia Lumia 710 - Black
    Rp. 900.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari XL) - Black
    Rp.1.200.000,-

    Ready Stock !
    Apple iPhone 4S 16GB (dari Telkomsel)
    Rp.1.200.000,-

    Ready Stock !
    Apple iPod Touch 4 Gen 8GB
    Rp.700.000

    Ready Stock !
    APPLE iPod Nano 8GB - Pink
    Rp.500.000,-

    Ready Stock !
    Acer Aspire 4752-2332G50Mn Core i3 Win7 Home
    Rp 1.300.000

    Ready Stock !
    Acer Aspire S3-951-2364G34iss
    Rp. 1.200.000,-

    Ready Stock !
    Acer Aspire 5951G Core i7 2630 Win 7
    Rp. 2.500.000,-

    Ready Stock !
    Acer Aspire 4755G Core i5 2430 Win 7 Home Premium Green
    Rp. 2.500.000,-

    Ready Stock !
    Nikon D7000 kit 18-105mm
    Rp.1.700.000

    Ready Stock !
    Nikon D90 Kit 18-105mm Vr
    Rp 1.300.000

    Ready Stock !
    Nikon Coolpix L 120 Red
    Rp. 900.000

    Ready Stock !
    Nikon Coolpix P 500 Black
    Rp 1.000.000

    ReplyDelete
  22. widget muncul akan tetapi tulisan home dll tidak ada gan

    ReplyDelete
  23. Dear Mas Kolis yang baik hati.. terima kasih atas bantuannya selama ini seputar informasi script, widget atau lainnya yg sangat bermanfaat bagi saya yg pemula.di tulisan mas kolis, semuanya jelas dan terperinci memudahkan untuk diaplikasikan. ada satu blog saya yg 75% adalah hasil mondar-mandir mempelajari tutor yg mas berikan, 25% nya adalah dr tetangga dan hasil coba-coba yg saya buat.
    Pepatah tua mengatakan "Orang baik pasti disayang Tuhan" semoga apa yg mas lakukan (tulisan blog)buat orang banyak mendapat rizki dan rahmat dr padaNya, Amin.

    ReplyDelete
  24. Mas, itu biar menu navigasinya bisa fit dengan jumlah label yang dibuat gimana caranya ?

    ReplyDelete
  25. Maksih banyk Mas...
    Saya masih pemula dalam dunia blog....

    ReplyDelete
  26. thanks gan.
    mampir juga di : http://getshared23.blogspot.com/

    ReplyDelete
  27. pagi sobat?
    Http://mahkota-hati.mywapblog.com

    ReplyDelete
  28. waduh panjang banget bang, bingung main di template.. ijin nyimak aja deh. :D

    ReplyDelete
  29. thank gan http://bloganakmadura.blogspot.com

    ReplyDelete
  30. nomor 4 ada, tapi gak persis, Ctrl+F masukin header
    tapi tulisan menunya gak keluar ya mas, apa perlu tambah gadget html/javascript ?

    ReplyDelete
  31. makasih mas, keren menunya di tunggu di http://hargahpq.blogspot.com

    ReplyDelete
  32. mantap gan, terima kasih banyak ya atas ilmunya.. :)

    http://www.jamtanganori.com

    ReplyDelete
  33. toppp bgt, thanks gan
    http://ndra-cyber.blogspot.com/

    ReplyDelete
  34. Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya
















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya















    Sujud syukur saya ucapkan kepada ALLAH SWT dan saya sekeluarga sangat berterimakasih banyak kepada EYANG SEMAR atas bantuannya saya bisa menang togel dan nomor ghoib yang diberikan 4d (6300 ) alhamdulillah BENAR2 berhasil sya menang 79 juta’ karna sekarang ini kehidupan saya jauh lebih baik dari sebelumnya dan semua utang2 saya sudah pada lunas semua, jika anda mau bukti bukan rekayasa silahkan hubungi EYANG SEMAR:(_0_8_5_3_1_6_1_1_0_0_1_2_) ini lah kisah nyata dari saya

    ReplyDelete
  35. thanks gan visist back http://dualcor.blogspot.com/

    ReplyDelete

No comment moderation in this page
Do not put the link in this comment, I'll make it disappear forever
I hate when people play cheat to increase their blog, meanwhile everyone else do it politely and honestly

 
CREATING WEBSITE © 2012 the other blog Mas Template | Look at this Johny Template | Powered by Blogger