Cara Menambahkan Menu Navigasi Responsive

Setelah berhasil membuat rancangan awal theme dari nol. Ini tulisan kedua cara membuat tema blogger sendiri. Kali ini kita akan menambahkan menu responsive. Menu navigasi ini sangat penting bagi website. 

Ini demi memanjakan pengunjung yang datang di blog Anda. 

Dengan tampilan menu yang nyaman akan membuat pengunjung betah berlama-lama. Sehingga, kenyamanan ini menjadi salah satu daya tarik agar netizen kembali berkunjung. 

Oleh karena itu tidak baik mencukupkan diri dengan tampilan bawaan. Template tersebut terlihat sangat sederhana dan bahkan menu navigasi pun tidak terlihat. 

 

Apa itu Menu Navigasi Responsive?

Menu navigasi adalah sebuah daftar yang terdiri atas tulisan dan atau simbol yang menyajikan tautan khusus untuk membantu pengunjung mengetahui isi sebuah blog. 

Sedangkan responsive artinya menu tersebut bisa menyesuaikan layar yang digunakan oleh pengunjung blog secara otomatis. Baik pengunjung yang menggunakan komputer desktop maupun telepon seluler.

 

Secara kebiasaan, kebanyakan blog mempunyai 2 (dua) menu navigasi yang terdapat di atas semuanya atau salah satunya ada di bawah pada bagian footer.

Navigasi paling atas atau kadang ditempatkan pada bagian footer biasanya berisi halaman; about us, privacy policy, disclaimer dan terms and conditions.

Sedangkan menu navigasi utama biasanya ditempatkan pada area setelah header. Menu navigasi utama inilah yang sedang kita bahas.

Cara Membuat Menu Navigasi Responsive di Blogger

Setelah berhasil membuat theme sendiri meskipun masih sangat sederhana. Berikut ini langkah-langkah bagaimana cara pasang menu navigasi responsive untuk blogspot.
1. Login ke blogger
2. Masuk ke Dashboard
3. Klik Theme lalu pilih Edit HTML, cari kode ]]></b:skin>
4. Copas kode berikut ini dan letakan di atas kode skin ]]></b:skin>

#menu {background:#393939;color:#eee;height: 40px;width:100%;max-width:960px;margin:0 auto;} #menu ul,#menu li{margin:0 0;padding:0 0;list-style:none} #menu ul{height:40px;border-bottom:4px solid #0098db} #menu li{float:left;display:inline;position:relative;font-family:'Oswald',Arial;font-weight:500;font-size:15px;text-shadow: 0 -1px 0 #000;border-right: 1px solid #444;text-transform:uppercase} #menu li:first-child{border-left: none} #menu a{display:block;line-height:40px;padding:0 14px;text-decoration:none;color:#eee;}#menu li:hover > a,#menu li a:hover{background:#0098db} #menu input{display:none;margin:0 0;padding:0 0;width:80px;height:40px;opacity:0;cursor:pointer} #menu label{font:bold 30px font-family:'Oswald',Arial;font-weight:500;display:none;width:35px;height:36px;line-height:36px;text-align:center} #menu label span{font-size:12px;position:absolute;left:40px} #menu ul.menus{height:auto;overflow:hidden;width:180px;background:#393939;position:absolute;z-index:99;display:none;border:0;} #menu ul.menus li{display:block;width:100%;font:12px font-family:'Oswald',Arial;font-weight:500;text-transform:none;} #menu li:hover ul.menus{display:block} #menu a.home {background-color:#0098db;} #menu a.prett{padding:0 27px 0 14px} #menu a.prett::after{content:"";width:0;height:0;border-width:6px 5px;border-style:solid;border-color:#eee transparent transparent transparent;position:absolute;top:15px;right:9px} #menu ul.menus a:hover{background:#0098db;} @media screen and (max-width: 768px){ #menu{background:#000;position:relative} #menu ul{background:#111;position:absolute;top:100%;right:0;left:0;z-index:3;height:auto;text-align:left;display:none} #menu ul.menus{width:100%;position:static;padding-left:20px} #menu li{display:block;float:none;width:auto} #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}}


5. Kemudian cari kode </head> dan letakan kode dibawah kode ini setelah </head>. Ingat bukan kode </header> tapi </head>
<nav id='menu'> <input type='checkbox'/> <label> <svg style='width:30px;height:30px' viewbox='0 -3 24 24'> <path d='M3,6H21V8H3V6M3,11H21V13H3V11M3,16H21V18H3V16Z' fill='currentColor'/> </svg> <span style='margin-top:1px;font-size:17px'>Navigasi</span> </label> <ul> <li><a class='home' href='https://sebarditheme.blogspot.com'> <span style='margin:3px;'>Home</span></a> </li> <li><a href='https://sebarditheme.blogspot.com/' title='Menu1'>Menu1</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Menu2'>Menu2</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Menu3'>Menu3</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Menu4'>Menu4</a></li> <li><a class='prett' href='#'>Dropdown1</a> <ul class='menus'> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu1'>Sub Menu1</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu2'>Sub Menu2</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu3'>Sub Menu3</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu4'>Sub Menu4</a></li> </ul> <li><a class='prett' href='#'>Dropdown2</a> <ul class='menus'> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu5'>Sub Menu5</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu6'>Sub Menu6</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu7'>Sub Menu7</a></li> <li><a href='https://sebarditheme.blogspot.com/' title='Sub Menu8'>Sub Menu8</a></li> </ul> </li> <li><a href='https://sebarditheme.blogspot.com/' target='_blank' title='Menu5'>Menu5</a></li> </li> </ul> </nav>


6. Silahkan ganti url addressnya, pada contoh tertulis https://sebarditheme.blogspot.com.

 

7. Klik Simpan template

Sekarang, blog baru Anda sudah memiliki menu responsive baru. Pada awalnya template ini terlihat sederhana. Tapi nanti dia pasti menjadi istimewa. Ini semua bergantung seberapa jauh kreatifitas Anda. 

 

Selamat mencoba.

Baca Juga