 |
| tampilan menu navigasi |
- 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'>2. Tambahkan CSS style
<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>
Masih pada halaman editor HTML cari kode </head> jika sudah ketemu tambahkan kode berikut dibawah ini tepat diatasnya.
<style>3. Tambahkan JavaScript
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>
Masih pada dihalaman editor HTML blogger, cari kode </body> dan letakan kode berikut tepat diatasnya:
<script>Terakhir Save Tema. Sebelum melakukannya silahkan back up template terlebih dahulu. Atau lakukan pada template percobaan. Jika menemukan kesuliatan silahkan komentar dibawah ini.
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>
www.editblogtema.net