MARI BELAJAR MEMBUAT NAVIGASI MENU BLOGGER DENGAN TOMBOL PENCARIAN | editblogtema editblogtema: MARI BELAJAR MEMBUAT NAVIGASI MENU BLOGGER DENGAN TOMBOL PENCARIAN

Logtema

×
tutorial dan teknik

MARI BELAJAR MEMBUAT NAVIGASI MENU BLOGGER DENGAN TOMBOL PENCARIAN

Trik ini berhasil saya terapkan kepada beberapa template terbaru blogger dan bekerja dengan baik, diantaranya: SOHO, EMPORIO, CONTEMPO dan template blogger TERKEMUKA.
membuat navigasi menu dengan kotak pencarian kaca pembesar
Halaman editor tempat editblogtema bereksprimen

Intinya jika sobat ingin tampilan beda pada template bawaan dan menjadi lebih SEO, sobat dapat menerapkan ini. Perhatikan Demo pembuatannya dengan mengikuti link dibawah ini jika sudah masuk jangan lupa klik terlebih dahulu  Run :

Lihat DEMO

Kelebihan menu navigasi hasil buatan kami adalah:
  1. Pastinya responsive
  2. Struktur dasar ringan 
  3. Dapat diterapkan pada template template bawaan blogger dengan mudah
  4. Tombol pencariannya adalah layar penuh.
Sedang kan demo untuk penerapannya pada template default (bawaan) blogger SOHO dapat sobat ikuti:

Lihat DEMO

Baiklah karena kami ingin sobat menerapkannya maka kami jelaskan bagaimana detail pembuatannya:

  1. Pilih salah satu tema blogger: SOHO, CONTEMPO, EMPORIO atau TERKEMUKA.
  2. Masuk kepengaturan blogger
  3. Pilih tema
  4. Pilih edit HTML
Pada halaman HTML sobat hanya perlu mengenali tag tag kode berikut: </head>, </header> dan </body> dan lalu perhatikan baik baik kelompok kode kode yang saya letakan dibawah ini:

1. TAMBAHKAN CSS 

Letakan kode dibawah ini diatas kode </head>:


<style>
body {
  font-family: Arial;
}

* {
  box-sizing: border-box;
}

.openBtn {
  background: transparent;
  border: none;
  padding: 15px 15px;
  font-size: 20px;
  cursor: pointer;
}

.openBtn:hover {
  background: #fff;
}

.overlay {
  height: 100%;
  width: 100%;
  display: none;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: rgb(100, 149, 237);
  background-color: rgb(100, 149, 237);
}

.overlay-content {
  position: relative;
  top: 46%;
  width: 80%;
  text-align: center;
  margin-top: 30px;
  margin: auto;
}

.overlay .closebtn {
  position: absolute;
  top: 20px;
  left: 45px;
  font-size: 60px;
  cursor: pointer;
  color: white;
}

.overlay .closebtn:hover {
  color: #ccc;
}

.overlay input[type=text] {
  padding: 15px;
  font-size: 17px;
  border: none;
  float: right;
  width: 80%;
  background: white;
}

.overlay input[type=text]:hover {
  background: #f1f1f1;
}

.overlay button {
  float: right;
  width: 20%;
  padding: 15px;
  background: #ddd;
  font-size: 17px;
  border: none;
  cursor: pointer;
}

.overlay button:hover {
  background: #bbb;
}
</style>
<style>
body {margin:0;font-family:Arial}

.topnav {
  overflow: hidden;
  background-color: #6495ED;
}

.topnav a {
  float: right;
  display: block;
  color: #f2f2f2;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
}

.active {
  background-color: #6495ED;
  color: white;
}

.topnav .icon {
  display: none;
}

.dropdown {
  float: left;
  overflow: hidden;
}

.dropdown .dropbtn {
  font-size: 17px;    
  border: none;
  outline: none;
  color: white;
  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: 1;
}

.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: #555;
  color: white;
}

.dropdown-content a:hover {
  background-color: #ddd;
  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: relative;}
  .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>


2. TAMBAHKAN HTML


Letakan kode dibawah ini diatas kode </header>:

<div class='overlay' id='myOverlay'>
  <span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
  <div class='overlay-content'>
    <form action='/action_page.php'>
      <input name='search' placeholder='Search..' type='text'/>
      <button type='submit'><i class='fa fa-search'/></button>
   </form>
  </div>
</div>
<div class='overlay' id='myOverlay'>
  <span class='closebtn' onclick='closeSearch()' title='Close Overlay'>&#215;</span>
  <div class='overlay-content'>
    <form action='/action_page.php'>
      <input name='search' placeholder='Search..' type='text'/>
      <button type='submit'><i class='fa fa-search'/></button>
    </form>
  </div>
</div>
<div class='topnav' id='myTopnav'>
 &#160;<a class='active' href='#home'>Beranda</a>
 &#160;<a href='#news'>Berita</a>
 &#160;<a href='#contact'>Hubungi</a>
  <div class='dropdown'>
    <button class='dropbtn'>Menu 
      <i class='fa fa-caret-down'/>
    </button>
    <div class='dropdown-content'>
 &#160; &#160; &#160;<a href='#'>Adelina</a>
 &#160; &#160; &#160;<a href='#'>Anissa</a>
 &#160; &#160; &#160;<a href='#'>Papa</a>
      <a href='#'>Lain lain</a>
    </div>
  </div> 
 &#160;<a href='#about'>Tentang kami</a>
  <a class='icon' href='javascript:void(0);' onclick='myFunction()' style='font-size:15px;'>&#9776;</a>

 <button class='openBtn' onclick='openSearch()'>
   
 <left><i class='fas fa-search fa-1x'/></left></button>

</div>

3. TAMBAHKAN JAVASCRIPT

Tambahkan kode JS dibawah ini diatas </body>

<script>
function myFunction() {
  var x = document.getElementById(&quot;myTopnav&quot;);
  if (x.className === &quot;topnav&quot;) {
    x.className += &quot; responsive&quot;;
  } else {
    x.className = &quot;topnav&quot;;
  }
}
</script>
<script>
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>

4. SAVE template.

masih kesulitan menerapkannya? Mengapa sungkan berdiskusi dengan kami? Kami saja belajar tidak pernah malu. Namanya ilmu pengatahuan sekecil apapun jangan di sepelekan.


www.editblogtema.net

Bagikan (share):

1 comment:

🌐请给我们一个礼貌的评论与任何相关的主题
⚘⚘Kami menghargai semua masukan
👫👫 Namun kami juga menjunjung tinggi kesopanan