Cara Menciptakan Sajian Responsive Mudah Di Blogger

Template Responsive untuk blogger saat ini berbagai tersedia di internet, anda sanggup mendapatkanya secara cuma-cuma alias gratis, anda download, dan pasang di blog anda dengan gampang dan cepat. Beberapa template blog responsive yang tersedia di internet ada yang sudah memakai hidangan responsive lengkap dengan hidangan dropdown, namun banyak juga yang hanya memakai hidangan utama saja, tidak tersedia fitur hidangan drop down pada template responsive gratis tersebut.


Lain halnya dengan template responsive blogger yang versi premium, atau anda harus membeli kepada pembuat template blog responsive tersebut, menu-menu yang tersedia sudah support hidangan drop down, dan pengelolaan template responsive jenis premium ini tentunya semakin mudah, alasannya yaitu tiada lain ingin memanjakan anda sebagai pembeli template blog.

Pada kesempatan kali ini, akan aku bagikan tutorial Cara Membuat Menu Responsive Mudah di blogger, lengkap dengan hidangan dropdown, dengan tampilan ibarat berikut:
Untuk tempilan hidangan ketika blog dibuka memakai laptop ibarat pada gambar berikut:


Sedangkan untuk tampilan hidangan ketika blog dibuka memakai hp tampilan sebagai berikut:

Cara membuatnya, anda cukup menambahkan gadget HTML/ JavaScript dibawah header blog anda, lalu copy paste aba-aba berikut:

   <nav id='menu'>
    <input type='checkbox'/>
    <label>≡<span>MENU</span></label>
    <ul>
    <li><a href='/'>Home</a></li>
    <li><a href='#'>About</a></li>
    <li><a href='#'>Bisnis Online <font size='1'>▼</font></a>
    <ul class='menus'>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Blog</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Web</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Toko Online</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Blog Pribadi</a></li>
    <li><a href='http://www.mungbisnis.com'>Jasa Pembuatan Instansi</a></li>

    </ul>
    </li>
    <li><a href='#'>Contact</a></li>
    <li><a href='#'>Drop Down <font size='1'>▼</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>

<style>
    /*-----Start Responsive Drop Down Menu by MBT redesign by MungBisnis.com ----*/
    body {
    margin: 0px;
    }
    #menu{
    background: #333333;
    color: #FFF;
    height: 40px;
    }
    #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: #5c5b5b;
    }
    #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: #333333;
    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 #333333;

    }
    #menu ul.menus a{
    color: #FFF;
    line-height: 35px;
    }
    #menu li:hover ul.menus{display:block}

    #menu ul.menus a:hover{
    background: #5c5b5b;
    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}

    }
    /*-----End Responsive Drop Down Menu by MBT redesign by MungBisnis.com ----*/
 </style>   

Perhatikan gambar berikut:

Kode diatas sudah berisi menu2 yang sanggup anda edit pribadi ketika memasukan di gadget HTML/JavaScript, untuk mengatur warna biar sesuai dengan warna blog anda, silahkan anda ganti saja aba-aba warna berikut:

• Kode warna background hidangan utama: #333333 Klik DISINI untuk mencari aba-aba warna yang lain.
• Kode warna background sub menu: #5c5b5b

Untuk melihat demo hidangan responsive silahkan buka link DISINI.

Share on Facebook

Share on Twitter

Share on Google+

Share on LinkedIn

Subscribe to receive free email updates: