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- Buka Blogger dan login akun masing - masing.
- Pilih blog yang ingin di modifikasi.
- Pilih bagian template kemudian edit HTML.
- Cari kode <b:skin>
- 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;
} - 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
Sangant Bermanfaat nih, ngomong2 keren bener nih templatenya :v
ReplyDeleteHehehe iya gan makasih gan..
DeleteMasih belajar2 otak atik template gan sekalian share seputar tips trik blogspot..
Hehehe
mantap gan, keren templatenya
ReplyDeletewihh keren nih klo buat browser lain gk bsa ya gan?
ReplyDeleteBelum pernah coba pake browser lain gan..
DeleteNih saya yang pernah coba pake browser Chrome di Android
Nice artikel gan...
ReplyDeleteHehehe makasih gan dah berkunjung..
Deleteizin mencoba caranya gan
ReplyDeleteOke gan silahkan dicoba..
DeleteIzin coba yah, kak
ReplyDeleteSiap gan bisa dicoba gan..
DeleteMakasih gan atas infonya.Sangat bermanfaat.
ReplyDeleteMantap gan...
ReplyDeleteWah...sgat membantu sekali ini 😀
ReplyDeletewalah walaahhh gitu to caranya .. baru tau ane.. langsung praktek dah di blog ane
ReplyDelete