3 Cara Membuat Tombol Navigasi Menu Laman Pada Blog

Apakah anda ingin membuat tombol navigasi diatas header blog?

Jika Iya,maka Postingan ini jawabannya

Bukan hanya Membuat Tombol Navigasi Di atas Header Blog saja tetapi saya akan memberitahukan 3 cara Membuat Tombol Navigasi Laman

Wedeh Kayaknya bakal panjang nih

Iya memang panjang tapi sebelum membuatnya sebaiknya kita harus tahu dulu apa manfaat dari Membuat Tombol Navigasi Menu Laman

Pertama Memudahkan pengunjung dalam Mencari informasi tentang blog kita

Kedua Kita bisa mengedit Tombol Laman untuk dialihkan ke Link dari Artikel Andalan Kita

Ketiga Bisa Menjadikan blog kita lebih profesional

Keempat Membuat Tampilan dari blog kita menjadi lebih menarik

Oke kalau anda sudah tahu manfaatnya,selanjutnya berikut ini 3 Cara Membuat Tombol Navigasi Menu Laman Pada Blog

Membuat Tombol Navigasi Menu Diatas Header Blog

Seperti yang dilingkari merah

Baiklah Pertama Saya akan memberitahukan cara membuat Tombol Navigasi Menu Diatas Header Blog.

Buka Dashboor Blog kamu lalu Klik Template dan Setelah itu Klik Edit HTML

Selanjutnya

Pertama Tarus code diatas ]]></b:skin>

/* Topbar Navmenu */
ul.topnav {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: black;
}
ul.topnav li {float: left;}
ul.topnav li a {
display: inline-block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
transition: 0.3s;
font-size: 17px;
}
ul.topnav li a:hover {background-color: orange;}
ul.topnav li.icon {display: none;}

@media screen and (max-width:680px) {
ul.topnav li:not(:first-child) {display: none;}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}

@media screen and (max-width:680px) {
ul.topnav.responsive {position: relative;}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}

Ubahlah tulisan yang berwarna merah dengan warna yang cocok untuk background kamu.
Kamu bisa mengubahnya dengan warna berbahasa inggris,bisa red,blue,orange atau yang lain karena warna background tampilannya akan seperti dibawah ini

Lalu Ubahlah tulisan yang berwarna biru dengan warna yang cocok untuk tampilan blogmu,sama seperti cara diatas dengan mengubah warna berbahasa inggris,bisa red,blue,orange atau yang lain karena bila kursor diarahkan ke salah satu menu akan seperti ini

Atau kamu bisa gunakan seperti code diatas saja agar hasilnya sama kayak digambar

Kedua taruh code ini di bawah<body>

<ul class="topnav" id="myTopnav">
<li><a href="/">Home</a></li>
<li><a href="/p/about.html">About</a></li>
<li><a href="/p/sitemap.html">Sitemap</a></li>
<li><a href="/p/kontak.html">Kontak</a></li>
<li><a href="/p/disclaimer.html">Disclaimer</a></li>

<li class="icon">
<a href="javascript:void(0);" onclick="myFunction()">☰</a>
</li>
</ul>

Ubahlah yang berwarna merah dengan link dari setiap lamanmu,atau kamu juga bisa mengedit about,sitemap,kontak,disclaimer dengan kata-kata sesukamu tapi kalau kamu belum membuat laman kamu bisa baca dibawah ada informasi tentang membuat laman

Ingat ganti yang berwarna merah dengan link dari setiap halaman yang ingin kamu tuju

Ketiga Taruh Kode ini diatas </body>

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
</script>

Selesai,sekarang Kamu sudah bisa membuat Tombol Navigasi Menu Diatas Header Blog dan saya ucapkan terima kasih kepada www.contohblog.com sebagai sumber ilmu dari membuat Tombol Navigasi Menu Diatas Header

Membuat Tombol Navigasi Menu Di Header Blog

Kedua saya akan Membuat Tombol navigasi Menu Di header Blog tetapi ini digunkan untuk anda yang menggunakan template dari blogger

Pertama kamu harus sudah mempunyai Laman Kontak,Kebijakan Privasi,Daftar Isi,Syarat dan Ketentuan,seperti yang dibundari

Bila anda belum membuat laman tersebut kalian bisa baca ini (Cara membuat Laman Kontak , Cara Membuat Laman Kebijakan Privasi , Cara Membuat Laman Syarat dan Ketentuan , Cara Membuat Daftar Isi) untuk membuatnya

Oke kalau kamu sudah membuat Laman maka selanjutnya Klik Tata Letak lalu Klik Tambah Gadget pada gambar yang dilingkari seperti dibawah ini

Selanjutnya kamu akan mebuka jendela baru seperti dibawah ini dan pilih Laman seperti yang dilingkari

Setelah itu kamu checklist semua dan klik simpan seperti gambar dibawah ini

Atau kamu ingin menambahkan Link halaman lain,kamu bisa klik Tambah tautan Eksternal,Jika kamu sudah melakukan semua itu makan hasilnya akan seperti dibawah ini

Selesai,sekarang kamu sudah bisa membuat Tombol Navigasi Menu di Header Blog

Membuat Tombol Navigasi Menu Pada Footer Blog

Untuk Membuat Tombol Navigasi Menu Pada Footer Blog seperti yang dilingkari diatas,ikutilah langkah-langkah berikut ini

Pertama Buka Blog kamu dan Klik Tata Letak dan arahkan kebawah lalu pilih Tambah Gadget seperti gambar dibawah ini

Setelah itu kamu akan masuk ke halaman gadget dan pilih HTML/Javascript

Setelah itu copy sript dibawah ini

<div style="text-align: center;"><a href="http://dirawan7.blogspot.co.id/p/kontak-saya.html">Kontak Saya||</a>
<a href="http://dirawan7.blogspot.co.id/p/kebijakan-privasi-untuk-httpdirawan7.html">Kebijakan Privasi||</a>
<a href="http://dirawan7.blogspot.co.id/p/syarat-dan-ketentuan-httpdirawan7.html">Syarat dan Ketentuan
</a>
</div>

Ganti tulisan yang berwarna merah dengan URL dari Laman yang telah kamu buat,Setelah itu biarkan saja judulnya dan klik Simpan

Udah gitu doang gan?

Yap!!! Memang cuman seperti itu

Itu dia 3 Cara membuat Tombol Navigasi Laman Pada Blog ,Semoga dapat bermanfaat bagi anda dan saya ucapkan terima kasih