BLOG WOWTELOTENAN

Read More

Selasa, 13 September 2016

Cara membuat navigasi menu responsif (mobile friendly) di blog blogspot

Author:  |   |  1 Comment | 

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:

    3. <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:

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

  4. Copas kode di bawah ini tepat di bawah kode <body>
    5. 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>

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

Selamat, navigasi menu responsive di blog Anda sudah muncul!.

  1 komentar:

Popular Posts