CARA MEMBUAT MENU NAVIGASI BLOGGER YANG RAPI, LENGKAP DAN RESPONSIF

tampilan menu navigasi

Membuat navigasi menu tidaklah terlalu sulit, namun kriteria Navigasi blogger yang baik dan lengkap itu adalah:

Responsive kompatibel dipergunakan baik desktop, laptop, tablet maupun hape (smartphone)
Harus rapi dan enak dilihat, familiar bagi pengguna atau pengunjung blog
Memiliki menu dan submenu (opsi dropdown)
Tombol klik khusus saat tampil pada layar smarphone
Dilengkapi dengan menu atau tombol pencarian.
Warna bar dan huruf bisa diganti
Mudah dipasang

Nah sepulang kerja saya bermain di codepen "ngepen" disana mengutak atik HTML CSS. Hasilnya adalah atikel tutorial kali ini yang telah saya cobakan ke beberapa blog teman, bekerja sangat baik pada template lama dan pada varian varian terbaru template blogspot blogger.

Silahkan lihat DEMO terlebih dahulu: D E M O

Baiklah kita masuk kecara pembuatannya:

1. Tambahkan HTML

Masuk ke-pengaturan blogger>pilih tema>pilih edit HTML, pada halaman editor HTML cari kode <body> dan tambahkan kode dibawah ini tepat dibawah atau diatasnya.

<div class='Header1'/> <div class='topnav' id='myTopnav'>
<a class='active' href='/'><b><a expr:href='data:blog.homepageUrl'><data:blog.title/></a></b></a>
<a href='#news'>News</a>
<a href='#contact'>Contact</a>
<div class='dropdown'>
<button class='dropbtn'>Dropdown
<i class='fa fa-caret-down'/>
</button>
<div class='dropdown-content'>
<a href='#'>Link 1</a>
<a href='#'>Link 2</a>
<a href='#'>Link 3</a>
</div>
</div>
<a href='#about'>About</a>
<a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'><i class='fas fa-th fa-lg'/></a>
</div>
<div id='top-scrollbar'>
<div id='top-scrollbar-bg'>
</div>
</div>
<progress max='1' value='0'>
<div class='progress-container'>
<span class='progress-bar'/>
</div>
</progress>
<div style='padding:16px'>
<a class='icon' href='javascript:void(0);' onclick='myFunction()'/></div><div class='overlay' id='myOverlay'><span class='closebtn' onclick='closeSearch()' title='Close Overlay'>×</span><div class='overlay-content'><form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...dan tekan enter' size='25' type='text'/></form></div></div>
<button class='openBtn' onclick='openSearch()'><i class='fa fa-search' style='color:#000;'/></button>

2. Tambahkan CSS style
Masih pada halaman editor HTML cari kode </head> jika sudah ketemu tambahkan kode berikut dibawah ini tepat diatasnya.

<style>
body {margin:0;font-family:Arial}
.topnav {
overflow: hidden;
background-color: #fff;
position: fixed;
top:0;
z-index:99;
width: 100%;
border: solid;
border-color: #DCDCDC;
}
.topnav a {
float: left;
display: block;
color: #000;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.active {
background-color: #fff;
color: black;
}
.topnav .icon {
display: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 17px;
border: none;
outline: none;
color: black;
padding: 14px 16px;
background-color: inherit;
font-family: inherit;
margin: 0;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 100;
position: fixed;
}
.dropdown-content a {
float: none;
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.topnav a:hover, .dropdown:hover .dropbtn {
background-color: #fdd;
color: black;
}
.dropdown-content a:hover {
background-color: #fdd;
color: black;
}
.dropdown:hover .dropdown-content {
display: block;
}
@media screen and (max-width: 600px) {
.topnav a:not(:first-child), .dropdown .dropbtn {
display: none;
}
.topnav a.icon {
float: right;
display: block;
}
}
@media screen and (max-width: 600px) {
.topnav.responsive {position: fixed;}
.topnav.responsive .icon {
position: absolute;
right: 0;
top: 0;
}
.topnav.responsive a {
float: none;
display: block;
text-align: left;
}
.topnav.responsive .dropdown {float: none;}
.topnav.responsive .dropdown-content {position: relative;}
.topnav.responsive .dropdown .dropbtn {
display: block;
width: 100%;
text-align: left;
}
}
</style>
<style>
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.openBtn {
background: transparent;
border: none;
border-radius:180px;
border-color: transparent;
padding: 10px 15px;
font-size: 20px;
cursor: pointer;
position: fixed;
z-index: 99;
top: 6px;
right:9%;
}
.openBtn:hover {
background: transparent;
}
.overlay {
height: 62px;
width: 100%;
display: none;
position: fixed;
z-index: 100;
top: 0;
left: 19;
background-color:#DDDDDD;
}
.overlay-content {
position: relative;
top: 3%;
width: 100%;
text-align: center;
margin-top: 10px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 5px;
right: 11%;
padding: 0px 0px 0px 0px;
z-index: 99;
font-size: 40px;
cursor: pointer;
color: #87CEFA;
}
.overlay .closebtn:hover {
color: #000;
}
.overlay input[type=text] {
padding: 15px;
font-size: 17px;
border: solid;
border-color: transparent;
border-radius:0px;
float: left;
width: 100%;
background: #fff;
height: 56px;
}
.overlay input[type=text]:hover {
background: #fff;
}
.overlay button {
float: left;
width: 10%;
padding: 15px;
background: transparent;
font-size: 17px;
border: none;
cursor: pointer;
}
.overlay button:hover {
background: transparent;
}
</style>

3. Tambahkan JavaScript
Masih pada dihalaman editor HTML blogger, cari kode </body> dan letakan kode berikut tepat diatasnya:

<script>
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>

Terakhir Save Tema. Sebelum melakukannya silahkan back up template terlebih dahulu. Atau lakukan pada template percobaan. Jika menemukan kesuliatan silahkan komentar dibawah ini.

www.editblogtema.net

9 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

kuanyuJuni 20, 2019
Mantap mas,...mau bertsnya mas, cara memasang kode play store di bawah templete vio magz bagsimana mas ya, karena yang ada hanya tombol ig, fb, twitter saja
BalasHapus
Balasan
kuanyuJuni 21, 2019
Sip mas, saya cari dulu perbedaannya
BalasHapus
Balasan
Info Sobat SpotJuni 23, 2019
Thanks infonya om..
BalasHapus
Balasan
Muhammad RezaJuni 24, 2019
Jazakallahu khairan atas tutorialnya... sangat bermanfaat
BalasHapus
Balasan
Evi ErlindaSeptember 07, 2019
Keren banget !
Asik bisa utak atik blog sendiri.
BalasHapus
Balasan
Nasrul UmamSeptember 11, 2019
Bagi icon youtube di navigasi bawah mas ... 😁
BalasHapus
Balasan