Tutorial Blog Mas Andes Official - Tips Blogging | Trik Blogger | Tutorial Blogger | Widget Blogger | Blog Design | Taktik SEO (Search Engine Optimization)

Membuat Menu Navigasi With Form Search di Blog

Menu Navigasi With Form Search Blogger Membuat Menu Navigasi With Form Search di Blog – untuk sebagian blogger yang sudah menggunakan template dari situs penyedia template biasanya sudah dilengkapi navigasi menu dengan kotak pencariannya. Namun bagaimana jika yang masih menggunakan menu navigasi masih standar dan ingin di buat sejajar dengan kotak pencarian atau search form, ini dia yang akan saya pada tutorial ini. Untuk membuat navigasi menu horisontal supaya sejajar dengan form search atau kotak pencarian tidaklah terlalu sulit. Form search dapat kita custom sedemikian rupa agar tidak perlu lagi menambahkan default widget kotak pencarian blogger yang masih sederhana. Tampilan atau warna menu nevigasi ini seperti yang terlihat pada gambar di atas, sedangkan efeknya sama seperti pada navigasi yang saya gunakan pada blog ini. Untuk lebih detailnya berikut tutorial untuk Membuat Menu Navigasi With Form Search di Blog.

1. Login ke blogger.
2. Masuk ke Edit HTML template.
3. Copy kode berikut ini lalu taruh di atas kode ]]></b:skin>
#panelnav { background: darkgreen; width: 100%; position: relative; height:37px; margin: auto; z-index:999; }
#navmenu,#navmenu ul { list-style:none; margin:0; padding:0; }
#navmenu { position:relative; width:auto; background-color:darkgreen; }
#navmenu ul { height:0; left:0; overflow:hidden; position:absolute; top:37px; }
#navmenu li { float:left; position:relative; }
#navmenu li a { background-color:darkgreen; border-right:1px solid green; color:#fff; display:block; font:bold 14px Arial; line-height:27px; padding:5px 20px; text-decoration:none; transition:0.5s; }
#navmenu li:hover > a { background:#222; }
#navmenu li:hover ul.submenu { height:auto; width:200px; }
#navmenu ul li { opacity:0; transition:0.5s; width:100%; }
#navmenu li ul li { transition-delay:0s; }
#navmenu li:hover ul li { opacity:1; transition-delay:0.5s; }
#navmenu ul li a { background:#222; border-top:1px solid #333; border-bottom:1px solid #111; color:#fff; line-height:1px; transition:1.5s; }
#navmenu li:hover ul li a { line-height:25px; }
#navmenu ul li a:hover { background:darkgreen; }
#searchform    {float:right; height: 30px; margin:3px}
#searchform input.field {background-position:right; background-repeat:no-repeat; width: 200px; padding:7px; outline: none; font: 13px Georgia; font-style: italic; border: none; z-index: 1; height:16px; float:left; padding-right:30px;}
#searchform input.field {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png);
background-color:#222; color: #fff;}
#searchform input.field:focus {background-image:url(https://lh4.googleusercontent.com/-kWepQUL6ypo/T_bcpvbb5nI/AAAAAAAACFo/OhezBRoj15E/s30/search_icon.png);
background-color:#333; background-position:right; background-repeat:no-repeat;}
#searchform input.submit {background-color:#52e052; color:#000; width:70px; height:30px; float:left; border:none; font: 13px Arial; font-weight:bold; cursor:pointer; margin:0 0 0 1px;}
4. Copy kode berikut ini lalu paste kedalam Widget HTML/Javascript.
<div id='panelnav'>
    <ul id='navmenu'>
        <li><a expr:href='data:blog.homepageUrl'>Home</a></li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 1</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 6</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 7</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 2</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 4</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 5</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 3</a>
            <ul class='submenu'>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 1</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 2</a></li>
                <li><a href='http://mas-andes.blogspot.com'>Sub Menu 3</a></li>
            </ul>
        </li>
        <li><a href='http://mas-andes.blogspot.com'>Menu 4</a></li>
    </ul>
 <form action='/search' id='searchform' method='get'>
 <div><input class='field' id='s' name='q' onblur='if (this.value == &apos;&apos;) {this.value = &apos;Enter keywords..&apos;;}' onfocus='if (this.value == &apos;Enter keywords..&apos;) {this.value = &apos;&apos;;}' type='text' value='Enter keywords..'/>
 <input class='submit' name='submit' type='submit' value='Search'/></div>
 </form>
</div>
Keterangan:
Ganti http://mas-andes.blogspot.com dengan label link blog anda.

5. Langkah terakhir Simpan dan lihat hasilnya.

Demikian tutorial cara Membuat Menu Navigasi With Form Search di Blog, apabila masih terdapat kekurangan silahkan bisa di custom kembali agar lebih menarik dan seperti selera yang di inginkan entah itu warna atau yang lainnya.

Berlangganan artikel via email

49 Response to "Membuat Menu Navigasi With Form Search di Blog"

avatar
Anonymous

Pertamax dulu deh...

Berarti menu navigasinya berjejer dengan menu search yah mas, bagus juga mas, makasih buat tutorialnya, keren banget :)

Balas

Wah keren nih mas, tak save dulu

Balas

Wah blog saya nggak berfungsi mas kalau dipasang form search / kotak pencarian, soalnya blog saya sudah tak pasang script anti copas hehehe :)

Tapi sebenarnya menarik juga kalau menu navigasi situs di sejajarkan dengan kotak penelusuran ya mas. Jadi blog nya terlihat elegance (kata mas budi-red) hehe :)

Balas

keren banget mas, menambah kesan blognya profesional dan niat banget bikin blongnay,
pengunjung akan betah deh jadinya.

Balas

wuiiiih, boleh juga nih menunya. ada kepikiran buat ganti yg ada di blogku../.
:)

Balas

wih keren mas.. tapi saya nyimak saja deh.. soalnya saya belum bisa buka html, via hp nggak bisa soalnya mas.. hehehhe

Balas

hello mas andes apa kabar ?>? lama tak jumpa qta ..
msih hobby otak atik yang beginian yah ternyata . hihihi :P

Balas

keren mas menu navigasi nya, punya saya malah saya hilangkan from search nya, soalnya kalau di uji responsif bertumpuk menunya

Balas

Nginep di rumah mas Andes..ya mas
Dapet pertamax hehe.. :)

Balas

Belum di pasang aja udah keliat elegance tuh blognya mbak Rin...apalagi kalo di pasang....wah nambah anggun dan menawan deh...hehe

Bisa aja nih mbak Rin...jd malu sy... :)

Balas

Caranya sederhana dan jd lebih mudah...ya mas lewat tutor dari mas Andes....
Jd keliat tersusun rapih spacenya... :)

Balas

Blog nya mas budi juga sudah elegance. Apalagi kalau ditambah menu navigasi buatan mas andes. Pasti blog nya jadi elegancer ya mas hehe :)

Balas

boleh juga nih tutornya bero

- AHS - http://ah-shared.blogspot.com

Balas
avatar
Anonymous

keren sob, lanjutkan. ^^

Balas

iya mas Bud tadi sekalian ronda jadi dapet petromak :)

Balas

ehem... saya nggak ikut-ikut deh :)

Balas

spacenya jadi elegance yah mas :)

Balas

seratus buat mas anthonie :)

Balas

Nggak apa-apa Mas Intan, Mas Andes itu orang nya baik hati, tidak sombong, dan juga rajin menabung. Iya kan Mas Anthonie? :)

Kalau menurut Mas Budi gimana? masih elegance ya mas? hehe :D

Balas
avatar
Anonymous

Keren Bangettt Gan Tutorialnya :)
Pertamaxx dahhh :D

Balas

huwaaa udah rame kak andes :p
saya mlipir aja wes.. permisi :| .

Balas
avatar
Anonymous

ikut nebeng nebeng ... ('_')9

Balas

Izin CTRL+D dulu mas adres :)

Balas

Saya prakteknya nanti saja mas. Kemarin utak atik daleman malah error. Hehe

Balas
avatar
Anonymous

Kabar baik tentunya mbak.. Hehe

Balas

aku tidak memakai Form Search karena jika dilihat dengan hape blognya tampak berantakan . menu searchnya tidak mau berurutan dengan menu yang lainnya.

Balas

Wah hebat nih dapet petromax

Balas

mantep sob.. jgn lupa kunjungan balik :)

Balas

Hehe....ronda kok malah bawa laptop sih mas...bukannya bawa kentongan.. :)

Balas

@mas Anthonie : nanti nyesel loh mas..kalo ndak ikutan hehe

@Mas Joker: penilaian yg masuk akal tuh mas...sy suka tuh :)
Btw..ukuran no sepatunya berapa mas :)
@Mbak Ririn : selain udah yg di sebutin sama mbak Rin...mas Andes juga selalu rajin mengaji.... :)

Balas

apalagi kalau pengunjungnya dikasih minuman gratis ya mas :)

Balas

masa sih mang yono jadi patah semangat gitu :D

Balas

sekarang kan udah canggih mas, kentongannya didalem leptop tinggal enter langsung bunyi kentongannya :)

Balas

gurunya siapa dulu donk, iya kan mas Budi :)

Balas

mas Andes juga suka rajin bagi-bagi rejeki hehe, iya kan mas Andes :)

Balas

Pasti pakai kode CSS ya mas untuk membunyikan kentongan hehe :)

Balas

Kata Mas Andes, iya mas anthonie hehe :)
Maka nya Mas Andes orang nya awet muda, soalnya rejeh hehe :)

Balas

Hayo mau ngapain hayo pakai CTR + D hehe :)

Balas

Daleman yang mana Mang yang di utak atik hehe :D

Balas

hahaha kentongan {display:none;}

Balas

Mantap aje gile, nih Mas Andes Kentongan aja
Pada Script CSS juga yah? Master Script apa aja bisa yah?

Balas

Rada kesrimped duh comments diatas
Maksud nya mah, Kentongan aja pakai script CSS kali hhhhh

Balas

makasih gan, work

Balas

Mas Andes, saya pekek menunya.

Balas

ijin mas, untuk pake kode navigasi nya

Balas

tks gan izin pakai dan share :)

Balas
  • Berkomentarlah dengan sopan dan bijak sesuai dengan isi konten.
  • Komentar yang tidak diperlukan oleh pembaca lain [spam] akan segera dihapus.
  • Apabila artikel yang berjudul "Membuat Menu Navigasi With Form Search di Blog" ini bermanfaat, share ke jejaring sosial.
Konversi Kode