January 13, 2015

Cara Membuat Navigasi Menu Responsive di Blog

January 13, 2015

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).*

Previous
« Prev Post
Author Image

CB Blogger

Recommended Posts

Related Posts

Show comments
Hide comments

25 comments on Cara Membuat Navigasi Menu Responsive di Blog

  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
  5. mas supaya menu navigasi presisi sama header gimana?

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

    ReplyDelete
  7. 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
  8. thnks gan, udh work nihh..
    kunbal yaa

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

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

    ReplyDelete
  11. artikelnya bagus sangat membantu

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

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

    ReplyDelete
    Replies
    1. kode menu responsive di atas tanpa javasrcipt, jadi tidak mungkin gagal, coba lagi

      Delete
  14. Maksih gan..... Sangat membantu.
    Hehehehe

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

    ReplyDelete

Contact Form

Name

Email *

Message *