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

25 komentar

dengan begitu sticky pada widget akan tetap sempurna mengikuti bentuk dan ukuran perangkat yang pengunjung gunakan ya Mas, perlu di coba ini mas.

contohnya seperti apa ya sob?

jadi lebih bagus bila sticky ini memngikuti berbagai ukuran layar yamas

Iya bener banget mas :)
Soalnya kalau tidak diakali seperti di atas akan menghalangi konten.

Bisa dilihat pada Blog Kang Ismet, coba untuk mengecilkan resolusi browser. Pasti sosial medianya akan menutupi layar.

Yap mas, biar bersahabat dengan semua pengunjung dari berbagai perangkat :)

Menggunakan template responsive sy kira bukan lagi tren mas.. tetapi sebuah kebutuhan. Mengingat saat ini banyak sekali pengguna gadget yang mengakses internet melalui gadget mereka.

Beberapa hari nggak kesini, ternyata udah ganti template yia Bos, hehehe...

Eh.. itu berarti dimatikan fixednya kalau diperangkat kecil yia bos, ternyata sangat simple sekali caranya..

ijin praktek Bos...

Hehe iya juga sih, memang sekarang menjadi sebuah kebutuhan :)

Hehe iya gan, ganti warna lagi biar berubah suasananya :D

Iya tapi saya sebenarnya belum terlalu mengerti dengan HTML, JS, dan CSS jadi mohon masukannya ;)
Contohnya kayak template ini atau Evo Template milik Mas Sugeng juga sudah menyesuaikan stickynya :)

betul mas, saya juga sesuaikan blog toko online saya jadi responsive

Biar bisa merangkul semua pengguna internet :)

Mantap dah tutorialnya mas prisma :D

Inilah tutorial yang lagi dicari..mantep infonya thank's banget :)

Hehe masih belajar kok mas tentang kode-kode beginian :)

Iya sama-sama semoga membantu :)

script yang mirip kayak diatas ngga ketemu2 mas :3

Templatenya sudah responsive apa belum ?
Bisa kasih linknya ?

Secara teori, css position relative hanya perlu ditambahkan ke device width full ( sidebar ke bawah ) karena css itu akan berlaku juga untuk semua device dengan width yang lebih rendah. Tapi ini hanya teori hehehe... kode widget sticky yg saya gunakan berbeda dengan yang ab gunakan. Sticky sy tidak bisa diatasi dengan css karena tidak punya css :'( mungkin sy harus menggunakan sticky yang ada di blog agan :D

Wah kayaknya ilmu saya tentang CSS jauh dari agan, saya masih sangat jauh dari kata menegerti hehehe :D
Pelru belajar lagi nih kayaknya :)

Alhamdulillah :D iya sama-sama :)

Wih keren2... tapi mah bingung saya nya...
soalnya gak bisa responsife kayak gitu....

Yang apanya mas ? Template atau widgetnya ?

Isikan komentar Anda dengan bijak.