Info Penting

Harga Domain Premium Rp. 10.000 Mau?

M emiliki blog pribadi atau blog bisnis dengan menggunakan domian premium tentu ada kebanggaan dan kepuasan tersendiri, untuk blog bisnis ...

Artikel Terbaru

Menampilkan postingan yang diurutkan menurut relevansi untuk kueri membuat blog responsive. Urutkan menurut tanggal Tampilkan semua postingan

Cara Membuat Menu Responsive Praktis di Blogger

Template Responsive untuk blogger saat ini banyak sekali tersedia di internet, anda bisa mendapatkanya secara cuma-cuma alias gratis, anda download, dan pasang di blog anda dengan mudah dan cepat. Beberapa template blog responsive yang tersedia di internet ada yang sudah menggunakan menu responsive lengkap dengan menu dropdown, namun banyak juga yang hanya menggunakan menu utama saja, tidak tersedia fitur menu 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 menu drop down, dan pengelolaan template responsive jenis premium ini tentunya semakin mudah, karena tiada lain ingin memanjakan anda sebagai pembeli template blog.

Pada kesempatan kali ini, akan saya bagikan tutorial Cara Membuat Menu Responsive Praktis di blogger, lengkap dengan menu dropdown, dengan tampilan seperti berikut:
Untuk tempilan menu saat blog dibuka menggunakan laptop seperti pada gambar berikut:


Sedangkan untuk tampilan menu saat blog dibuka menggunakan hp tampilan sebagai berikut:

Cara membuatnya, anda cukup menambahkan gadget HTML/ JavaScript dibawah header blog anda, kemudian copy paste kode 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 bisa anda edit langsung saat memasukan di gadget HTML/JavaScript, untuk mengatur warna agar sesuai dengan warna blog anda, silahkan anda ganti saja kode warna berikut:
  • Kode warna background menu utama: #333333 Klik DISINI untuk mencari kode warna yang lain.
  • Kode warna background sub menu: #5c5b5b
Untuk melihat demo menu responsive silahkan buka link DISINI.

Tombol Order WhatsApp Tampil Hanya di Handphone

Pada posting sebelumnya sudah saya bahas tentang cara Membuat Kode Order via WhatsApp di Blog Bisnis, namun pada kode order via whatsapp tersebut tombol whatsapp akan tampil disemua perangkat yang digunakan untuk membuka website bisnis kita, baik dibuka menggunakan laptop maupun handphone/ smartphone.

Pertanyaanya: 
Bagaimana cara mengatur supaya tombol order whatsapp hanya akan tampil jika dibuka melalui handphone atau smartphone saja, dan akan disembunyikan saat dibuka melalui laptop?

Untuk menjawab pertanyaan tersebut, kita bisa dengan memadukan tombol order whatsApp dengan kode css responsive, untuk masalah ini saya anggap template blog anda sudah responsive, dan hal ini bisa anda cek di dalam kode template blog anda akan ada kode seperti dibawah ini:
<head>
<meta content='width=device-width, initial-scale=1, maximum-scale=1' name='viewport'/>
Dibagian kode CSS nya juga akan ditemukan kode seperti ini:
@media only screen and (max-width:

Itu artinya blog anda sudah responsive dan anda bisa melanjutkan dengan mengikuti pembahasan ini, pertama silahkan tambahkan div id pada kode berikut:

<div id="orderwa"> <a href="https://api.whatsapp.com/send?phone=6285640335006&amp;text=Saya%20Mau%20Order"><img src="https://2.bp.blogspot.com/-_A6eHtF2uGQ/WY4wV1vOEVI/AAAAAAAARqY/Q_6BJbkmWYEtFHklydscYQXXscC2s5f-ACLcBGAs/s1600/order%2Blewat%2Bwhatsapp.png"/></a> </div>

Kemudian pada CSS template anda, silahkan anda tambahkan kode css berikut:
#orderwa{display:none;}


Sedangkan untuk css responsivenya silahkan anda tambahkan #orderwa {display:block;} sebagai contoh:

@media only screen and (max-width: 500px)
{ #orderwa {display:block;} }


Untuk hasilnya, silahkan anda coba halaman ini dengan menggunakan handphone/ smartphone dan juga laptop anda, akan akan melihat tombol order whatsApp dibawah ini:

Demikian, selamat mencoba semoga berhasil.

Follow Me


Iklan Penyemangat

Koleksi Tutorial Blog

Arsip Blog