Trik membuat Tombol sidebar navigasi fixed di kiri atas blogger

bysufyan Yaan -
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
Tags

4 Komentar

Silahkan berkomentar sesuai dengan topik kita ya...

  1. Lantana Magenta HermosaApril 10, 2019

    Keren banget wana headernya bsa gonta ganti..

    BalasHapus
    Balasan
    1. sufyan YaanApril 10, 2019

      Ya itulah hebatnya aba aba CSS dalam membentuk HTML

      Hapus
  2. Khairunnisa AstApril 11, 2019

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

    BalasHapus
  3. sufyan YaanApril 11, 2019

    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.

    BalasHapus
Lebih baru Lebih lama

Formulir Kontak