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.
<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
.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
