Trik membuat Tombol sidebar navigasi fixed di kiri atas blogger

responsive, user friendly, mudah dipergunakan
Setelah membuat warna header menjadi memiliki kemampuan gonta ganti warna secara otomatis menurut ukuran layar, misalnya:
  1. Jika dibuka melalui hape warnanya jadi abu abu
  2. ketika dibuka melalui tablet dengan posisi potrait warnanya jadi biru
  3. Jika dibuka melalui tablet dengan posisi landscap (dimiringkan) maka warna header blognya akan berubah jadi kuning.
  4. Dibuka melalui laptop/PC warna header akan menjadi pink
Saya menyadari kekurangannya, yakni tidak memiliki menu navigasi. Jangan kuatir kita dapat menyiasatinya dengan cara yang unik! Lagi lagi hanya membutuhkan elemen HTML CSS.

Menu navigasi sidebar ini sangat responsive menggunakannya cukup hanya dengan menyentuhnya maka akan muncul sebuah menu dengan gerakan animasi full "opened" dan tentu saja hal ini akan sangat berguna bagi sebuah navigasi menu dengan style beda. Jangan lupa saya sudah menempatkan tombol modifikasi bawaan contempo pada ujung kanan header berwarna.

Menu ini juga telah saya buat fixed

Cara penerapannya adalah sebagai berikut:

1. TAMBAHKAN CSS:
  • Masuk kepengaturan atau dasbor blogspot sobat
  • Pilih tema atau theme
  • Pilih Edit HTML
  • cari kode </head> lalu letakan kode css berikut diatasnya:
<style>
#mySidenav a {
  position: fixed;
z-index:90;
  left: -80px;
  transition: 0.3s;
  padding: 15px;
  width: 100px;
  text-decoration: none;
  font-size: 20px;
  color: white;
  border-radius: 0 0px 50px 0;
}
#mySidenav a:hover {
  left: 0;
}
#a {
  top: 20px;
  background-color: #4CAF50;
}
#b {
  top: 80px;
  background-color: #2196F3;
}
#p {
  top: 140px;
  background-color: #f44336;
}
#contact {
  top: 200px;
  background-color: #555
}
</style>

Save template.

2. TAMBAHKAN HTML

Masih pada posisi HTML editor jika kode diatas kita letakan diatas kode </head> maka letakan kode berikut ini tepat dibawah kode </head> (atau sobat bisa meletakannya diatas kode <body> 

<div id="mySidenav" class="sidenav">
  <a href="/" id="a">Beranda</a>
  <a href="#" id="b">Perihal</a>
  <a href="#" id="p">Kontak</a>
 </div>

Save template.

Lihat DEMO
Jika ingin menambahkan link navigasi tinggal memasukan url yakni dengan cara mengganti '#" dengan link yang sobat inginkan.

www.editblogtema.net


Comments

  1. Keren banget wana headernya bsa gonta ganti..

    ReplyDelete
    Replies
    1. Ya itulah hebatnya aba aba CSS dalam membentuk HTML

      Delete
  2. Sebenarnya saya mau nerapin sider fix disebelah kiri, namun pada template yang sudah saya pakai. Tapi bingung nerapin kodenya. Kemampuan saya memang terbatas.

    ReplyDelete
  3. mbak @Khairunnisa Ast. Jika "Mari Ngenet" dan "Resensi Si Punguk" yang mbak Nisa maksud, Tidak perlu menambah sidebar karena templat itu buatan Arlina dibuat berdasarkan tema blogspot yang lebih tua (setelah saya periksa melalui halaman inspect elemen). Saya sarankan jika ingin menerapkan ini lebih baik menggunakan template terbaru blogspot seperti Contempo, soho, emporio dan terkemuka..

    Hanya tinggal menambah aba aba CSS kok. Membiasakan diri dengan CSS pada templat itu mudah asalkan mau sedikit bersabar.

    ReplyDelete

Post a Comment

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

Popular Minggu ini:

MEMPERBAIKI ADD NUMBERING DAN ADD BULLETS YANG TIDAK BISA TAMPIL PADA POSTINGAN BLOG

AUTODIDACT, WHY YOU FAIL TO PERFORM IT

INI DIA UKURAN GAMBAR TERBARU YANG IDEAL UNTUK KONTEN BLOG AMP