Cara Membuat Navigasi 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 (responsive) dengan device atau gadget yang digunakan user.

Menu navigasi biasanya memuat label-label atau laman pada blog yang biasnya terdapat di atas header atau di bawah header blog.

Nah, kenapa harus responsive? karena tuntunan digital sekarang ini banyak sekali pengguna internet yang menggunakan smartphone, jika Anda memasang Menu responsive maka akan terlihat layaknya membuka sepeti pada desktop atau komputer.

Menu blog yang responsive biasanya menentukan disukai atau tidaknya oleh Google. Berikut ini saya akan membagikan bagaimana cara membuat navigasi menu yang responsive.

Cara Memasang Navigasi Menu Responsive

1.Silahkan masuk pada akun blogger Anda.
2.klik menu Template dan pilih Edit HTML.
3.Tambahkan HTML di bawah ini pada template Anda tepat di atas kode <header>

<nav class='clearfix' id='navi' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'>
<a href='#' id='pull'>Menu</a> <ul class='clearfix'> <li><a href='http://desapengetahuan.blogspot.co.id' title='Beranda'>Beranda</a> </li> <li><a href='http://desapengetahuan.blogspot.co.id/search/label/TOUTORIAL%20BLOGGER' title='Tutorial Blogger'>TUTORIAL BLOGGER</a> </li> <li><a href='#' title='Template Blogger'>TEMPLATE BLOGGER</a></li> <li><a href='http://desapengetahuan.blogspot.co.id/search/label/INTERNET' title='Internet'>INTERNET</a></li> <li><a href='http://desapengetahuan.blogspot.co.id/search/label/BELAJAR%20BLOG' title='Belajar Blog'>BELAJAR BLOG</a></li> <li><a href='http://desapengetahuan.blogspot.co.id/search/label/Blogger' title='Sosial Media'>SOSIAL MEDIA</a></li> <li><a href='http://desapengetahuan.blogspot.co.id/search/label/Blogger' title='Belajar Seo'>BELAJAR SEO</a></li> </ul> </nav>

4.Kemudian tambahkan kode CSS pada blog Anda tepat di bawah kode  ]]></b:skin> atau </style>

/* Navigasi Menu */ #pull{display:none;text-decoration:none} #navi{background:#222;height:51px;max-width:1000px;width:100%;display:block;font-family:"Oswald";font-weight:400;text-transform:uppercase; overflow:hidden; position:relative;text-decoration:solid;margin:0 auto; padding:0} #navi ul{margin:0 auto;padding:0 auto;} #navi li{list-style:none;margin:0 0 auto;max-width:1000px;width:100%;} #navi li a{float:left;display:block;font-size:17px; color:#fff; padding:13px 20px;text-decoration:none} #navi li a:hover{background:#ea6153;height:auto;display:block;} @media screen and (max-width:960px){ #navi{height:auto; border-bottom:0} #navi ul{width:100%; display:none; height:auto} #navi li{width:100%; float:left; position:relative;} #navi li a{padding:10px 0} #navi a{text-align:left; color:#f1f1f1; padding-top:14px; width:100%; text-indent:20px} #navi a#pull{display:block; margin:0 auto; background-color:#333; height:38px; width:100%; position:relative} #navi a#pull:after{content:''; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgO-UpDCIICfSsNyyZjvnkYMRHVnbwG8iiDtf_RGAEXXsSdH8HRIIQhSfQxXLzovjl7NRmg6PUsiCaGbpfAuCdkA0JemIkxvocSXZthX10RYMSGyjibFvkJT9P2tQkCDY89UmNSZRsoS4N0/s320/nav-icon.png) no-repeat; width:30px; height:30px; display:inline-block; position:absolute; right:10px; top:14px} }

Keterangan :

• Untuk mengganti warna background menu, ubah kode warna ini: #222

• Ganti warna background "hover", ubah: #ea6153

• Untuk mengubah warna lihat Daftar Kode Warna HTML

5.Jangan lupa tambahkan kode Font dibawah ini jika belum ada di blog anda tepatnya di atas kode </head>

<link href='http://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'/>

Disini Saya menggunakan Font dari Google font.  Jika Anda ingin menggantinya silahkan
Baca,

Cara Memasang Google Font di Blog

6.Langakah terakhir Simpan template Anda

Selamat sekarang Anda sudah mempunyai navigasi menu keren dan pastinya juga responsive. Selamat mencoba.

Share this post