MENAMBAHKAN TOP MENU NAVIGASI RESPONSIVE PADA TEMPLATE BLOGGER CONTEMPO

MENAMBAHKAN TOP MENU NAVIGASI RESPONSIVE PADA TEMPLATE BLOGGER CONTEMPO

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

Beri Komentar ya..

4 Comments

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

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

    ReplyDelete
  3. Cara menambah kan button share sosial media di contempo ya bang.hehe ganti yang bawaan

    ReplyDelete
    Replies
    1. Sudah saya posting beberapa opsi keren: share button plus emoji:
      https://www.editblogtema.net/2018/11/cara-memasang-tombol-emoticon-reaction.html?m=1

      Atau :

      https://www.editblogtema.net/2018/11/cara-memasang-tombol-reactions.html?m=1

      Dua dua cara diatas sangat cocok buat templat contempo, tampilannya modern, ringan dan keren

      Delete

请给我们一个礼貌的评论与任何相关的主题
Just give us a polite comments with any related topics
Hanya komentar yang sopan dan berhubungan dengan topik