Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / Ngoding Yuk / Tutorial Blogger

#Cara Membuat Menu Navigasi Responsif Seperti Masyadi.com !

Oleh IC97 Posting Komentar

Cara Membuat Menu Navigasi Responsif Seperti Masyadi.com !

selamat datang, siapa yang tidak kenal sama mas yadi? rata rata para blogger sudah kenal karena blog ini juga menduduki pencarian teratas seputar blogging. ada banyak orang yang pengen sekali meniru idolanya, seperti misalnya template mas yadi. sebenarnya banyak orang yang ingin dibuatkan template seperti blog mas yadi tapi saya tidak mau.

karena itu tidak di izinkan kecuali ada izinnya, sebenarnya sangat mudah membuat template seperti mas yadi. tapi kali ini saya mau share cara membuat menu navigasi seperti masyadi saja karena banyak permintaan dari teman teman. kalo bisa jangan mirip mirip yah sob kalo gayanya tidak apa apa lah. ubah warnanya atau apa intinya jangan persis
berikut kode dan cara pemasangannya:

Pasang Kode berikut di atas ]]></b:skin> atau di dalam <style>...</style>

/* Menu Gw
==================================================== */
.masmenu{background:#2c8fc9; color:#fff;display:inline-block;width:100%;}
.masmenu ul{width:100%;padding:0;margin:0 auto}
.masmenu li:first-child a{padding:7px 10px 3px}
.masmenu li{list-style:none;display:inline-block;float:left}
.masmenu li a{;color:#fff;display:block;font:bold 13px Arial;position:relative;text-decoration:none;padding:10px}
.masmenu li a:hover{background:#2374a3; color:#fff}
.masmenu li a .sf-sub-indicator{overflow:hidden;position:absolute;text-indent:-9999px}
.masmenu li li a,.masmenu li li a:link,.masmenu li li a:visited{background:#2c8fc9;border-right:none;color:#fff;font:12px Arial;position:relative;text-transform:none;width:138px;padding:10px 10px;text-shadow: none;opacity:0.8}
.masmenu li li a:hover,.masmenu li li a:active{background:#2374a3}
.masmenu li ul{height:auto;left:-9999px;position:absolute;width:160px;z-index:9999;margin:0}
.masmenu li ul a{width:140px}
.masmenu li ul ul{margin:-33px 0 0 157px}
.masmenu li:hover&gt;ul,.masmenu li.sfHover ul{left:auto}
.menusearch{width:300px;float:right;margin:0 auto;padding:5px 10px 0 0}
.searchform {margin-top:0px;display: inline-block;*display: inline;padding:0;background:#fff;width:300px;height:23px; overflow:hidden;border-radius:3px;border:1px solid #5c820d;}
.searchform input {font:italic 12px Arial;color:#222;line-height:23px;height:23px;padding:0;margin:0;}
.searchform .searchfield {background:transparent;padding:0 0 0 6px;margin:0;width: 260px;height:23px;border:0px;outline: none;line-height:23px;}
.searchform .searchbutton{border:none;font-size:12px;height:23px;width:23px;margin:0;padding:0}

Kemudian silahkan taruh html berikut ini dimana saja posisi yang ingin anda terapkan, atau bisa juga taruh di bawah kode <body>

<div class='masmenu'>
<ul class='sf-menu'>
<li><a href='/'><img alt='home' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOKG3Hfk4P4EgrW7M-4knijn_atsHqShocj2eX2fxgcSNBkmWDPmJXbFkaPoo1mlmZuVuG5Oo7H1HrH0q8xtQZfvJOhXLKjCcen0AXZzYtoYMxs3aRrqkgPz8IiVtqt2fqBhVVnrLDXtY/s1600/home.gif' style='padding:0px;'/></a></li>
<li><a href='#'>Curhat</a></li>
<li><a href='#'>Cinta</a></li>
<li><a href='#'>Pengalaman</a></li>
<li><a href='#'>Sehari-hari</a></li>
<li><a href='#'>Umum</a></li>
</ul>
<div class='menusearch'>
<form action='/search' class='searchform' method='get'>
<input class='searchfield' id='q' name='q' onblur='if(this.value==&apos;&apos;)this.value=this.defaultValue;' onfocus='if(this.value==this.defaultValue)this.value=&apos;&apos;' type='text' value='Cari Disini yah....'/>
<input class='searchbutton' src='data:image/gif;base64,R0lGODlhGAAYAPdlAKysrPr6+vn5+WJiYvj4+GNjY01NTW1tbXFxcV9fX1RUVFNTU729vf7+/lFRUff394ODg0NDQ2RkZF5eXmxsbLKysr6+vnNzc9PT03BwcN3d3bu7u8PDw1BQULm5udHR0WZmZl1dXefn50VFRevr6/v7+3JycvT09M7OzpKSktfX12VlZfDw8MrKytjY2MzMzP39/eLi4q2trUtLS0pKSpWVlW5ubn19fdbW1r+/v29vb6qqqri4uFdXV1VVVYKCgpSUlN7e3mdnZ35+fkRERNTU1GBgYFhYWJycnLS0tMjIyIWFhfPz8zw8POrq6tzc3HZ2dtLS0vz8/FxcXKurq09PT7a2ttra2sfHx1JSUnV1debm5q6urlZWVoCAgOnp6YGBgU5OTmtra7q6uv///////wAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAGUALAAAAAAYABgAAAjVAMsIHEiwoMGDCBMqXMiwYcMTT1RY0HDC4UAsKS5MkKAlxYcADitQGCDmAIUDBYRYafgBxIoMXHCokHFBwoAoCwVAmJBhC0EXUBKAYaIwyJQCHAxyGKADhUILR1aQMHgFQQEeChl0GcDCoAYTRjwoLJIlBAaDKBKAUKLwAQIDQwgQJPHDAISuWR10WPLii5MWXhxUASKAYY0OEUKYQJCAyILHAB4wpGJDQZMIPQ5USOJjBgC5CgOIGAMAiQcRAhkoGAHAosENCm64NoghxuzbuHPrLhgQADs=' style='cursor:pointer;vertical-align:top' type='image' value='Go'/>
</form>
</div>
 </div

Nah itulah cara membuat menu navigasi seperti mas yadi, semoga bermanfaat.

Posting Komentar untuk "#Cara Membuat Menu Navigasi Responsif Seperti Masyadi.com !"

>> Beri Komentar Yang Relavan dan Sopan.
>> Tersedia Name/url, Jangan Posting Url Blog Dikomentar.
>> 95% Komentar Disetujui, Jangan Buang Buang Waktu Anda Melakukan Spam.

"Jadilah Blogger Yang Suka Bersilatur Rahmi"