Cara Membuat Chrome Address Bar Tetap Muncul di Bagian Atas Halaman

Apakah mungkin membuat kolom address bar di browser Chrome selalu muncul di bagian atas layar saat pengunjung situs menggeser halaman kebawah? Sangat memungkinkan sekali membuat kotak alamat URL tetap menempel diatas halaman, tentu dengan begitu pengunjung akan lebih mudah melihat alamat situs dengan jelas dan trik ini cukup bagus untuk membantu pembaca mengingat link dari website tersebut.

Lantas bagaimana caranya untuk mengunci kolom address bar tetap berada di atas layar?
Kita bisa menggunakan trik modifikasi CSS, jadi pada bagian CSS yang akan kita beri modifikasi adalah dibagian tag html dan tag body.

Trik ini bersifat universal dikarenakan penggunaanya melalui editing kode CSS, namun pada artikel ini saya akan menuliskan detil prosesnya untuk versi Blogger.

Perhatikan langkah - langkah dibawah ini untuk memodifikasi kode CSS.

Solusi membuat address bar Chrome mobile tetap muncul

INGAT SELALU LAKUKAN BACKUP TEMPLATE TERLEBIH DAHULU

1. Buka Blogger dan login akun masing - masing.
2. Pilih blog yang ingin di modifikasi.
3. Pilih bagian template kemudian edit HTML.
4. Cari kode <b:skin>
5. Tambahkan kode CSS untuk elemen HTML dan elemen body seperti kode CSS dibawah ini di bagian <b:skin>
   
   html {
       overflow: hidden;
       height:100%;
   }
   
   body {
       height:100%;
       overflow-y: scroll;
       -webkit-overflow-scrolling:touch;
   }
6. Save template kemudian coba buka halaman menggunakan Chrome di ponsel.

Silahkan coba buka halaman situs kita sendiri, kemudian geser halaman keatas dan kebawah. Perhatikan bagian kolom address, seharusnya kolom tersebut akan tetap muncul di layar.

Trik ini pernah saya coba dan test hanya menggunakan browser Chrome, sedangkan efek untuk browser selain Chrome saya tidak menjamin akan sama.

Efek lain dari penggunaan trik modifikasi CSS untuk menahan address bar Chrome juga berdampak pada saat proses fetching konten di dalam Google Webmaster, kita mungkin tidak bisa menggeser halaman website saat berada di Fetch as Google bagian Rendering.

Jadi sudah tahu ya selain efek hasil modifikasi CSS untuk membuat kolom URL menempel diatas, juga ada efek samping di saat proses Fetching as Google.

Saya harap penjelasan dari tutorial ini bisa dimengerti termasuk efek sampingnya, agar tidak sampai terjadi gagal paham kedepannya.

Terima kasih

Artikel ini ditulis oleh :
Perbloggeran