Thursday, June 13, 2019

Cara membuat navigasi menu blog keren terbaru


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
Comments

2 komentar

Bisa dicoba nih,, penjelasannya mantap, mungkin agar menarik bisa dikasih demo nya bang


EmoticonEmoticon