Cara Membuat Menu Navigasi di Blog

Sebuah blog atau website tentunya memiliki menu label yang sering disebut dengan menu navigasi. Fungsi label adalah untuk mengelompokkan kategori yang kita buat. Sedangkan fungsi dari menu navigasi ini agar pengunjung website mudah dalam mencari artikel sesuai label/kategori yang dicarinya. Banyak macam gaya navigasi yang digunakan blog atau website-website ternama. Dalam membuat navigasi ini kita diharuskan paham dengan bahasa pemrograman web seperti CSS, HTML, dan JavaScript. CSS dan HTML merupakan satu kesatuan agar tampilan menarik. Sedangkan JavaScript lebih sering digunakan untuk tampilan efek-efek yang keren.

Untuk membuat navigasi itu sendiri, kita minimal membutuhkan 2 elemen bahasa pemrograman web yaitu CSS dan HTML. CSS berfungsi sebagai kostumisasi tampilan pada website seperti jarak tepi dan warna. Lain halnya dengan HTML, memang sih HTML juga bisa digunakan untuk tampilan. Namun fiturnya tidak sebanyak CSS. Nah, bagi kalian yang bingung gimana sih cara membuat menu di blog? Yuk, simak langkah-langkah di bawah ini.

• Login ke blogger Kalian dan masuklah ke halaman template.

• Kalian akan melihat halaman form berupa html. Disitulah letak semua kode pemrograman web pada blog kalian.

• Cari kode </style> dan copy-paste kan kode berikut tepat di atas kode </style>. Agar mudah dalam mencari kode tersebut, kalian bisa menggunakan CTRL + F untuk memudahkan pencarian.

• Kode tersebut adalah bahasa pemrograman web CSS. Ini berfungsi sebagai pengatur tampilan untuk navigasi yang nantinya akan kita buat. Disini kita bisa atur batas tepi (margin), warna, dan lain sebagainya.

/* DHELRIGHT Main Navigation */ 
#navi-dhelright{height:45px;width:950px;text-transform:uppercase;font-size:15px;background:#45a2db;color:#fff;font-family:Oswald}
#navi-dhelright ul.menus{background:#45a2db;height:auto;overflow:hidden;position:absolute;z-index:99;display:none}
#navi-dhelright a{display:block;line-height:45px;padding:0 15px;text-decoration:none;color:#fff}
#navi-dhelright ul, #navi-dhelright li {margin: auto;padding:0;list-style:none}
#navi-dhelright ul {height:40px;}
#navi-dhelright li {float:left;display:inline-block;position:relative}
#navi-dhelright input {display:none;margin:0;padding:0;width:80px;height:40px;opacity:0;cursor:pointer}
#navi-dhelright label {display:none;width:55px;height:48px;line-height:48px;text-align:center}
#navi-dhelright label span {font-size:18px;position:absolute;left:55px}
#navi-dhelright ul.menus li {display:block;width:100%;text-transform:none;text-shadow:none;}
#navi-dhelright ul.menus a {color:#fff;line-height:55px}
#navi-dhelright li a:hover {background:#145f8b}
#navi-dhelright .home {background-color:#145f8b}
#navi-dhelright li:hover ul.menus, #navi-dhelright li:hover > ul {display:block}
#navi-dhelright ul.menus a:hover {background:#EA1E13}
#navi-dhelright li li {display:block;float:none}
#navi-dhelright li ul{background:#000000;margin:0;width:100px;height:auto;position:absolute;top:45px;left:0;z-index:10;display:none}
#navi-dhelright li li:hover {background:#444}
#navi-dhelright li li a:hover {background:#EA1E13}
#navi-dhelright li ul ul {left:100%;top:0}
#navi-dhelright li li > a{display:block;padding:0 15px;margin:0;line-height:30px;text-decoration:none;color:#fff}
#navi-dhelright{position:relative}
#navi-dhelright ul{background:#45a2db;position:absolute;top:100%;left:0;z-index:3;height:auto;display:none}
#navi-dhelright ul.menus{width:100%;position:static;padding-left:20px}
#navi-dhelright li{display:block;float:none;width:auto}
#navi-dhelright input,#navi-dhelright label{position:absolute;top:0;left:0;display:block}
#navi-dhelright input{z-index:4}
#navi-dhelright input:checked + label{color:#fff }
#navi-dhelright input:checked ~ ul{display:block;width:100%}
#navi-dhelright li:hover ul{width:100%}}

• Setelah kita membuat struktur CSS nya. Sekarang kita panggil tampilan navigasi tadi dengan script di bawah ini. Copy paste kan kode di bawah ini tepat dibawah <div id='header'>...</div>.

<nav id='navi-dhelright' itemscope='itemscope' itemtype='http://schema.org/SiteNavigationElement'> 
  <input type='checkbox'/> 
  <label>MENU</label> 
  <ul>
   <li><a class='home' expr:href='data:blog.homepageUrl'><img border='0' src='http://findicons.com/files/icons/2337/wireframe_toolbar_icons/48/home.png' style='padding:0px;height:25px;width:30px'/></a></li>
   <li><a href='#' itemprop='url'><span itemprop='name'>Blog</span></a>
   <ul>
    <li><a href='#' itemprop='url'><span itemprop='name'>SEO</span></a></li>
    <li><a href='#' itemprop='url'><span itemprop='name'>Adsense</span></a></li>
   </ul>
   </li>
   <li><a href='#' itemprop='url'><span itemprop='name'>Informatika</span></a></li>
   <li><a href='#' itemprop='url'><span itemprop='name'>Kesehatan</span></a></li>
   <li><a href='#' itemprop='url'><span itemprop='name'>Resep Masakan</span></a></li>  
  </ul>
</nav>

• Kemudian  klik simpan template. Elemen ini sangat penting bagi blog kita apalagi pengunjung. Google sangat menyukai website yang memudahkan pengunjungnya. Sekian tutorial dari saya jika ada pertanyaan silahkan berkomentar.

Cara Membuat Menu Navigasi di Blog 2022-07-11T23:33:00-07:00 Rating: 4.5 Diposkan Oleh: Fadhel