Cara membuat menu navigasi responsive di blogger

Cara membuat menu navigasi responsive di blogger. Sobat-sobat blogger yang saya cintai (suit-suit...), blog yang masih standar dengan menu dan tampilan bawaan blogger sangatlah sederhana. Jika kita menginginkan kemudahan dalam menjelajahi isi blog tersebut, maka blog tersebut harus memasang bar navigasi yang dapat mengarahkan kita ke artikel maupun kategori yang kita cari. Salah satunya seperti gambar contoh di bawah ini.

http://kendhou.blogspot.co.id/2015/12/cara-membuat-menu-navigasi-responsive.html


Bagi yang baru mempunyai blog, hal ini tentu sangat diperlukan sebagai beberapa tahapan awal dalam kelengkapan sebuah blog. Bagi sobat saya yang belum memiliki blog jangan khawatir, silahkan buat blog baru sobat sebab cara membuat blog di blogger tidaklah sulit.

Pada jaman yang semakin maju seperti saat ini, dimana gadget yang ada semakin canggih dan mempermudah kita melakukan banyak hal. Contonya adalah smartphone, Tablet dan lain-lain. Aktivitas browsing tak perlu lagi harus membuka laptop maupun PC (desktop), semuanya cukup dalam genggaman. Dan saya yakin para pengguna internet akan semakin banyak yang melakukan aktivitasnya melalui perangkat mobile.

Dengan alasan itu maka blogpun dituntut untuk lebih mobile friendly, atau bisa dibilang responsive. Oleh sebab itu pula maka kali ini saya akan memberikan info bagaimana membuat menu navigasi yang responsive. Sebenarnya tak susah melakukannya, sobat hanya tinggal mengikuti instruksi yang ada.

Cara menambahkan menu Navigasi responsive di Blogger

1. Log in ke akun blogger sobat seperti biasanya
2. Buka menu Template >> Edit HTML
3. tekan ctrl+F, cari kode <head> lalu sisipkan script di bawah ini tepat di bawah kode tersebut

<link href='http://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css' rel='stylesheet'/>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src='https://googledrive.com/host/BzPgmXeCwsMRc0o1NnM4QU1OSVE' type='text/javascript'></script>

Jika sudah selesai maka sekarang kita beranjak ke langkah selanjutnya.

Menambahkan kode CSS

Kali ini sobat ketikkan kode ini di pencarian ]]></b:skin> dan sisipkan script berikut ini di atasnya. Jangan sampai salah tempat peletakan ya Sob...




Menambahkan kode HTML

Tinggal langkah terakhir Sob, sama seperti kedua langkah sebelumnya, hanya saja kali ini yang perlu sobat cari adalah kode </header> , jika sudah sobat temukan sisipkan script berikut tepat dibawah kode header.

<nav>
<a id="resp-menu" class="responsive-menu" href="#"><i class="fa fa-reorder"></i> Menu</a> 
   <ul class="menu">
   <li><a class="homer" href="#"><i class="fa fa-home"></i> HOME</a>
   </li><li><a  href="#"><i class="fa fa-user"></i> ABOUT</a></li>
  <li><a  href="#"><i class="fa fa-camera"></i> PORTFOLIO</a>
  <ul class="sub-menu">
   <li><a href="#">Sub-Menu 1</a></li>
   <li><a href="#">Sub-Menu 2</a>
    <ul><li><a href="#">Sub Sub-Menu 1</a></li>
   <li><a href="#">Sub Sub-Menu 2</a></li></ul> </li>
    <li><a href="#">Sub-Menu 3</a><ul>
   <li><a href="#">Sub Sub-Menu 1</a></li>
   <li><a href="#">Sub Sub-Menu 2</a></li>
   </ul></li></ul></li>
<li><a  href="#"><i class="fa fa-bullhorn"></i> BLOG</a></li>
   <li><a  href="#"><i class="fa fa-tags"></i> CATEGORIES</a>
  <ul class="sub-menu">
  <li><a href="#">Sub-Menu 1</a></li>
  <li><a href="#">Sub-Menu 2</a><ul>
  <li><a href="#">Sub Sub-Menu 1</a></li>
  <li><a href="#">Sub Sub-Menu 2</a></li>
 </ul></li><li><a href="#">Sub-Menu 3</a>
<ul>
 <li><a href="#">Sub Sub-Menu 1</a></li>
<li><a href="#">Sub Sub-Menu 2</a></li>
    </ul> </li></ul></li>
<li><a  href="#"><i class="fa fa-envelope"></i> CONTACT</a></li>
<li><a  href="#"><i class="fa fa-sitemap"></i> SITEMAP</a></li>
</ul>
</nav>

Klik Simpan template, lalu coba sobat lihat tampilan blog standar sobat, hasilnya bagaimana? Oh iya Sob, hilangkan navigasi bawaan blogger di bagian palin atas halaman blog sobat, dengan cara mematikan/menutup navigasi tersebut, letaknya di menu administrasi blog >> Tata letak >> Navbar >> edit >> off.

Sampai disini tutorial tentang bagaimana cara membuat menu navigasi responsive di blogger yang dapat saya jelaskan, semoga dapat memberikan manfaat khususnya sobat-sobat saya yang baru memulai blogging.
Salam Pintar...

Berlangganan update artikel terbaru via email:

4 Responses to "Cara membuat menu navigasi responsive di blogger"

  1. cara menambahkan dropdownnya bagaimana gan...?

    ReplyDelete
  2. Terima kasih atas informasinya.sangat membantu sekali buat saya yang sedang mencari refrensi menu bar. Salam belajar

    ReplyDelete
    Replies
    1. sama-sama sob, saya senang bisa membantu dan salam kenal

      Delete
  3. Kok jadinya vertikal, hehe salah mungkin saya ... pemb-laa.blogspot.com

    ReplyDelete

Terima kasih atas kunjungannya...
Pertanyaan, pendapat,serta saran dan masukan dapat sobat tuliskan pada kolom komentar yang tersedia. Harap menggunakan bahasa yang baik dan sopan.
Mohon maaf, segala bentuk SPAM dan mengandung unsur SARA akan kami hapus.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel