CARA MENGHILANGKAN NAVIGASI DAN SIDEBAR BAWAAN CONTEMPO

bysufyan Yaan -
Kalau sobat perhatikan gambar peraga dibawah ini sobat mungkin pangling apa benar ini template contempo? Tampilan pada laptop, tablet dan pada layar ponsel tampak serasi. Namun pada layar desktop yang lebih besar akan sedikit beda karena sidebarnya masih terlihat. Saya sengaja membiarkan hal tersebut untuk memberi memaksimalkan template pada layar yang lebih besar.

Apa yang berbeda?
  1. Latar warna dibuang habis
  2. Heading di rombak habis
  3. Menu navigasi plus kotak pencarian bawaan dibuang mulai pada layar laptop hingga ponsel dan diganti dengan menu navigasi dan kotak pencarian buatan saya sendiri.
  4. Sedikit modifikasi struktur HTML/CSS

menjadi sangat berbeda setelah di modifikasi
Jika sobat bosan dengan tampilan Contempo bawaan (default) dan ingin merombak habis Navigasi serta menghilangkan sidebar Contempo atau menyederhanakan templatenya sobat bisa mencari kode dibawah ini (letaknya biasanya dibaris 2832 pada halaman HTML):

<b:if cond='data:view.isSingleItem'>
                  <a class='return_link' expr:href='data:blog.homepageUrl'>
                    <b:include data='{ button: true, iconClass: &quot;back-button rtl-reversible-icon flat-icon-button ripple&quot; }' name='backArrowIcon'/>
                  </a>
                <b:else/>
                  <b:include data='{ button: true, iconClass: &quot;hamburger-menu flat-icon-button ripple&quot; }' name='menuIcon'/>
                </b:if>

Hapus saja seluruh kode diatas dan save tema dan lalu ikuti petunjuk dibawah ini:

  1. Masuk kepengaturan blogger
  2. Pilih Tema
  3. Pilih tombol edit HTML
  4. Cari kode kode utama: </header>, </head> dan </body> saya tandai dengan huruf berwarna merah untuk mempermudah panduan.
Kalau sudah siap perhatikan kode dibawah ini yang saya sorot dengan warna warna: Biru,Kuning, Merah

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<style>
body {margin:0;font-family:Arial}

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

.topnav a {
  float: left;
  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>
</head>
<body>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Beranda</a>
  <a href="#news">Berita</a>
  <a href="#contact">Hubungi</a>
  <div class="dropdown">
    <button class="dropbtn">Dropdown 
      <i class="fa fa-caret-down"></i>
    </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 href="javascript:void(0);" style="font-size:15px;" class="icon" onclick="myFunction()">&#9776;</a>
</div>

<div style="padding-left:16px">
  <h2>Menu Navigasi responsive dengan "dropdown"</h2>
  <p>Untuk menguji menu navigasi ini responsive atau tidak, coba periksa halaman melalui hape dan laptop atau tablet sobat.</p>
  <p>Tentu saja tekan tombol "Dropdown" yang muncul pada barisan menu untuk memunculkan menu menu dropdown tersebut.</p>
</div>

<script>
function myFunction() {
  var x = document.getElementById("myTopnav");
  if (x.className === "topnav") {
    x.className += " responsive";
  } else {
    x.className = "topnav";
  }
}
</script>

</body>
</html>


  1. Kode kode yang saya sorot warna biru seluruhnya harus diletakan diatas kode </head>
  2. Kode kode yang saya soroti warna kuning seluruhnya harus diletakan diatas kode </header> bukan </head> ya. Cari saja dengan menekan ctrl+c pada keyboard laptop dan letakan seluruh kode yang saya sebutkan tadi diatas atau dibawah kode tersebut.
  3. Kode kode yang saya sorot warna merah seluruhnya harus diletakan diatas kode </body>
Save template. 
Jika sobat ada yang mencobanya dan terjadi error, atau belum mengerti bagaimana memasang link pada menu, jangan sungkan sungkan bertanya kepada kami ya...

Untuk membuktikannya silahkan lihat 
www.editblogtema.net
Tags

2 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Teguh 1978Februari 19, 2019

    mantab pak sofyan ... misal saya di kasih pasti terima dengan senang hati he hehe ...

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak