Tempat belajar blogspot

Cara Membuat Chrome Address Bar Tetap Muncul di Bagian Atas Halaman


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

15 comments:

  1. Sangant Bermanfaat nih, ngomong2 keren bener nih templatenya :v

    ReplyDelete
    Replies
    1. Hehehe iya gan makasih gan..
      Masih belajar2 otak atik template gan sekalian share seputar tips trik blogspot..
      Hehehe

      Delete
  2. wihh keren nih klo buat browser lain gk bsa ya gan?

    ReplyDelete
    Replies
    1. Belum pernah coba pake browser lain gan..
      Nih saya yang pernah coba pake browser Chrome di Android

      Delete
  3. Makasih gan atas infonya.Sangat bermanfaat.

    ReplyDelete
  4. walah walaahhh gitu to caranya .. baru tau ane.. langsung praktek dah di blog ane

    ReplyDelete

1. Berkomentarlah dengan sopan.
2. Berdiskusilah dengan bijak.
3. Dilarang SPAM.
4. Dilarang SARA.
5. Dilarang menuliskan tautan link.

Featured Post

Apa itu CSS Syntax dan Selector

CSS ( Cascading Style Sheet ) sudah dijelaskan mengenai pengertian CSS pada artikel sebelumnya Apa itu CSS , namun pada artikel yang sekara...