Menu Navigasi Responsif Ala Masyadi




Menu Navigasi Responsif Ala Masyadi

 Menu Navigasi Responsif Ala Masyadi
Pada kesempatan malam ini saya akan share cara membuat Menu Navigasi Responsif Ala Masyadi, jika anda sudah lama bergelut di dunia blogger tentu sudah kenal pastinya sama master kita mas yadi. rata rata para blogger sudah kenal pasti karena blog masyadi tersebut telah menduduki pencarian teratas yang membahas seputar blogging. 

Dan tidak sedikit juga banyak orang yang ingin meniru style masyadi, contohnya yaitu katakan lah seperti template mas yadi dan gaya lainnya. kalau anda ingin juga mempunyai template seperti masyadi bisa anda mintak langsung saja pada beliau, hehe..

Atau anda ingin template masyadi namun tidak sama bisa anda lihat Template Responsive Ahmad Suyadi Blogger Download Free

Jika  anda ingin melihat template masyadi dengan jelas, maka bisa anda klik saja disni


Nah untuk lebih mempersingkat waktu kita, saya tidak ingin menjelaskan panjang lebar lagi, yuk anda bisa ikuti langkah- langkah di bawah ini, cara nya pun cukup mudah sekali.


Berikut di bawah ini kode dan cara pemasangannya:

# Menu Navigasi Responsif Ala Masyadi

  1. Pertama , pastikan anda sudah masuk di dasbhor anda sendiri
  2. Kemudian masuk pada bagian editor template , caranya pilih Menu Template -> Edit HTML.
  3. Temukan kode ]]></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}
  4. Selanjutnya  anda copy code di bawah ini, dan bisa anda letakan di bawah atau di atas </header> atau di mana yang ingin anda pasang.
    <div class='masmenu'>
    <ul class='sf-menu'>
    <li><a href='/'><img alt='home' src='http://1.bp.blogspot.com/-wqzYVSTa638/UQrc7C0UP3I/AAAAAAAABgU/TgbAOmzXLAs/s1600/home.gif' style='padding:0px;'/></a></li>
    <li><a href='http://www.mizipedia.com/'>blogger tutorial</a></li>
    <li><a href='http://www.mizipedia.com/'>tips</a></li>
    <li><a href='http://www.mizipedia.com/'>domain</a></li>
    <li><a href='http://www.mizipedia.com/'>tekno</a></li>
    <li><a href='http://www.mizipedia.com/'>grup</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>
  5. Ganti URl http://www.mizipedia.com/ dengan alamat URL anda
  6. Jika sudah anda edit, langsung saja anda klik save template.
Nah jika anda merasa kesulitan anda bisa bisa klik tombol komentar di bawah ini, demikian penjelasan yang sangat singat saya pada malam ini, semoga bermanfaat untuk anda dan selamat mencoba ya.

Share Google URL Shortener: Get Short URLloading short url

Bila Anda merasa memang artikel-artikel di blog ini bisa bermanfaat, maka Anda bisa membantu memberikan donasi melalui Paypal Dana hasil dari donasi akan digunakan untuk memperpanjang domain mizipedia.com - Terima kasih.



Comment Policy Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.

Blogger
Disqus
Pilih Sistem Komentar Yang Anda Sukai

No comments

Peraturan Berkomentar di mizipediacom
1. Berkomentarlah dengan Relevan dan Sopan
2. Jangan Spam
3. Tidak Porn dan Sara
4. Berkomentar dengan link tanpa relevan maka akan otomatis terhapus
5. Semua komentar pasti akan saya baca dan dibalas. Show Emoticon. Klik ==>


Join on this site

with Google Friend Connect