Cara membuat navigasi menu blog: keren terbaru 2019


Cara buat menu navigasi untuk about me, sitemap, disclaimer, pripacy policy, contak

Pada postingan kali ini abdytutorial akan memberikan cara untuk membuat navigasi menu di blogger

Navigasi menu merupakan komponen blog yang sangat berguna untuk memudahkan pengunjung kamu, dan juga sebagai petunjuk. Arah.
Navigasi menu bisa diisi dengan link konten, label halaman, disclaimer, abut me, dan sebagainya,

Langsung saja ke tutorialnya.
Pertamatama kamu harus memasukan script ke Html blog kamu.
<!-- Load an icon library to show a hamburger menu (bars) on small screens -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">

<!-- Top Navigation Menu -->
<div class="topnav">
  <a href="#home" class="active">Logo</a>
  <!-- Navigation links (hidden by default) -->
  <div id="link blog kamu">
    <a href="#">sitemap</a>
    <a href="#">disclaimer</a>
    <a href="#">pripacy policy</a>
    <a href="#">About me</a>
  </div>
  <!-- "Hamburger menu" / "Bar icon" to toggle the navigation links -->
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
 Ganti tulisan link blog kamu, ganti juga tanda # berwarna merah dengan link. Halaman sitemap, disclaimer, prypacy policy, dan about me. Atau apapun terserah kamu. Sesuaikan namanya. Jika kamu memasukan link fb kamu, kamu juga harus mengganti tulisannya juga.

Contoh. <a Href="link facebook">facebook</a>

Langsung ke tahap 2
 Masukan html css

/* Style the navigation menu */
.topnav {
  overflow: hidden;
  background-color: #333;
  position: relative;
}

/* Hide the links inside the navigation menu (except for logo/home) */
.topnav #myLinks {
  display: none;
}

/* Style navigation menu links */
.topnav a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

/* Style the hamburger menu */
.topnav a.icon {
  background: black;
  display: block;
  position: absolute;
  right: 0;
  top: 0;
}

/* Add a grey background color on mouse-over */
.topnav a:hover {
  background-color: #ddd;
  color: black;
}

/* Style the active link (or home/logo) */
.active {
  background-color: #4CAF50;
  color: white;
}
Simpan tema. Dan lihat hasilnya.
Jika ada pertanyaan, atau scrip ini tidak bekerja silahkan hubungi saya ya, komen, bantu share dan ikuti hhe

Berlangganan update artikel terbaru via email:

0 Response to "Cara membuat navigasi menu blog: keren terbaru 2019"

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel