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 berhasil diterapkan di CB Magazine.

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!

Anda bisa mencoba desain tampilan navigasi menu responsive lainnya.

Demikian Cara Membuat Navigasi Menu Responsive di Blog. Good Luck & Happy Blogging! (www.contohblog.com).*

Labels: Desain Blog

Related Posts

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

work mas tapi.... alias pada tata letak terdapat titik2 sehingga menyebabkan ukuran menu pun melebar :(

Maksih gan..... Sangat membantu.
Hehehehe

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

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

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

ko punya saya dibawah ya

artikelnya bagus sangat membantu

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

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

thnks gan, udh work nihh..
kunbal yaa

kasih background dan tambahan font-awesome

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

terima kasih

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

mas supaya menu navigasi presisi sama header gimana?

work CB!! :v thanks yaa

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

This comment has been removed by the author. - Hapus

atur jaraknya di margin dan/atau padding

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

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

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

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

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

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 *