Home » » 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!

Thanks for reading & sharing Cara Membuat Navigasi Menu Responsive di Blog

Previous
« Prev Post

23 comments:

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

    ReplyDelete
    Replies
    1. iya, navigasi yang ada dihapus/direplace dengan kode HTML di atas

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

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

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

    ReplyDelete
    Replies
    1. atur jaraknya di margin dan/atau padding

      Delete
  4. This comment has been removed by the author.

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

      Delete
  5. work CB!! :v thanks yaa

    ReplyDelete
  6. mas supaya menu navigasi presisi sama header gimana?

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

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

    terima kasih

    ReplyDelete
    Replies
    1. kasih background dan tambahan font-awesome

      Delete
  9. thnks gan, udh work nihh..
    kunbal yaa

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

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

    ReplyDelete
  12. artikelnya bagus sangat membantu

    ReplyDelete
  13. ko punya saya dibawah ya

    ReplyDelete
  14. sangat bermanfaat, telah saya coba, menu yang keren, terima kasih

    ReplyDelete

Komentar spam, menyertakan link aktif dan alamat blog tidak akan muncul. Tidak semua pertanyaan sempat atau bisa dijawab. Thanks for visiting and the comment :)

E-mail Newsletter

Receive Latest Posts from CB Blogger Straight in Your Email Inbox