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 profesiona
l
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
