Cara Membuat Menu Horizontal drop down

Posted by Unknown Sabtu, 18 Mei 2013 0 komentar

Teman -teman kita bisa bertemu kembali di sini saya akan berbagi tentang cara membuat menu horozontal dropdown yang pada postingan sebelunya kita membahas tentang cara memasang tanda tangan di blog
Tapi yang kali ini berbda ,sekarang saya akan berbagi-bagi tentang membuat menu horizontal dropdown
langsung saja ya..............................................................

LANGKAH-LANGKAHNYA:
1. Login ke blog anda
2. Klik template ---> Edit HTML

3. Cari kode ]]></b:skin> lebih cepat pakai CTRL+ F

4. Copy pastekan kode di bawah ini dan letakkan di atas kode ]]></b:skin>

/* Menu Horizontal Dropdown
----------------------------------------------- */
#menuwrapperpic{background:#333;width:980px;margin:0 auto;padding:0 auto}
#menuwrapper{width:980px;height:27px;margin: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;color:#CECECF;border-right:1px solid #191919;padding:8px 10px 8px}
#menubar a.trigger{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmpq37h1wTERI9iLGSTQhzo6Z4knEiv6VlaJdyUuB7GMr5455VmPEAhLeGggVd5T8FuODlkPGlu7SXP5lT_THLH3ekdg5VSmFvTJGdbTyg_hoSL-e8m04ZfL1eYbfshy9QV5QKU_KXbX0/s1600/arrow_white.gif);background-repeat:no-repeat;background-position:right center;padding:8px 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:#fff}
#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}

5. Cari kode seperti di bawah ini

<b:section class='header' id='header' maxwidgets='1' showaddelement='no'>
<b:widget id='Header1' locked='true' title='MaxSide Blog (Header)' type='Header'>

6. Letakkan kode berikut di atasnya

<div id='menuwrapperpic'>
<div id='menuwrapper'>
<ul id='menubar'>
<li><a href='/'><img border='0' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjKA8FAApxNB2yCHB4nCm7Hcs5AM29qBeD4KmL8gCLM_5fgPowOX0f0CjZPfM-GfkVFsbLUoTsoasoSDGhAXRBwlQdbw5OeAnSN2iXmHQKrLnoS6rEM1CDiZ8EhrRnFZYIa4GadO1jc2Ws/s1600/home_white.png' style='padding:0px;'/></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='h#'>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>
<br class='clearit'/>
</div>
<div style='clear:both;'/>
</div>

7. Simpan template nya ............. lihat hasilnya

sekian dari saya semoga berhasil :D

TERIMA KASIH ATAS KUNJUNGAN SAUDARA

Judul: Cara Membuat Menu Horizontal drop down
Ditulis oleh Unknown
Rating Blog 10 dari 9990 suara

Semoga artikel ini bermanfaat bagi saudara. Jika ingin mengutip, baik itu sebagian atau keseluruhan dari isi artikel ini harap menyertakan link dofollow ke http://mustofaagustriutomo.blogspot.com/2013/05/cara-membuat-menu-horizontal-drop-down.html. Terima kasih sudah singgah membaca artikel ini.