Cara Membuat Navigasi Menu Responsive di Blog
January 13, 2015
Cara membuat navigasi menu responsif (mobile friendly) di blog blogspot.
NAVIGASI menu responsive adalah navigasi link halaman (page link) atau daftar tautan blog yang tampilannya menyesuaikan (adaptif/responsif) dengan device atau gadget yang digunakan user.
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 berhasil diterapkan di CB Magazine.
2. Cari kode seperti di bawah ini, di bawah kode <head>, di bagian atas template:
3. Ganti dengan kode di bawah ini. Jika kodenya sudah seperti di bawah ini, ya... gak usah diganti, biarkan saja:
4. Copy & Paste kode di bawah ini tepat di atas kode ]]</b:skin>
Customization:
Ubah kode pagar (#) dengan link menu dan nama-nama menunya dengan "kepunyaan" Anda!
8. Save Template and you are all done!!!
Selamat, navigasi menu responsive di blog Anda sudah muncul!
Anda bisa mencoba desain tampilan navigasi menu responsive lainnya.
Demikian Cara Membuat Navigasi Menu Responsive di Blog. Good Luck & Happy Blogging! (www.contohblog.com).*
NAVIGASI menu responsive adalah navigasi link halaman (page link) atau daftar tautan blog yang tampilannya menyesuaikan (adaptif/responsif) dengan device atau gadget yang digunakan user.
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 berhasil diterapkan di CB Magazine.
Cara Membuat Menu Responsive: Tahapan
1. Template > Edit HTML2. Cari kode seperti di bawah ini, di bawah kode <head>, di bagian atas template:
<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.0, user-scalable=0' name='viewport'/>
<b:else/>
<meta content='width=1100' name='viewport'/>
</b:if>
3. Ganti dengan kode di bawah ini. Jika kodenya sudah seperti di bawah ini, ya... gak usah diganti, biarkan saja:
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
<meta content='text/html; charset=UTF-8' http-equiv='Content-Type'/>
<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}
}
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
Ubah kode pagar (#) dengan link menu dan nama-nama menunya dengan "kepunyaan" Anda!
<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>
<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>
8. Save Template and you are all done!!!
Selamat, navigasi menu responsive di blog Anda sudah muncul!
Anda bisa mencoba desain tampilan navigasi menu responsive lainnya.
Demikian Cara Membuat Navigasi Menu Responsive di Blog. Good Luck & Happy Blogging! (www.contohblog.com).*
Previous
« Prev Post
« Prev Post
Next
Next Post »
Next Post »
Kalo tidak ada kode <*Body*> bagimana gan?
ReplyDeleteapakah navigasi yang sudah ada dihapus terlebih dahulu atau dibiarkan saja?
iya, navigasi yang ada dihapus/direplace dengan kode HTML di atas
DeleteTemplate NEO nya nggak responsive pak... udah diutak atik pake tutorial ini nggak juga berhasil
ReplyDeleteberhasil kok, lihat saja http://neosimplefast.blogspot.com/
Deleteom CB, biar tulisannya menjorok kesamping gimana caranya ya ?, soalnya tulisan HOME dan lain-lian itu agak ketengah, mohon responnya :D
ReplyDeleteatur jaraknya di margin dan/atau padding
DeleteThis comment has been removed by the author.
ReplyDeletework CB!! :v thanks yaa
ReplyDeletemas supaya menu navigasi presisi sama header gimana?
ReplyDeleteTerima Kasih Informasi dari Blog Anda sangat bermanfaat, salam dari Online Soal Terima Kasih.
ReplyDeleteKok ga bisa gan ?
ReplyDeletekeren gan...
ReplyDeletemalam.. mau tanya itu navigasi home blog cb bisa warna beda sendiri dan ada logonya
ReplyDeletecaranya gimana ya?
keren liatnya
terima kasih
kasih background dan tambahan font-awesome
Deletethnks gan, udh work nihh..
ReplyDeletekunbal yaa
thanks gan
ReplyDeleteWork THX gan
ReplyDeletewuuiiiiihhhhh... bener-bener manjur jampi dan mantranya mas.... :) langsung nacep, template saya jadi lebih menarik dipandang,,, matur tengkyu banyaaaaaakkkk dah... :D
ReplyDeletemenu li nya jadi ga responsif. maksudnya ukuran layar dibawah 600px jadi ga keliatan nama menu nya, mohon solusinya
ReplyDeleteartikelnya bagus sangat membantu
ReplyDeletesangat bermanfaat, telah saya coba, menu yang keren, terima kasih
ReplyDeletemohon bantuannya mas,, sdh saya terapin persis tapi di mobile gak tampil, di web tampil,, bagaimana apa yang salah dengan html saya
ReplyDeletekode menu responsive di atas tanpa javasrcipt, jadi tidak mungkin gagal, coba lagi
DeleteMaksih gan..... Sangat membantu.
ReplyDeleteHehehehe
work mas tapi.... alias pada tata letak terdapat titik2 sehingga menyebabkan ukuran menu pun melebar :(
ReplyDelete