Cara Membuat Navigasi Menu Responsive di Blog

Cara Membuat Navigasi Menu Responsive di Blog

Cara Membuat Menu Responsive di Blog 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 diterapkan di template Johny Wuss Responsive dan New Max Mag.

Cara Membuat Menu Responsive: Tahapan

1. Template > Edit HTML
2. 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>

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'/>

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
5. Copas kode di bawah ini tepat di bawah kode <body>
Ubah kode pagar (#) dengan link menu dan nama-nama menunya dengan "kepunyaan" Anda!

<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>

8. Save Template and you are all done!!!

Selamat, navigasi menu responsive di blog Anda sudah muncul!

Labels: Desain Blog

Related Posts

26 Komentar untuk "Cara Membuat Navigasi Menu Responsive di Blog"

Kalo tidak ada kode <*Body*> bagimana gan?
apakah navigasi yang sudah ada dihapus terlebih dahulu atau dibiarkan saja?

Template NEO nya nggak responsive pak... udah diutak atik pake tutorial ini nggak juga berhasil

om CB, biar tulisannya menjorok kesamping gimana caranya ya ?, soalnya tulisan HOME dan lain-lian itu agak ketengah, mohon responnya :D

berhasil kok, lihat saja http://neosimplefast.blogspot.com/

iya, navigasi yang ada dihapus/direplace dengan kode HTML di atas

atur jaraknya di margin dan/atau padding

This comment has been removed by the author. - Hapus

http://contohblognih.blogspot.com/2015/03/navigasi-menu-responsive-plus-drop-down.html

work CB!! :v thanks yaa

mas supaya menu navigasi presisi sama header gimana?

Terima Kasih Informasi dari Blog Anda sangat bermanfaat, salam dari Online Soal Terima Kasih.

malam.. mau tanya itu navigasi home blog cb bisa warna beda sendiri dan ada logonya
caranya gimana ya?
keren liatnya

terima kasih

kasih background dan tambahan font-awesome

thnks gan, udh work nihh..
kunbal yaa

wuuiiiiihhhhh... bener-bener manjur jampi dan mantranya mas.... :) langsung nacep, template saya jadi lebih menarik dipandang,,, matur tengkyu banyaaaaaakkkk dah... :D

menu li nya jadi ga responsif. maksudnya ukuran layar dibawah 600px jadi ga keliatan nama menu nya, mohon solusinya

artikelnya bagus sangat membantu

ko punya saya dibawah ya

sangat bermanfaat, telah saya coba, menu yang keren, terima kasih

mohon bantuannya mas,, sdh saya terapin persis tapi di mobile gak tampil, di web tampil,, bagaimana apa yang salah dengan html saya

kode menu responsive di atas tanpa javasrcipt, jadi tidak mungkin gagal, coba lagi

Maksih gan..... Sangat membantu.
Hehehehe

1. Komentar spam, menyertakan Link Aktif dan Alamat Blog tidak akan muncul.
2. Tidak semua pertanyaan sempat atau bisa dijawab.
3. Bagi yang mau tanya, sebelum bertanya, silakan cari dulu di Kotak Pencarian di Sidebar.
Thanks for visiting and the comment :)

Contact Form

Name

Email *

Message *