Cara Membuat Menu Navigasi dan Bantuan di Blog

Cara Membuat Menu Navigasi dan Bantuan di Blog – Membuat blog yang keren bisa dilakukan melalui berbagai macam cara, salah satunya yaitu dengan menciptakan Menu Navigasi dan Menu Bantuan yang isinya mengenai halaman About, Contact dan juga Sitemap.

Menu Navigasi dibuat di bagian bawah judul berikut deskripsi dari blog, sedangkan Menu Bantuan diletakkan di atas judul dari blog yang Kita miliki.

Masing-masing menu tersebut sangatlah berguna dan penting dalam meningkatkan kualitas tampilan blog yang Anda miliki.

Di samping itu, menu-menu tersebut juga dapat menunjukkan proporsionalitas blog yang Anda kelola sesuai standard dan dapat menambah daya tarik. Untuk membuat kedua menu tersebut pada blog yang Anda miliki, ikutilah langkah-langkah berikut ini.

Menu navigasi

Pertama-tama, buatlah daftar menu dengan menggunakan kode HTML ul li, lalu bungkus dengan div yang lebih familiar. Berikut contohnya:

<div id=”navbarsecond”>

<ul>

<li><a href=””>SEO Lokal</a></li>

<li><a href=””>SEO Manca</a></li>

<li><a href=””>SEO Tips</a></li>

<li><a href=””>SEO Kawe</a></li>

<li><a href=””>SEO Sawang</a></li>

<li><a href=””>SEO Sumber</a></li>

<li><a href=””>SEO Google</a></li>

</ul>

<div>

Nama-nama id di atas bisa dikreasikan sesuai keinginan dan letakkan di bawah header. Tapi kenapa bagian menunya berbentuk vertikal? Hal ini bisa diatasi dengan menambah property float: left; agar menu mengarah ke samping alias horizontal. Apabila jarak diantaranya terlalu dekat, Anda bisa gunakan padding untuk mengatur jarak. Caranya yaitu hapus bulatan memakai list-style-type: none; atau lihat kode lengkap di bawah ini.

#navbarsecond ul li {

float: left;

padding: 10px;

list-style-type: none;

margin-left: 30px;

}

Masukan kode di atas dengan menekan symbol + New Style Rule di pojok kanan bagian atas Menu Inspect Element. Setelah itu, klik div dengan sektor navbarsecond dan klik symbol + dengan tambahkan kode berikut ini.

#navbarsecond {

border-bottom: 1px solid gainsboro;

margin: 0 20px;

margin-top: -12px;

margin-bottom: -10px;

}

Menu Bantuan

Menu Bantuan terdiri dari About, Contact, Sitemap dan bisa ditambah sesuai keinginan. Cara membuat Menu Bantuan ini sangatlah mudah, yaitu:

  1. Tambahkan CTRL+C div pada Menu Navigasi yang telah dibuat.
  2. Lalu letakkan di bawah selektor content-outer.
  3. Tambahkan selector ul li dalam id navbarfirst, contohnya:

/* CSS Untuk Mengatur DIV */

#navbarfirst {

background: white;

padding: 5px;

border: 1px solid gainsboro;

border-bottom: 0;

padding-left: 485px;

}

/* CSS Untuk Mengatur UL LI ( Menu ) */

#navbarfirst ul li {

float: left;

padding: 10px;

list-style-type: none;

padding-left: 47px;

}

Selesailah pembuatan Menu Navigasi dan Menu Bantuan yang Anda buat pada blog yang Anda miliki. Dengan begitu, tampilan template menu yang ada di blog Anda akan semakin terlihat menarik. Apabila seluruh tahapan tadi dilakukan dengan sebaik mungkin, maka tampilan blog yang lebih profesional bisa Anda miliki mulai saat ini.

Baca Juga : Ketika Sebuah Akun Twitter diPerjual Belikan

Leave a Reply

Your email address will not be published. Required fields are marked *