Cara Membuat Navigasi Menu Menjadi Mobile Friendly

adscblog

Menu Navigasi merupakan Salah satu navigasi yang sangat di perlu kan untuk menyimpan link ke halaman lain seperti About,Kontak,Privacy Policy,Sitemap dan lain sebagai nya,selain itu juga menu Navigasi ini dapat menautkan sebuah link yang menuju ke label tertentu sehingga memudah kan para pengunjung untuk menelusuri artikel lain nya,

Banyak Pareasi Menu Navigasi yang di buat oleh Para Blogger baik itu dengan berbagai warna ataupun style lain nya,sehingga kita akan merasa kebingungan untuk menggunakan Menu Navigasi mana yang harus di tempatkan di blog kita

Selain itu juga,menu Navigasi tidak hanya harus di halam Web saja ketika kita melihat Blog dengan menggunakan Komputer,maka tampilan blog tersebut terlihat indah sehingga para pengunjung blog akan betah untuk diam di blog kita dengan mencari berbagai artikel yang di butuh kan nya

Namun Menu Navigasi tersebut terlihat indah ketkika di buka oleh Komputer,namun belum tentu blog tersebut akan Indah ketika di lihat oleh Hp/Mobile,biasa nya salah satu blog ketika di buka oleh perangkan Mobile Menu Navigasi nya akan terlihat acak acak kan tidak beraturan,karena Menu Navigasi tersebut belum di setting atau di edit menjadi Menu Navigasi yang Mobile Friendly

Bagi blogger Newbe mungkin akan merasa kebingungan Bagaimana agar Menu Navigasi blog anda menjadi Mobile Friendly,tanpa harus berputus asa,sebenar nya jika anda rajin mencari cara untuk membuat blog anda menjadi keren khusus nya Menu Navigasi ini tentu nya pasti akan menemukan jalan keluar nya

Karena kini sudah banyak blogger indonesia yang membuat Tutorial tentang baik itu pembuatan template atau yang lain nya khusus nya membuat Menu Navigasi menjadi Mobile Friendly,bahkan menu Navigasi ini banyak style yang di gunakan nya,mungkin andapun akan sangat kebingungan untuk memilih nya

Tutorial Pemasangan Menu Navigasi Menjadi Mobile Friendly

Namun kali ini saya akan berbagi Cara membuat Menu Navigasi menjadi Mobile Freindly,karena ini adalah salah satu syarat dari google agar menu navigasi atau template anda menjadi Mobile Friendly,jadi jika anda mencari cara untuk membuat Menu Navigasi menjadi Mobile Friendly silahkan untuk mengikuti langkah-langkah penerapan nya di bawah ini

Silahkan Sobat Blogger untuk masuk ke akun blogger
Setelah itu silahkan anda klik Template
Kemudian klik Edit Html
Setelah berada di dalam peng ediitan Html silahkan sobat letakan Css Berikut di atas atau sebelum </b:skin>

 /*-----Responsive Menu ----*/ body {margin: 0px;} #menu{background: #50B7DC;color: #FFF;height: 40px;border-bottom: 2px solid #DDD;box-shadow: 1px 2px 9px #B1B1B1;border-top: 2px solid #DDD;} #menu ul,#menu li{margin:0 auto;padding:0 0;list-style:none} #menu ul{height:45px;width:1024px} #menu li{float:left;display:inline;position:relative;font:bold 0.9em Arial;text-shadow: 1px 2px 4px #838383;} #menu a{display: block;line-height: 40px;padding: 0 14px;text-decoration: none;color: #FFF;} #menu li a:hover{color: #E4E4E4;-webkit-transition: all .1s ease-in-out;-moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out;transition: all .1s ease-in-out; background: #5FC6EB;} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:30px;opacity:0;cursor:pointer} #menu label{font:bold 30px Arial;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:16px;position:absolute;left:35px} #menu ul.menus{height: auto;overflow: hidden;width: 170px;background: #50B7DC;position: absolute;z-index: 99;display: none;} #menu ul.menus li{display: block;width: 100%;font:normal 0.8em Arial;text-transform: none; text-shadow: none;border-bottom: 1px dashed #31AFDB;} #menu ul.menus a{color: #FFF;line-height: 35px;} #menu li:hover ul.menus{display:block} #menu ul.menus a:hover{background: #5FC6EB;color: #FFF;-webkit-transition: all .1s ease-in-out; -moz-transition: all .1s ease-in-out;-ms-transition: all .1s ease-in-out;-o-transition: all .1s ease-in-out; transition: all .1s ease-in-out;} @media screen and (max-width: 800px){ #menu{position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto; font:normal 0.8em Arial;} #menu input,#menu label{position:absolute;top:0;left:0;display:block} #menu input{z-index:4} #menu input:checked + label{color:white} #menu input:checked ~ ul{display:block} }

Setelah anda meletakan kode Css nya,langkah selanjutnya silahkan anda letakan kode berikut di bawah Header blog atau tergantung selera anda cara meletakan nya

<nav id='menu'>
<input type='checkbox'/>
<label>&#8801;<span>Navigasi&#160;Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font
size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
<li><a href='#'>Tab 4</a></li>
<li><a href='#'>Tab 5</a></li>
<li><a href='#'>Tab 6</a></li>
</ul>
</li>
<li><a href='#'>Contact</a></li>
<li><a href='#'>Drop Down <font
size='1'>&#9660;</font></a>
<ul class='menus'>
<li><a href='#'>Tab 1</a></li>
<li><a href='#'>Tab 2</a></li>
<li><a href='#'>Tab 3</a></li>
</ul>
</li>
<li><a href='#'>Advertise</a></li>
</ul>
</nav>

Kemudian Save template nya

Dan untuk hasil nya bisa anda lihat pada blog ini bagian atas
Nah itulah cara pembuatan/Penerapan Menu Navigasi menjadi Mobile Friendly,Semoga artikel nya bisa membantu untuk blogger semua,selamat mencoba dan semoga bermanfaat.

adscblog

ads1