Langsung ke konten utama

TRIK TEMPLATE: MENAMBAHKAN MENU NAVIGASI TERSEMBUNYI RESPONSIVE PADA TEMA CONTEMPO

Sobat ingin membuat atau menambahkan menu navigasi responsive diatas halaman utama blogspot? Caranya simple saja. Menu yang saya sarankan ini sangat responsive dan mobile, mudah diterapkan pada tema blogger bawaan.
Tampilannya terlihat horisontal saat di buka melalui layar PC dan laptop, dan berubah menjadi dropdown responsive dengan tampilan tombol menu hamburger pada saat di buka melalui hape atau smartphone.
hanya terlihat ketika tombol pencarian di klik

TEMPLAT MANA MENU NAVIGASI INI DAPAT DITERAPKAN?

Sepanjang yang telah kami cobakan menu ini sukses mempercantik dan merobah tampilan tema tema bawaan (default) blogspot atau blogger seperti:
  1. Tema sederhana (setelah di edit jadi  lebihresponsive)
  2. Tema Awsome (setelah di edit jadi lebih responsive)
  3. Tema Perjalanan (setelah di edit jadi responsive)
  4. Contempo  (tidak perlu edit responsive, tinggal melakukan beberapa kustomisasi)
  5. Emporio  (tidak perlu edit responsive, tinggal melakukan beberapa kustomisasi)
  6. Soho  (tidak perlu edit responsive, tinggal melakukan beberapa kustomisasi)
  7. Dll.
Tentu saja sobat bisa memodifikasi template bawaan agar menjadi responsive terlebih dahulu sebelum menerapkan atau menambahkan menu responsive ini kedalam salah satu tema yang dipilih.

Akan tetapi saya akan membahas bagaimana membuat menu ini jadi "tersembunyi" pada tampilan tema contempo. Dan hanya akan terlihat pada saat tombol menu pencarian di pencet.

Langkah pertama: Masuk ke pengaturan blogger>>tema>>editHTML

Supaya ikon hamburger menu versi 5 bisa ditampilkan sobat harus menyertakan link dibawah ini ke dalam templat sobat, untuk load library ikonnya. Menjadi satu paket dengan kode HTML yang saya sertakan dibawahnya, kodenya adalah:

<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">

Langkah kedua tambahkan HTML.

Namun apabila sobat rasa link library dari font awsome lama sudah mencukupi maka lupakan link pada langkah pertama tadi, link dibawah ini sudah mencukupi.

Masuk ke pengaturan blogger>>pilih Tema >>EditHTML cari kode <b:include name='searchSubmit'/>
Copy dan pastekan kode dibawah ini di atas kode <b:include name='searchSubmit'/>

Kodenya adalah:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>

<div class="topnav" id="myTopnav">
  <a href="#home" class="active">Beranda</a>
  <a href="#news">Blog</a>
  <a href="#contact">Contact</a>
  <a href="#about">About</a>
  <a href="javascript:void(0);" class="icon" onclick="myFunction()">
    <i class="fa fa-bars"></i>
  </a>
</div>
Sobat bisa mengganti tulisan Beranda, Contact dan About dengan tulisan atau nama menu sobat sendiri. Dan sobat bisa mengganti tanda "#" dengan link terkait judul Beranda, contact dan about tadi.
Namun jika sobat ingin menampilkan menu diatas (tidak tersembunyi) cukup meletakannya diatas kode </header> pada tema contempo

Langkah ketiga tambahkan CSS, cari kode :
]]></b:skin> letakan kode dibawah ini diatasnya:

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

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

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

.active {
  background-color: #4CAF50;
  color: white;
}

.topnav .icon {
  display: none;
}

Langkah keempat: letakan media queries dibawah ini diatas kode </head>:


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

.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;
}

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

.active {
  background-color:#6495ED;
  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>

Langkah kelima: Tambahkan JavaScript dibawah ini tepat diatas kode </body>:

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

Save template sobat

Langkah keenam: menghilangkan atribusi powered by blogger pada tema terbaru blogger.
Sangat berguna dalam mendesain ulang templat bawaan blogger

Nah jika sobat memutuskan akan menggunakan trik ini pada template terbaru bawaan blogger seperti Comtempo, soho dan emporio, dan berniat menyembunyikan atau menghilangkan saja powered by blogger caranya adalah:

  1. Masuk kepengaturan blogger
  2. Pilih tema
  3. Pilih "sesuaikan"
  4. Akan muncul opsi blogger desainer
  5. Pilih advance atau lanjutan
  6. Scroll daftar menu yang muncul keatas
  7. Pada daftar paling bawah ada menu "tambahkan css" maka klik itu.
  8. Akan keluar kotak atau blanko kosong
  9. Copy kode dibawah ini dan pastekan kedalam blanko kosong CSS tadi: div.blogger {
    display: none;
    }
  10. Dan lalu simpan/Save tema. Hasil sebelum sesudah terlihat seperti pada gambar:
Sebelum dan sesudah di hilangkan
LIHAT DEMO
www.editblogtema.com

Komentar

  1. mantap nih boleh di coba nih gan, di tunggu folow back nya ya gan

    BalasHapus
  2. Terima kasih, bermanfaat sekali postingannya. Tapi agak takut utak atik..takut salah..hehe. Tapi panduannya lengkap banget...bisa dicoba..

    BalasHapus
  3. biar mudah untuk berkunjung dan berkomentar di blog sobat, izinkanlah ane untuk mem-follow blog sobat, terimakasih banyak :)

    BalasHapus
  4. Mas maaf jika kita ingin mengubah header judul Contempo menjadi sejajar dengan dengan menu pencarian bagaimana yah caranya? Dan membuatnya tetap di atas ketika di scroll.mohon pencerahan nya.

    BalasHapus
    Balasan
    1. Ada dua cara:
      Memindahkan header ke dalam section baru berarti harus membuat section dan widget baru artinya menambahkan html. Atau..cara lebih sederhana:
      Membuat h1 (header) baru dan menghapus header judul bawaan.

      Saya akan menuliskan tutorialnya. Untuk cara kedua jangan kuatir struktur blog tetap akan dapat nilai 10...

      Hapus

Posting Komentar

Populer

Cara memperbaiki add numbering dan add bullets yang tidak bisa tampil pada postingan blog

Hal ini terjadi pada tema editblogtema yang pada saat itu kami modifikasi untuk sementara berdasarkan tema sederhana bawaan blogger. Karena pada saat menuliskan beberapa item dalam bentuk daftar atau list ternyata tidak terlihat pada postingan padahal postingan sudah terlanjur di publish. Setelah saya cari di dasbor ada tool yang bernama "Add Numbering atau Numbered List dan Add Bullets atau Bulleted List" yang tidak bekerja. Sudah tentu ini pasti celah kelemahan template, jadi harus segera di perbaiki. Padahal kami tidak membuat template baru, lho. Hanya memodifikasi template tua bawaan dengan tajuk simple atau 'sederhana'. Ketika menulis pada dasbor blog dan di preview sepertinya tidak ada yang salah diatas tool "compose" terdapat add numbering dan add bullets tersebut dan pada saat dilakukan penulisan dalam bentuk list keduanya tampak berfungsi dengan baik, tapi apa yang terjadi pada saat artikel setelah di publish? Maksud menampilkan daftar atau li

PERIHAL GOOGLE PAGERANK dan ranking ALEXA

GOOGLE PAGERANK K alau dengan Google Pagerank jadi ingat saat membuka blogger tahun 2014 waktu itu Blog dengan Google Pagerank tinggi benar benar dijadikan "primadona"nya blogspot. Namun apa yang terjadi segalanya berubah. Google telah melakukan update algoritmanya secara besar besaran, dan kini walaupun pagerank masih penting namun telah berubah menjadi rahasia dapurnya Google. Selama bertahun tahun Google PageRank telah menjadi benchmark yang penting untuk menilai kualitas suatu website namun  pada April 2016 menjadi bulan yang penuh dengan kehebohan bagi komunitas pemasaran digital pada umumnya dan SEO (Search Engine Optimization) khususnya. Berbagai website dan blog terkemuka SEO sedunia banyak yang memberikan komentar mengenai hal tersebut. SearchEngineLand menyebutkan bahwa sejak Jumat, 15 April 2016, tiba tiba saja Google PageRank lenyap dari Google Toolbar! MASIH PENTINGKAH GOOGLE PAGERANK ITU? Ada yang berpendapat Google pagerank masih penting, tetapi tidak

JARINGAN INTERNET DAN TELEKOMUNIKASI TELKOMSEL RUSAK, PELANGGAN SANGAT DI RUGIKAN

Hey teman teman,  Aku di Indonesia sempat mau bikin konten tutorial dan itu seharusnya berjalan dengan baik, kalau tiba tiba saja jaringan internet tidak 'rusak'. Parahnya di tunggu berjam jam tidak juga aktif dari pukul satu atau pukul dua siang tadi. Mood aku buyar, karena ketika aku mendapatkan internet kembali draft aku sudah hilang separoh karena tidak ter-'save' pada saat internet hancur lebur tadi.  Sebagai gantinya aku menulis curhatan ini, maaf ya telkomsel, aku tidak menggunakan jaringan internetmu yang mahal, aku menulis sisi burukmu ini melalui jaringan internet Indosat. Kamu pasti mengerti mengapa aku marah. Karena jaringan internet terputus hingga sore tidak ada tanda tanda kehidupan. Awalnya aku menyangka karena quota internet sudah habis atau kartu halo belum bayar ya...eh gak mungkin! Tanya sama teman teman yang rata rata pengguna telkomsel. Yaaah sama. Mau tidak mau kalau masih terhubung harus beli kartu internet dari operator lain INDOSAT. Benar, dapa