Cara Membuat Sticky Widget/Element Pada Blog/Website

Coba anda scroll kebawah, dan lihat widget berwarna oren di sebelah kanan atau widget banner di sebelah kiri. Widget tersebut akan tetap tampil dan terus mengikuti saat anda menscroll ke bawah. Lalu, saat di scroll pada jarak 500 piksel dari bagian paling bawah blog, widget tersebut secara otomatis tidak mengikuti lagi. Menjadi normal seperti elemen lain di blog ini. Itulah sticky widget, yang akan saya bahas pada posting kali ini.

Sticky Widget/Element

Sebelum berlanjut lebih jauh, sebaiknya anda ketahui dulu manfaat dan rekomendasi penggunaan widget sticky ini. Penggunaan yang tepat pada widget sticky ini akan mengoptimalkan tampilan website anda. Sebaliknya, penggunaan yang kurang tepat, justru akan membuat website anda berantakan. Berikut ini beberapa hal yang harus anda ketahui sebelum menggunakan trik ini :

1. Penggunaan sticky widget paling baik adalah jika digunakan pada navigasi situs, seperti menu utama, kolom pencarian, artikel terkait dan sebagainya.

2. Letak penggunaan sticky yang bagus adalah pada sidebar

3. Widget yang dibuat sticky adalah widget yang benar-benar ingin anda tonjolkan dan memiliki desain yang rapi, sehingga tidak akan memperburuk desain

4. Sebaiknya, gunakan maksimal 2 sticky widget pada setiap halaman untuk menjaga kerapian halaman tersebut

5. Sesuaikan penggunaannya dengan jenis template yang anda pakai. Untuk template boxed dengan lebar yang kecil, sebaiknya kurangi pengguaan widget ini

6. Widget di buat sticky harus di tempatkan di bawah semua widget, agar tidak ada widget yang terhalangi nantinya.

7. Tidak hanya widget, anda juga bisa membuat elemen lain menjadi sticky (misalnya menu) dengan menambahkan atribut id “sticky” pada elemen div-nya. Lihat kode agar lebih jelas.

Intinya, pergunakan dengan bijak. Jangan sampai widget ini justru memperburuk perfomansi desain website anda.


Nah, untuk membuatnya, saya akan menggunakan plugin jquery bernama jquery lockfixed. Kelebihan menggunakan jquery lockfixed, anda bisa membuat sticky widget dalam jumlah banyak, dengan kode yang sedikit dan hasil yang bagus. Plugin jquery ini juga tidak akan memberatkan karena ukurannya kecil.

Sebenarnya, ada juga cara lain untuk membuat sticky widget ini tanpa menggunakan jquery lockfixed, melainkan dengan javascript murni atau jquery saja. Namun, Kedua cara lain itu harus menggunakan lebih banyak kode & kurang efektif jika anda ingin membuat sticky element lebih dari 1. Jadi, saya gunakan cara ini karena menurut saya lebih simple :D..

Untuk membuatnya silahkan simak kode & tutorial di bawah ini :

<div id=”sticky“>
Disini kode widget yang ingin dibuat sticky.. 
</div>
– Kode yang berwarna merah adalah nama id yang akan dijadikan sticky. Anda bisa mengubahnya menjadi kata apapun, asalkan sama dengan kode merah pada Javascript
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js”></script>
<script type=”text/javascript” src=”https://googledrive.com/host/0B5oDbHPeegKrcm9HZnRIaHZDQjA”></script>
<script type=”text/javascript”>
if (screen.width >= 768) {
(function($) {
$.lockfixed(“#sticky“,{offset: {top: 20, bottom: 500}});
})(jQuery);
}
</script>
– Kode warna hijau adalah untuk memanggil library jquery. Kebanyakan template blog sudah memilikinya, jadi sebaiknya jangan di sertakan. Kecuali jika template anda belum menambahkan kode tersebut/ sticky widget tidak work
– sticky harus sama dengan nama id pada html
– Kode berwarna biru adalah agar widget hanya sticky pada ukuran layar dengan lebar 768 piksel (layar tablet) atau lebih. Bisa anda sesuaikan sendiri atau hilangkan jika widget tetap ingin sticky pada HP.
20 Adalah jarak widget dalam ukuran piksel dengan batas toolbar browser atas
500 adalah jarak widget dalam ukuran piksel dengan bagian website paling bawah.

Untuk melihat demo, anda bisa lihat widget warna oren di sebelah kanan anda atau langsung kunjungi link di bawah.

DEMO

Cara menambahkan sticky widget pada blogger & WordPress

– Baik pada blogger maupun wordpress self hosted, tambahkan widget baru dengan tipe HTML/javascript (untuk blogger) atau tipe Text (untuk wordpress).

– Paste kan kode HTML di atas, yang isi widget-nya sudah di isi dengan widget yang ingin dibuat sticky. Lalu klik save.

[Khusus Blogger] Pilih menu Template > Edit HTML. Pastekan kode javascript di atas </body> (direkomendasikan agar tidak menambah beban loading), atau di atas </head>.

[Khusus WordPress Self Hosted] Pilih menu Appearance > Editor. Lalu pilih file Footer (footer.php) dan pastekan kode javascript di atas </body> (direkomendasikan agar tidak menambah beban loading). Atau pilih file Header (header.php) dan pastekan kode javascript di atas </head>

40 Comments

  1. gan, cara bikin tampilan Beranda blog sama kaya website agan ini gimana ya?
    Jadi pengennya di beranda blog tuh, ada preview postingan dikit, gambarnya satu dalam ukuran kecil, dan dibuat dua kolom sejajar, trus kebawah ada 5 baris,
    tapi ga pake template ya, soalnya mau bikin sendiri.
    Makasih sebelumnya.

    • Susah jelasinnya mas.. Banyak cara untuk buat seperti itu.. Dan saya rasa, kalo mas-nya memang sudah bisa buat theme sendiri pasti ngerti cara membuatnya, dengan HTML & styling CSS..

      kalo belum begitu mahir, lebih baik cari template yang ada saja. terus disesuaikan/diedit agar sesuai keinginan kita

  2. trims ya gan tutorialnya 🙂

  3. Terimakasih ka infonya, izin share 🙂

  4. 1 kode sticky bisa untuk banyak widget atau bagaimana?

  5. Kalo yang mau di buat sticky itu bagian page gimana kak???

  6. Mantap Postingan nya seperti yang saya cari untuk Cara Pasang Widget Iklan

  7. gan kok di ane gk bisa sticky yah?? pencerahannya gan

  8. ini memang jos. tadinya kupikir kalau pakai sticky trus layar dikecilnya stickynya nutupi. syukurlah akhirnya ane dapat ilmu ini. terimakasih banyak sobat.

  9. Yang HTML mksdnya apa? Itu id sticky bisa diganti dgn apapun.
    Dan bawahnya, bisa diisi dengan kode widget yang ingin dijadikan sticky mksdnya apa?

  10. Wah keren artikelnya,
    Thanks admin langsung uji coba di website ku ..
    Terimakasih.

  11. ini yang tak cari2..
    kemaren pernah pake plugin tpi bkin berat banget..
    mksih scriptnya mas..
    membantu sekali..
    blogger wordpress bisa kan pake cara ini..mantap..

  12. Sip, mantap infonya. 😀

  13. Terimakasih , langsung saya praktekan dan sukses . Cuma kadang blog ga bisa di akses sampai footernya

  14. Ini yang di cari,
    detail sama maksud tiap angkanya, 😀 Hehehe

  15. terimakasih atas infonya gan

  16. Kunjung Balik ya gann 😀 ,, Maklum Newbee

  17. Kok kode js ga kelihatan bos, gimana mau masangnya

  18. makasi saya akan coba

  19. Makasih mas.. tips da tutor nya.. 🙂 berhasil…

  20. mnatap gan makasih infonya

Tinggalkan Balasan