Cara yang akan kami saya tunjukan kali ini adalah bagaimana membuat header sekaligus navbar (menu navigasi) untuk blogger. Kalian dapat menerapkannya pada template blogger terbaru seperti contempo. Syaratnya: Hapus atau nonaktifkan header bawaan dan tombol search bawaan contempo melalui pengaturan dasbor blogger.
Saya sendiri lebih memilih menghapus semua elemen elemen yang akan saya ganti dengan elemen baru yang akan saya buat.
Fitur fiturnya:
Atau robah nilai 0 pada top menjadi: 100.
Save tema.
 |
| Desain header dan navbar template blogger |
Saya sendiri lebih memilih menghapus semua elemen elemen yang akan saya ganti dengan elemen baru yang akan saya buat.
Fitur fiturnya:
- Responsif, mobile friendly
- Memiliki fitur sticky dan fixed sekaligus (Jika halaman di scroll keatas Judul ikut naik, namun navbar akan berhenti dan tetap tampil pada bagian atas blog.
- Memiliki Header dengan heading h1 (secara struktural bagus untuk blog)
- Tombol pencarian fullscreen.
- simple
1. Langkah pertama: Buang fungsi sticky header bawaan blog contempo
Dan melalui dasbor blogger pilih pengaturan kembali, pilih theme, dan pilih edit HTML.
Pada halaman HTML template contempo Cari kode pengaturan CSS berikut:
centered-top-container.sticky{Dan di bawahnya ada sederet kode CSS berikut:
left:0;Robah kode fixed menjadi: relative.
position: fixed;
right:0;
top:0;
width:auto;
z-index:8;
Atau robah nilai 0 pada top menjadi: 100.
Save tema.
2. Langkah kedua menambahkan kode pengaturan CSS
Letakan kode CSS berikut tepat di atas kode </head>:
<style>
body {
margin: 0;
font-size: 18px;
font-family: IM Fell English;
z-index:999
}
.header {
background-color: #333;
padding: 10px;
height: auto;
text-align: center;
z-index:999
}
#navbar {
overflow: hidden;
background-color: #333;
z-index:999
}
#navbar a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
z-index:999
}
#navbar a:hover {
background-color: #ddd;
color: black;
z-index:999
}
#navbar a.active {
background-color: #ff0000;
color: white;
z-index:999
}
.content {
padding: 16px;
}
.sticky {
position: fixed;
top: 0;
width: 100%;
}
.sticky + .content {
padding-top: 60px;
}
body {
font-family: Arial;
}
* {
box-sizing: border-box;
}
.tombolbuka {
background: transparent;
border: transparent;
padding: 0px 0px;
font-size: 20px;
cursor: pointer;
position: absolute;
z-index: 100;
top: 134px;
right:14%;
color: transparent;
}
.tombolbuka:hover {
background: transparent;
position: fixed;
}
.overlay {
height: 100%;
width: 100%;
display: none;
position: fixed;
z-index: 101;
top: 0;
left: 0;
background-color: rgb(0,0,0);
background-color: rgba(0,0,0, 0.9);
}
.overlay-content {
position: relative;
top: 46%;
width: 80%;
text-align: center;
margin-top: 30px;
margin: auto;
}
.overlay .closebtn {
position: absolute;
top: 35%;
right: 50%;
font-size: 60px;
cursor: pointer;
color: white;
z-index: 101;
}
.overlay .closebtn:hover {
color: #ccc;
}
.overlay input[type=text] {
padding: 19px;
font-size: 17px;
border: dotted;
float: left;
width: 80%;
background: white;
}
.overlay input[type=text]:hover {
background: #f1f1f1;
}
.overlay button {
float: left;
width: 20%;
padding: 15px;
background: #ddd;
font-size: 17px;
border: dotted;
cursor: pointer;
}
.overlay button:hover {
background: #bbb;
}</style>
3. Langkah ketiga menambahkan kode HTML
Letakan kode HTML berikut tepat di bawah kode </head>:
<div class='header'>
<h1><a class='header' href='/'><font color='white'><large><data:blog.title/></large></font></a></h1>
</div>
<div id='navbar'>
<a class='active' href='/'>Home</a>
<a href='javascript:void(0)'>Privacy</a>
<a href='javascript:void(0)'>Blog</a>
</div>
4. Langkah keempat Tambahkan HTML/ php.
Tambahkan kode HTML berikut tepat di bwah kode <body>:
<div class='overlay' id='myOverlay'>
<span class='closebtn' onclick='closeSearch()' title='Close Overlay'><svg style='width:64px;height:64px' viewBox='0 0 24 24'>
<path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' fill='red'/>
</svg></span>
<div class='overlay-content'>
<form action='/search' id='searchthis' method='get' style='display:inline;'><input id='search-box' name='q' placeholder='cari...' size='25' type='text'/>
<button type='submit'><svg style='width:24px;height:24px' viewBox='0 0 20 20'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='currentColor'/>
</svg></button>
</form>
</div>
</div>
<button class='tombolbuka' onclick='openSearch()'><svg style='width:26px;height:26px' viewBox='0 0 24 24'>
<path d='M9.5,3A6.5,6.5 0 0,1 16,9.5C16,11.11 15.41,12.59 14.44,13.73L14.71,14H15.5L20.5,19L19,20.5L14,15.5V14.71L13.73,14.44C12.59,15.41 11.11,16 9.5,16A6.5,6.5 0 0,1 3,9.5A6.5,6.5 0 0,1 9.5,3M9.5,5C7,5 5,7 5,9.5C5,12 7,14 9.5,14C12,14 14,12 14,9.5C14,7 12,5 9.5,5Z' fill='#fff'/>
</svg></button>
5. Langkah kelima Tambahkan kode Javascript.
Tambahkan kode javascript berikut dan letakan tepat di bawah tag penutup </body>:<script>Save Template. Jika terjadi kesalahan pemasangan jangan sungkan menghubungi kami melalui komen di bawah. LIHAT DEMO
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
function openSearch() {
document.getElementById("myOverlay").style.display = "block";
}
function closeSearch() {
document.getElementById("myOverlay").style.display = "none";
}
</script>
Salam Mas....
BalasHapusSaya sudah coba tapi ngak berhasil, sudah coba bbrp kali tetap saja gagal, Mohon pencerahan mas....
Terima kasih