Cara Menciptakan Widget Melayang Pada Sidebar Blog

Membuat widget melayang - Halo semuanya. Di sini saya tidak ingin menjelaskan bagaimana cara menciptakan widget melayang. Namun saya akan menyebarkan pengalaman ketika saya mempraktekkan cara menerapkan widget melayang atau lebih sering dikenal dengan sebutan sticky widget.

Di sini saya tidak ingin menjelaskan bagaimana cara menciptakan widget melayang Cara Membuat Widget Melayang Pada Sidebar Blog

Kenapa saya bilang demikian? Karena saya hanyalah blogger pemula yang belum mengerti apa-apa perihal bahasa pemrograman web. Bukan seorang programmer yang menguasai hal tersebut. Namun sebagai blogger pemula saya tidak ingin menyia-nyiakan ilmu yang pernah saya dapat. Oleh alasannya yaitu itu, saya mengabadikan dan membagikan pengalaman tersebut melalui postingan ini.

Mengenal Fungsi Sticky


Apa sih gotong royong fungsi sticky itu? Kata sticky merupakan kata dari bahasa inggris yang artinya lekat atau lengket. Sesuai terjemahannya, fungsi sticky pada blog berfungsi melekatkan beberapa tampilan di blogger. Artinya akan selalu tampil ibarat yang dikehendaki.

Pernahkah sobat melihat ada widget di samping artikel yang tetap tampil dan melayang mengikuti halaman? Atau pada header blog tetap tampak kelihatan walaupun discroll ke bawah. Kedua hal itu sanggup terjadi alasannya yaitu pemilik blog memasang fungsi sticky pada templatenya.

Atau sobat juga sanggup pribadi melihat di blog saya ini. Pada widget Artikel Terbaru di samping, ketika sobat scroll sampai paling bawah akan tetap tampil mengikuti halaman. Itulah yang saya maksud widget melayang (sticky).

Langkah Memasang Fungsi Sticky


Jika sobat benar-benar ingin memasang fungsi sticky atau hanya sekedar belajar. Silahkan ikuti panduan berikut dan segera dipraktekkan. Karena saya rasa akan percuma apabila sobat hanya memahami caranya saja tanpa pribadi mempraktekannya.

#1. Fungsi Sticky Hanya Pada Widget

Jika ini yang sobat terapkan maka yang akan tampil melayang yaitu hanya pada widget di sidebar saja. Berikut langkah-langkahnya:

1. Buka hidangan edit HTML pada blogger. (blogger ↣ tema ↣ edit HTML)

2. Tambahkan instruksi jQuery berikut sebelum </body>
<script type='text/javascript'> //<![CDATA[ // Sticky widget $(function(){if($("#HTML3").length){var o=$("#HTML3"),t=$("#HTML3").offset().top,i=$("#HTML3").height();$(window).scroll(function(){var s=$("#footer").offset().top-i-20,f=$(window).scrollTop();if(f>t?o.css({position:"fixed",top:25}):o.css("position","static"),f>s){var n=s-f;o.css({top:n})}})}}); //]]> </script>
Kode #HTML3 yang ditandai yaitu ID widget yang akan dipasang fungsi sticky.

Kode #footer yang ditandai yaitu ID widget sebagai pembatas simpulan fungsi sticky akan berfungsi.

Kode top:83 yang ditandai merupakan jarak pembatas antara header dan widget ketika discroll ke bawah.

Javascript jQuery di atas merupakan instruksi yang nantinya memfungsikan widget sanggup melayang. Pada instruksi yang ditandai sesuaikan dengan ID widget yang ada di template sahabat. Dan untuk instruksi top:25 silahkan sesuaikan sesuai kebutuhan. Kemudian untuk mengetahui ID widget caranya klik kanan pada widget diinginkan ↣ inspeksi ↣ maka elemen console akan terlihat. Sebagai pola lihat instruksi di bawah. Yang diberi tanda yaitu ID widgetnya.
<div class='widget HTML' data-version='1' id='HTML3'> atau <div class='comments' id='footer'>

3. Tambahkan CSS ibarat berikut sebelum </style> atau sanggup juga sebelum ]]></b:skin>
#HTML3{width:100%;max-width:255px}
Kode #HTML3 merupakan instruksi sesuai dengan ID widget

Kode max-width:255px merupakan instruksi untuk memilih lebar widget

Kedua pola instruksi pada CSS di atas sanggup saja berbeda dengan yang ada pada template sahabat. Makara silahkan sesuaikan dan atur sesuai kebutuhan. Jika dirasa sudah selesai silahkan simpan tema dan lihat hasilnya.

Apabila sobat masih kesulitan, sobat sanggup melihat dan mempelajarinya melalui pola di bawah ini. Perhatikan pada JS, CSS, serta HTML nya.

Contoh Sticky Hanya Pada Widget

Demikian cara menciptakan widget melayang pada sidebar blog yang pernah saya praktekkan. Apabila dalam klarifikasi di atas masih ada yang kurang dipahami, sanggup pribadi ditanyakan dan kita sanggup berguru bersama. Dan bagi yang sudah jago tolong kasih kritik dan saran apabila ada kesalahan.

Di atas merupakan cara menciptakan widget melayang pada sidebar blog saja. Lalu bagaimana cara menciptakan hidangan header melayang? Insya Allah akan saya pelajari dan akan saya bagikan pada kesempatan berikutnya.

Sebenarnya banyak cara yang sanggup kita lakukan untuk menciptakan fungsi sticky ibarat di atas. Namun berdasarkan saya cara di atas merupakan cara yang paling mudah. Jika berniat untuk memperdalam memahaminya, sobat sanggup mempelajari melalui link berikut:

Resources:
https://aquinosemascachicle.blogspot.com//search?q=cara.membuat.sticky.widget.di.sidebar.blog
https://aquinosemascachicle.blogspot.com//search?q=cara.membuat.sticky.widget.di.sidebar.blog
https://aquinosemascachicle.blogspot.com//search?q=cara.membuat.sticky.widget.di.sidebar.blog
http://stickyjs.com/
http://leafo.net/sticky-kit/

Komentar

Posting Komentar

Postingan populer dari blog ini

Kenali Tanda-Tanda Stres Sebelum Stres Melanda Pikiran Anda

Gambar
Stres merupakan keadaan atau kondisi dimana dimana seseorang mengalami beberapa gangguan mental atau pikiran yang sanggup kuat kepada kondisi fisik seseorang tersebut. Atau dengan kata lain stres merupakan keadaan seseorang pada kondisi yang paling tidak mengenakkan baginya. Tidak jarang beberapa orang sering mengalami stres yang disebabkan oleh hal-hal tertentu, entah itu lantaran beban pekerjaan, beban pikiran, beban kehidupan, ataupun lainnya. Salah satunya penulis juga tidak luput dari kondisi mengalami stres. Pernahkah anda mencoba mengundurkan diri dari pekerjaan anda? Mengapa anda tiba-tiba sering mengalami pusing? Kenapa rasanya malas sekali makan padahal sehari semalam belum makan? Entah disadari atau tidak, bahwa pikiran ingin berhenti kerja, sering pusing, dan kehilangan nafsu makan tersebut merupakan tanda atau tanda-tanda bahwa anda sedang dalam kondisi stres. Seseorang yang mengalami stres jikalau tidak segera diatasi dengan banyak sekali macam solusi maka sanggup b...
Baca selengkapnya

Hukum Mempelajari Haid Bagi Perempuan Dan Pria

Gambar
Darah haid merupakan darah yang mana tidak lagi sanggup dipisahkan dari huruf kita sebagai perempuan anak keturunan ibu hawa. Haid juga merupakan takdir yang ditetapkan oleh Allah kepada kita sebagai wanita. Oleh lantaran itu, agama Islam sangat menuntut kepada para penganutnya agar mempelajari dan mendalami ilmu haid. Bukan hanya para perempuan saja tetapi juga para laki-laki, baik yang sudah berumah tangga maupun yang belum berumah tangga. Mempelajari ilmu haid memang harus benar-benar diperhatikan oleh kita sebagai wanita, lantaran mungkin masih banyak diantara kita yang suda mengalami haid tetapi masih belum mengerti perihal hukum-hukum haid. Bahkan mungkin juga masih banyak ibu rumah tangga yang belum seberapa memahaminya. Dan juga harus benar-benar diperhatikan oleh pria mengingat antara pria dan perempuan diciptakan untuk saling berpasangan. Dan masih banyak lagi permasalahan haid yang harus dipelajari baik perempuan ataupun laki-laki. Kita semua niscaya sudah tahu bahwa p...
Baca selengkapnya

Inspiratif! 10 Orang Ini Tidak Membiarkan Kegagalan Memilih Hidup Mereka

Gambar
Setiap orang niscaya pernah mengalami kegagalan, tidak semua insan dalam kehidupannya selalu sukses dalam sekejap menggapai impiannya. Semua niscaya dilaluinya dengan niat besar lengan berkuasa dan usaha keras serta penuh tantangan yang bermacam-macam. Salah satunya yaitu kegagalan. Tidak jarang pula kegagalan tersebut membuatnya frustasi untuk meraih kesuksesannya. Padahal kegagalan bukanlah selesai dari segalanya. Apakah kegagalan akan menentukan kehidupan kita? Ataukah kita akan bangun kembali sesudah kegagalan? 10 Orang Ini Tidak Membiarkan Kegagalan Menentukan Hidup Mereka Berikut yaitu dongeng wangsit dari orang terkenal di dunia yang mengubah kegagalan menjadi kesuksesan. Orang-orang ini telah berhasil meraih kesuksesan dari kegagalan yang mereka alami. Semoga dongeng ini memberi wangsit kepada kita semua; menggugah kembali semangat kita disaat kita frustasi lantaran kegagalan yang kita alami. #1 Bintang Olahraga Glenn Cunningham Sebelum: Suatu ketika seorang anak ter...
Baca selengkapnya