Posted by : Boma Rinaldy Sangaji Tuesday, August 7, 2012

Tutorial Membuat Menu Horizontal Dropdown + Search engine - Hallo para Sobat Blogger. Kali ini saya akan share tentang cara membuat Menu Horizontal Dropdown pada blog. dan kelebihan pada menu dropdown ini adalah terdapat search engine di samping menu yg memudah kan para pengunjung mencari informasi di blog anda

Contoh :


Berikut Tutorialnya :

1.) Seperti biasa, pertama-tama kita harus login ke account Blogger terlebih dahulu
2.) Masuk ke Dashboard, Template
3.) Pilih Edit HTML, lalu ceklis "Expand Template Widget"
4.) Cari kode ]]></b:skin> (tekan ctrl+f untuk mempermudah pencarian)
5.) bila sudah, letakkan kode dibawah ini tepat diatas kode ]]></b:skin>
/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:url(http://3.bp.blogspot.com/-au85vE8p-AM/TeCY5Hd27JI/AAAAAAAAAwQ/fJXm0qysq1Q/s1600/nav.png) repeat-x;width:960px;margin:0 auto;padding:0 auto}
#menuwrapper{width:960px;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}
#menubar{width:100%}
#menubar,#menubar ul{list-style:none;font-family:Arial, serif;margin:0;padding:0}
#menubar 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}
#menubar a.trigger{background-image:url(http://3.bp.blogspot.com/-LzmPTNyR6po/TwETZufjSTI/AAAAAAAAATo/oisHmXUjmSY/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:9px 24px 8px 10px}
#menubar li{float:left;position:static;width:auto}
#menubar li ul,#menubar ul li{width:170px}
#menubar 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}
#menubar 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)}
#menubar li:hover a,#menubar a:active,#menubar a:focus,#menubar li.hvr a{background-color:#222;color:#E98C0A}
#menubar li:hover ul,#menubar li.hvr ul{display:block}
#menubar li:hover ul a,#menubar li.hvr ul a{color:#edfdfd;background-color:transparent;text-decoration:none}
#menubar 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}
#menubar ul a:hover{background-color:#555!important;color:#fff!important;text-decoration:none}
6. Cari kode </head>, kode tersebut biasanya terdapat dua, kamu cari kode yang kedua
7. bila sudah ketemu, letakkan kode berikut tepat dibawah kode </head> 
 <div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='#'>Home</a></li>
<li><a href='#'>About Us</a></li>
<li><a class='trigger' href='#'>Contact Us</a>
<ul>
<li><a href='#'>Goggle +</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Facebook</a></li>
<li class='hr'/>
<li><a href='#'>Contact on Twitter</a></li>
</ul>
</li>
<li><a href='#'>Sport</a></li>
<li><a href='#'>Culture</a></li>
<li><a class='trigger' href='#'>Entertainment</a>
<ul>
<li><a href='#'>Music</a></li>
<li class='hr'/>
<li><a href='#'>Movie</a></li>
<li class='hr'/>
<li><a href='#'>Television</a></li>
</ul>
</li>
<li><a href='#'>Health</a></li>
<li><a class='trigger' href='#'>More</a>
<ul>
<li><a href='#'>Themes</a></li>
<li class='hr'/>
<li><a href='#'>Tutorial</a></li>
<li class='hr'/>
<li><a href='#'>Resource</a></li>
<li class='hr'/>
<li><a href='#'>Advertise</a></li>
<li class='hr'/>
<li><a href='#'>Javascript</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://boma-internet.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:url(http://1.bp.blogspot.com/-kmhya2YU7jE/Tv9JVye66xI/AAAAAAAAAP8/S0ZeuQ910Ow/s1600/field-bg.gif) no-repeat;' type='text' value='Search on this site...'/><input align='top' id='search-btn' src='http://4.bp.blogspot.com/-b9FTjjXAbp4/TwEo-YIwe-I/AAAAAAAAAU4/Du-VmpE9hPE/s1600/bg_search.gif' type='image' value='Search'/>
</form>
</div>
</div>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div> 
Keterangan : Yang warna merah adalah link yang akan dituju
Yang warna biru adalah judul dari Menu dropdownnya
Yang warna ungu, ganti dengan url blog kamu

8.) Sebelum menyimpan template, sebaiknya klik pratinjau/preview terlebih dahulu, supaya bisa melihat apakah widgetnya sudah benar atau tidak
9.) bila sudah, klik Simpan template.

Semoga bermanfaat :D

{ 11 komentar... read them below or Comment }

  1. mas/mbak....kalau bisa tolong buat artikel tentang cara pembuatan kode kode diatas..terima kasih........tolong beritahu saya kode yang paling atas itu dinamakan apa lalu kode yang kedua yang dimasukkan ke java scrip html itu namanya apa?.......mohon infoormasinya terima kasih

    ReplyDelete
  2. @mokosetau saya isi kode yang ini /* Menu Horizontal Dropdown
    ----------------------------------------------- */
    itu disebut CSS. tapi saya jg belum terlalu paham tentang Edit² blog.

    ReplyDelete
  3. cara mengurangi menu nya itu bagaimana y ???

    ReplyDelete
  4. kak cara membuat pilihan di samping home gimana?
    kok bisa ada?...

    home|daftar isi|download games|
    soalnya susah banget
    thanks ya

    ReplyDelete
  5. kok gk bisa ya mas? yang jadi kendalanya itu dibagian paling bawah di edit html yang tulisannya html gitu... katanya gk bisa.. gimana ya ini? headernya kata mas ada 2 diblog aku kok cuma ada 1 aja ya? tolong aku dong mas

    ReplyDelete
  6. nah sekarang bisa tapi kok gk berbentuk link bar ya mas? tapi malah ambul radul.. gimana caranya?

    ReplyDelete
  7. anda ingin melihat blog saya? ini saya beri link nya (saya jujur tidak ada maksud untuk mengiklankan blog saya) www.katolisitas-indonesia.blogspot.com

    ReplyDelete
  8. dan letaknya malah diatas header blog saya dan bukannya ada dibawah.. Saya sungguh akan berterima kasih banyak apabila anda berkenan untuk membantu saya.

    ReplyDelete

Admin Blog jarang memantau Blog di karenakan tugas di sekolah,Mohon maaf jika komentar belum di balas hingga saat ini Jadi mohon maaf atas ketidak nyamanan ini.
Silahkan komentar di bawah ini , Bila ada Komplain dan lain lain.
Dilarang berkomentar berbau SPAM, SARA, PORN, JUNK.

Gunakan Fasilitas Reply untuk menjawab pertanyaan

Spam adalah : dimana Seorang Blogger memasukan Link yg aktif di Kotak komentar
Komentar Tidak Selalu Langsung Saya Balas, Karena Saya Sibuk Dengan Sekolah, Saya Akan Balas Paling Lama 3 Hari, Kecuali Sedang Online. Terimakasih Atas Pengertiannya

Apabila Ada Kata-Kata Atau Tulisan Yang Salah Serta Komentar Yang Tidak Dibalas, Saya Mohon Maaf
Terima kasih sebelumnya [Boma-internet]

- Copyright © 2013 [Boma-interNet] - Hatsune Miku - Powered by Blogger - Designed by Johanes Djogan -