Cara membuat navigasi menu responsif (mobile friendly) di blog blogspot
Menu responsive bagian dari trend desain template blog terpopuler.
Daftar menu blog yang biasanya ada di bawah header ini sangat user friendly dan disukai Google. Mesin pencari terpopuler di dunia ini "selalu" berpihak pada user atau pembaca.
Kode-kode tentang cara membuat menu responsif ini diambil dari My Blogger Tricks yang sudah diterapkan di template Johny Wuss Responsive dan New Max Mag.
Cara Membuat Menu Responsive: Tahapan
- Template > Edit HTML
- Cari kode seperti di bawah ini, di bawah kode <head>, di bagian atas template:
- Ganti dengan kode di bawah ini. Jika kodenya sudah seperti di bawah ini, ya... gak usah diganti, biarkan saja:
- Copas kode di bawah ini tepat di bawah kode <body> Ubah kode pagar (#) dengan link menu dan nama-nama menunya dengan "kepunyaan" Anda!
- Save Template and you are all done!!!
<b:if cond='data:blog.isMobile'> <meta content='width=device-width, initial-scale=1.0, user-scalable=0' name='viewport'/> <b:else/> <meta content='width=1100' name='viewport'/> </b:if>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/> <meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
4. Copy & Paste kode di bawah ini tepat di atas kode ]]</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} } Customization:
Untuk mengganti warna background menu, ubah kode warna ini: #50B7DC
Ganti warna background "hover", ubah: #5FC6EB
Lihat Daftar Kode Warna HTML
<nav id='menu'>
<input type='checkbox'/>
<label>≡<span>Navigasi Menu</span></label>
<ul>
<li><a href='/'>Home</a></li>
<li><a href='#'>About</a></li>
<li><a href='#'>Drop Down <font
size='1'>▼</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'>▼</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>
Selamat, navigasi menu responsive di blog Anda sudah muncul!.
NB: CNAME yang diberi kotak merah tersebut akan digunakan untuk setting di Domain Manager/ Clientzone.
Setelah selesai silahkan anda kembali ke blogger tadi pada tampilan berikut. Silahkan coba klik “Simpan“. Bila masih tidak bisa, mungkin itu masih dalam propagasi. Propagasi antara 1-24 jam.
