CARA MEMBUAT HEADER PLUS NAVBAR STICKY PADA BLOGGER

Follow: sofyan Ya-an
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.
Desain header dan navbar template blogger
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:
  1. Responsif, mobile friendly
  2. 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.
  3. Memiliki Header dengan heading h1 (secara struktural bagus untuk blog)
  4. Tombol pencarian fullscreen.
  5. 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;
position: fixed;
right:0;
top:0;
width:auto;
z-index:8;
Robah kode fixed menjadi: relative.
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>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById(&quot;navbar&quot;);
var sticky = navbar.offsetTop;
function myFunction() {
  if (window.pageYOffset &gt;= sticky) {
    navbar.classList.add(&quot;sticky&quot;)
  } else {
    navbar.classList.remove(&quot;sticky&quot;);
  }
}
function openSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;block&quot;;
}
function closeSearch() {
document.getElementById(&quot;myOverlay&quot;).style.display = &quot;none&quot;;
}
</script>
Save Template. Jika terjadi kesalahan pemasangan jangan sungkan menghubungi kami melalui komen di bawah.  LIHAT DEMO

SHARE YA...

Comments