Selasa, 22 Januari 2013

Cara Membuat Menu Horizontal Blog Drop Down Search Engine

Cara Membuat Menu Horizontal Blog Drop Down Search Engine merupakan menu laman blog yang terlengkap yang bisa anda pasang di blog anda. Pada menu ini sudah disediakan beberapa sub-menu yang bisa anda gunakan untuk menghemat ruang atau tempat di blog anda dan selain itu juga sudah terdapat kolom pencarian yang akan membantu pengunjung blog anda mencari artikel yang mereka inginkan. Seperti halnya membuat menu horizontal yang lain, yang telah saya jelaskan dibeberapa artikel, membuat menu horizontal blog drop down dengan serach engine juga sangat mudah dilakukan, seperti penjelasan berikut ini

Cara Membuat Menu Horizontal Blog Drop Down Search Engine

Cara Membuat Menu Horizontal Blog Drop Down Search Engine
  1. Masuk ke akun blogger anda
  2. Pilih dan klik Template >> Edit Html >> Lanjutkan >> centang Expand Template Widget >> tekan Ctrl + F di keyboard
  3. Cari kode ]]></b:skin>
  4. Masukkan kode CSS berikut tepat diatas ]]></b:skin>
    #menudropse{background:#000000 url() repeat-x;width:940px;margin:0 auto;padding:0 auto}
    #menuwrapperdropse{width:940px;height:30px;margin:0 auto}.menusearch{width:300px;float:right;margin:0 auto;padding:0 auto}
    .clearit{clear:both;height:0;line-height:0.0;font-size:0}
    #menubardropse{width:100%}
    #menubardropse,#menubardropse ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
    #menubardropse a{display:block;text-decoration:none;font-size:12px;font-weight:700;text-transform:uppercase;text-shadow: 0px 1px 1px #000;color:#f2f1f1;border-right:1px solid #666;padding:9px 10px 8px}
    #menubardropse a.trigger{background-image:url();background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
    #menubardropse li{float:left;position:static;width:auto}
    #menubardropse li ul,#menubardropse ul li{width:170px}
    #menubardropse ul li a{text-align:left;color:#fff;font-size:12px;font-weight:400;text-transform:none;font-family:Arial;border:none;padding:5px 10px}
    #menubardropse li ul{z-index:100;position:absolute;display:none;background:#222;padding-bottom:5px;-moz-box-shadow:0 2px 2px rgba(0,0,0,0.6);-webkit-box-shadow:0 2px 2px rgba(0,0,0,0.6)}
    #menubardropse li:hover a,#menubardropse a:active,#menubardropse a:focus,#menubardropse li.hvr a{background-color:#222;color:#E98C0A}
    #menubardropse li:hover ul,#menubardropse li.hvr ul{display:block}
    #menubardropse li:hover ul a,#menubardropse li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
    #menubardropse li ul li.hr{border-bottom:1px solid #444;border-top:1px solid #000;display:block;font-size:1px;height:0;line-height:0;margin:4px 0}
    #menubardropse ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}

  5. Cari kode seperti berikut ini
    <div id='header-wrapper'>
    <b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
    <b:widget id='Header1' locked='true' title='Panduan Template Blog(Header)' type='Header'/>
    </b:section>
    </div>
  6. Letakkan kode menu horizontal berikut dengan memperhatikan dua pilihan ini
    Jika anda ingin menampilkan menu horizontal diatas judul blog, letakkan kode menu horizontal dibawah <div id='header-wrapper'>
    Jika anda ingin menampilkan menu horizontal dibawah judul blog, letakkan kode menu horizontal dibawah </b:section>
  7. Kode Menu Horizontal Blog Drop Down Dengan Search Engine
    <div id='menudropse'>
    <div id='menuwrapperdropse'>
    <ul id='menubardropse'>
    <li><a href='#'>Home</a></li>
    <li><a href='#'>Halaman1</a></li>
    <li><a class='trigger' href='#'>Halaman2</a>
    <ul>
    <li><a href='#'>SubHal2</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal2</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal2</a></li>
    </ul>
    </li>
    <li><a href='#'>Halaman3</a></li>
    <li><a class='trigger' href='#'>Halaman4</a>
    <ul>
    <li><a href='#'>SubHal4</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal4</a></li>
    <li class='hr'/>
    <li><a href='#'>SubHal4</a></li>
    </ul>
    </li>
    <li><a href='#'>Halaman5</a></li>
    <li><a class='trigger' href='#'>Uncategories</a>
    <ul>
    <li><a href='#'>Uncategories1</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories2</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories3</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories4</a></li>
    <li class='hr'/>
    <li><a href='#'>Uncategories5</a></li>
    </ul>
    </li>
    </ul>
    <div class='menusearch'>
    <div style='float:right;padding:4px 8px 0 0;'>
    <form action='http://www.google.com/search' method='get' target='_blank'>
    <input name='sitesearch' style='display:none;' value='http://panduantemplateblog.blogspot.com'/>
    <input id='search-box' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;;' style='width:170px;border:none;padding:4px 10px; font:12px Arial;color:#666; background:#FFFFFF;' type='text' value='Cari Artikel...'/><input align='top' id='search-btn' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhpvfQkMDXHZx7qaprq1eioTtSDTUQfWcctcSTDEvYcjaEQhp2Ukved5-aRSO_lGni7jvLrJrRuwVYFYEOKLBgVaaKcNgwWAJFFodM2qrCxLdWwIoOfAvDfzVAd_VHrv6_BOWa4pdeQEChk/' type='image' value='Cari'/>
    </form>
    </div>
    </div>
    <br class='clearit'/>
    </div>
    </div>
  8. Jika semuanya sudah dilakukan, silahkan Pratinjau terlebih dahulu. Jika tidak ada error, Simpan Template anda dan lihat hasilnya.
  9. Tambahan : http://panduantemplateblog.blogspot.com ganti dengan link url blog anda
Sekian, semoga artikel tentang menu horizontal ini lebih mudah diterapkan. Jika ada pertanyaan tentang artikel ini, silahkan tinggalkan komentar di Cara Membuat Menu Horizontal Blog Drop Down Search Engine

Cara Membuat Menu Horizontal Blog Drop Down Search Engine Rating: 4.5 Diposkan Oleh: Ana Sriwahyuni

29 komentar:

  1. msh bingung saya mba...
    tetap aja ga ktemu dgn point no. 5 itu di edit HTML template saya
    bisa pake bahasa awam yg mudah saya mengerti ga mba, please
    soalnya saya telmi dan blm faham yg beginian...
    tolong infonya ya mba, makasih :)

    BalasHapus
  2. @Saiful Anwar kok bisa mas saiful? itu adalah kode wajib yg harus ada di setiap template blogspot, silahkan dicari lagi, pasti ada atau silahkan beritahu alamat blog anda yang tidak bisa ditemukan kode tersebut, akan saya cek

    BalasHapus
  3. @Saiful Anwar template blog Ordinary memang memiliki kode yang berbeda mas Saiful, template tersebut memiliki kode header-outer dan header-inner, silahkan gunakan kode header-inner untuk menerapkan isi artikel ini

    BalasHapus
  4. makasih mba, sedikit2 skarang saya dah faham berkat bantuan mba dan Bang Dadan di blog saya itu...
    lbh jelasnya malah kalo saya pake template luar mba..
    kode2 sperti yg mba sebutkan itu, ada semua disana
    sekali lg, makasih ya mba :)

    BalasHapus
  5. kalau memasukan nama-nama menunya sesuai keinginan kita bagaimana mba...terus agar tulisan2 kita otomatis masuk ke daftar menu tersebut bagaimana caranya...apakah bisa???
    maaf masih awam nih...

    BalasHapus
  6. @ASEP G SUBARNA untuk nama-nama menu dibuat secara manual atau otomatis bisa saja
    sedangkan untuk memasukkan tulisan secara otomatis menggunakan script berdasarkan tabel seperti yang ada di halaman blog ini, Panduan Blog dan Panduan Template

    BalasHapus
  7. Makasih banyak mbak, infonya bermanfaat banget nih :-)

    BalasHapus
  8. @Maulidin Yudiarto sama-sama, makasih atas kunjungan serta komentar anda

    BalasHapus
  9. Mbak, masih bingung soal cara agar tulisan kita masuk dalam daftar menu tersebut, gimana caranya mbak?
    Mohon bantuannya.
    Thanks before.

    BalasHapus
  10. @Maulidin Yudiarto dipasang secara manual mas ke dalam template

    BalasHapus
  11. Iyaa mbak, sudah bisa... Thanks a lot. ;-)

    BalasHapus
  12. njecknyoba.blogspot.com SAYA BARU BELAJAR MA KADANG RUBAH RUBAH TEMPALTE ,MINTA PANDUANNYA

    BalasHapus
  13. @Azwethinkweiz untuk panduan template silahkan dibuka pada halaman Panduan Template

    BalasHapus
  14. kalau duble menu (sederhana+ search engine) suppot nggak...?

    BalasHapus
  15. tengkyuw mbak membantu sekali, tapi saya maih bingung judul blog/header saya koq jadi dibawah menu ya!!!padahal saya sudah paktikan sesuai dengan petunjuk mbak!!!!gimana caranya agar judul blog saya di atas lagi!!!!mohon jawabannya!!!maaf msh pemula!!!

    BalasHapus
  16. bagus bnget ne.. udah saya terapkan di blog..
    thanks ya..

    www.andro-black.blogspot.com

    BalasHapus
  17. @ZAEN CHAN support banget mbak, asal sudah mengetahui cara pemasangannya :)

    BalasHapus
  18. Trimkasih... sangat membantu bagi pemula seperti saya

    BalasHapus
  19. mbak, untuk membuat menu nya agar berada ditengah bagaimana ya?.terimakasih sebelumnya..

    BalasHapus
  20. Assalamu'alaikum mba....hmmm... msh bingung, udah dicoba tapi koq yang muncul dipratinjau blog, kode CSSnya diatas judul blog

    BalasHapus
  21. mantap gan,berhasil di buat.
    jangan lupua follow blog ane
    mnutz.blogspot.com

    BalasHapus
  22. lalu bgaimana cara bwt trigger yang horizontal kekanan setelah trigger slide ke bawah ??

    BalasHapus
    Balasan
    1. untuk saat ini saya belum membuatnya mas Juanda, nanti akan saya publis juga, makasih ya atas masukkannya

      Hapus
    2. makasih bnyk mba tutorialnya......

      Hapus

Demi kenyamanan bersama, tidak boleh memasang link dalam bentuk apapun, komentar yang berisi link tidak akan diterbitkan
Terimakasih

Direktori

direktori weblogger
Direktori WeBlog Indonesia