Cara Membuat Menu Navigasi Responsive di Blogger

Secara umum blog mempunyai dua menu navigasi yang terdapat diatas, salah satunya terdapat pada bagian footer. Navigasi atas biasanya di tempatkan pada bagian bawah footer yang berisi About, Kontak, Disclaimer, Privacy Policy dan terms Of Conditions.

Sedangkan menu navigasi utama biasanya di tempatkan pada area header, menu inilah yang akan di bahas dalam artikel ini.

Apa itu menu navigasi responsive

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

Sedangkan responsive adalah menu yang bisa menyesuaikan posisi pada layar yang digunakan oleh pengunjung blog secara otomatis baik menggunakan selular, desktop, tablet, PC dan lainnya.

Membuat menu navigasi responsive di blogger

1. Login blogger  > Pilih tema > klik Edit HTML

2. Cari kode ]]></b:skin>

3. Kemudian salin kode di bawah ini dan letakan diatas kode ]]></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}}

4. Cari kode </head> lalu letakan kode tepat di bawah kode setelah </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://urlsobat.blogspot.com/;
          <span style='margin:3px;'>Home</span></a>
        </li> 
        <li><a href='https://www.anddseo.my.id/' title='Menu1'>Menu1</a></li> 
        <li><a href='https://urlsobat.blogspot.com/' title='Menu2'>Menu2</a></li> 
        <li><a href='https://urlsobat.blogspot.com/' title='Menu3'>Menu3</a></li> 
        <li><a href='https://urlsobat.blogspot.com/' title='Menu4'>Menu4</a></li> 
        <li><a class='prett' href='#'>Dropdown1</a> <ul class='menus'> 
          <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu1'>Sub Menu1</a></li> 
          <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu2'>Sub Menu2</a></li> 
          <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu3'>Sub Menu3</a></li> 
          <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu4'>Sub Menu4</a></li> 
        </ul> 
        <li><a class='prett' href='#'>Dropdown2</a> <ul class='menus'> <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu5'>Sub Menu5</a></li> 
          <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu6'>Sub Menu6</a></li> 
          <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu7'>Sub Menu7</a></li> 
          <li><a href='https://urlsobat.blogspot.com/' title='Sub Menu8'>Sub Menu8</a></li> 
        </ul> 
        </li> <li><a href='https://urlsobat.blogspot.com/' target='_blank' title='Menu5'>Menu5</a></li> 
        </li>
      </ul> 
    </nav>

5. Ganti alamat url yang di tandai dengan alamat url Anda.

6. Selesai! Klik SIMPAN

Demikian artikel mengenai bagaimana cara membuat menu navigasi responsive di blogger. Semoga bermanfaat.

Tweet