27 Maret 2015

Responsive Sticky Widget Pada Sidebar Blog

Sekarang tren-nya adalah menggunakan template yang responsive karena bisa menyesuaikan dengan berbagai ukuran layar perangkat yang digunakan untuk mengakses suatu web / blog. Dengan template yang responsive maka tampilan blog kita menjadi selalu tampil menarik. Serta membuat nyaman dan betah para pengunjung.

Sticky Sidebar Blog

Untuk widget sendiri secara otomatis akan ikut responsive juga jika kita sudah mengatur template menjadi responsive, tapi bagaimana untuk sticky widget pada sidebar blog yang kita tambahkan ? Nah, sticky sendiri sebenarnya digunakan agar widget selalu melayang dan selalu dilihat oleh pengunjung, tetapi masalahnya ketika menggunakan perangkat dengan ukuran layar kecil maka sticky widget tadi akan menutupi layar karena ukuran layar yang terlalu kecil.

Baca juga : Sticky Widget Pada Sidebar Blog

Oleh karena itu kita harus mengakalinya dengan mengolah CSS agar widget tersebut bisa menyesuaikan dengan perangkat yang berukuran layar kecil. Kita perhatikan dulu CSS untuk membuatnya melayang, yaitu :
.sticky {
  position:fixed;
  top:10px;
  z-index:100;
}

Kode position:fixed maksudnya adalah posisi dari elemen fixed akan tetap berada posisi yang ditentukan walaupun browser diperbesar / diperkecil atau digulung ke atas atau ke bawah. Maka kita harus mengubahnya menjadi position:relative agar posisi yang dimiliki elemen di mana letak penempatannya berpatokan kepada elemen yang menampungnya. Tetapi jika mengubahnya langsung menjadi positon:relative maka sticky widget ini tidak akan menempel. Jadi mari kita simak langkah di bawah ini.

Cara Membuat Responsive Sticky Widget :

  1. Login akun blogger Anda.
  2. Lalu pilih Template > Edit HTML
  3. Di sini saya asumsikan template Anda sudah responsive, maka cari kode yang hampir sama dengan :
    @media screen and (max-width:759px) {.tinynav2, #search-top, .tinynav1 {display:block;}}
    @media screen and (max-width:634px) {.tinynav2 {width:550px;}}
    @media screen and (max-width:594px) {.tinynav2 {width:430px;}}
    @media screen and (max-width:474px) {.tinynav2 {width:370px;}}
    @media screen and (max-width:394px) {.tinynav2 {width:294px;}}
    @media screen and (max-width:314px) {.tinynav2 {width:218px;}}
  4. Kemudian tambahkan kode .sticky {position:relative; width:100%; right:auto;}, maka akan menjadi seperti ini :
    @media screen and (max-width:759px) {.tinynav2, #search-top, .tinynav1 {display:block;} .sticky {position:relative; width:100%; right:auto;}}
    @media screen and (max-width:634px) {.tinynav2 {width:550px;} .sticky {position:relative; width:100%; right:auto;}}
    @media screen and (max-width:594px) {.tinynav2 {width:430px;} .sticky {position:relative; width:100%; right:auto;}}
    @media screen and (max-width:474px) {.tinynav2 {width:370px;} .sticky {position:relative; width:100%; right:auto;}}
    @media screen and (max-width:394px) {.tinynav2 {width:294px;} .sticky {position:relative; width:100%; right:auto;}}
    @media screen and (max-width:314px) {.tinynav2 {width:218px;} .sticky {position:relative; width:100%; right:auto;}}
  5. Kemudian simpan template.
Sekarang silakan dicek apakah sudah sesuai atau belum pada perangkat dengan ukuran layar kecil, bisa dicek dengan cara mengecilkan ukuran browser atau bisa juga dicek menggunakan laman Responsinator. Apabila ada salah mohon untuk dikoreksi, selamat mencoba.

Baca juga : Cara Membuat Tombol Download Keren

Isikan komentar Anda dengan bijak.