Help you by sincere

November 1, 2018

MENAMBAHKAN TOP MENU NAVIGASI RESPONSIVE PADA TEMPLATE BLOGGER CONTEMPO

2
Contempo adalah salah satu tema dari 3 tema default (tema bawaan asli) blogger yang terbaru, dengan sedikit merombak heading, menambahkan breadcrumb, contempo akan menjadi sebuah templat yang gegas, responsive dan sangat mobile friendly! Bagaimana merombak tema contempo agar menjadi dinamis heading akan kami sampaikan secara terpisah.
Namun yang ingin kita bagikan kali ini bukan mengenai merombak heading template contempo tetapi seperti biasa kami akan menunjukan cara bagaimana menambahkan menu Navigasi yang responsive diatas header template yang satu ini sehingga terlihat beda daripada aslinya.

  1. Masuk kepengaturan blog
  2. pilih Tema
  3. Pilih editHTML

LANGKAH PERTAMA: TAMBAHKAN  CSS

Cari kode </head> dan letakan kode dibawah ini diatasnya:

</script>
  </b:if>
<style>
body {
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

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

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

.topnav a:hover {
  background-color: #fff;
  color: black;
}

.active {
  background-color: #fff;
  color: white;
}

.topnav .icon {
  display: none;
}

@media screen and (max-width: 600px) {
  .topnav a:not(:first-child) {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;
  }
}
</style>
<link href='https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css' rel='stylesheet'/>

LANGKAH KEDUA: TAMBAHKAN HTML.

Cari kembali kode </head> pada langkah pertama tadi, lalu letakan kode dibawah ini, di bawah kode </head> tadi:

<div style='padding-left:16px'>
</div>        
  <body>
<div class='topnav' id='myTopnav'>
  <a class='active' href='/'><i aria-hidden='true' class='fa fa-home'/>
Home</a>
  <a href='#news'><i aria-hidden='true' class='fa fa-plus-circle'/>Berita</a>
  <a href='#contact'><i aria-hidden='true' class='fa fa-phone'/>Hubungi</a>
  <a href='#about'><i aria-hidden='true' class='fa fa-globe'/>tentang</a>
  <a class='icon' href='javascript:void(0);' onclick='myFunction()'>
    <i class='fa fa-bars'/>
  </a>
</div>

LANGKAH KETIGA: TAMBAHKAN KODE JS <JavaScript>

Cari kode </body> dan lalu letakan kode dibawah ini di atasnya:

<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>

Terakhir SAVE tema Contempo anda dan lihat 

DEMO

2 comments:

  1. Dulu saya pakai template bawaan blogger, tpi lupa nama templatenya.

    ReplyDelete
  2. Saya lebih sering pakai tema bawaan yang telah dimodifikasi

    ReplyDelete

Follow