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 membuatkan 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 ialah itu, saya mengabadikan dan membagikan pengalaman tersebut melalui postingan ini.

Mengenal Fungsi Sticky


Apa sih bahwasanya 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 ialah pemilik blog memasang fungsi sticky pada templatenya.

Atau sobat juga sanggup eksklusif 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 eksklusif mempraktekannya.

#1. Fungsi Sticky Hanya Pada Widget

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

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

2. Tambahkan aba-aba 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 ialah ID widget yang akan dipasang fungsi sticky.

Kode #footer yang ditandai ialah ID widget sebagai pembatas selesai 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 aba-aba yang nantinya memfungsikan widget sanggup melayang. Pada aba-aba yang ditandai sesuaikan dengan ID widget yang ada di template sahabat. Dan untuk aba-aba top:25 silahkan sesuaikan sesuai kebutuhan. Kemudian untuk mengetahui ID widget caranya klik kanan pada widget diinginkan ↣ inspeksi ↣ maka elemen console akan terlihat. Sebagai teladan lihat aba-aba di bawah. Yang diberi tanda ialah 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 aba-aba sesuai dengan ID widget

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

Kedua teladan aba-aba 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 teladan 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 eksklusif 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 sajian 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://klinik-abna-autisme-indonesia.blogspot.com//search?q=cara.membuat.sticky.widget.di.sidebar.blog
https://klinik-abna-autisme-indonesia.blogspot.com//search?q=cara.membuat.sticky.widget.di.sidebar.blog
https://klinik-abna-autisme-indonesia.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

Inilah 5 Perbuatan Tegesa-Gesa Yang Menerima Pahala

Gambar
Perbuatan tergesa-gesa yang diperbolehkan dan menerima pahala - Sebagaimana kita ketahui bahwa perbuatan tergesa-gesa merupakan suatu perbuatan yang tidak baik pada akhirnya. Gegabah dalam melaksanakan suatu hal hanya akan membuahkan hasil yang jauh dari harapan. Sedangkan di dalam menjalani kehidupan, kita tentu selalu mengharap yang terbaik kedepannya. Oleh lantaran itu, untuk memilih sebuah keputusan harus benar-benar dipikir dengan matang. Jangan hingga salah mengambil langkah. Sebab, selain berdampak buruk pada hasil, juga akan berakibat fatal pada kehidupan masa depan. Penyesalan pun akan selalu menghantui pikiran. Bahkan di dalam Islam, secara tegas pertanda bahwa perbuatan tergesa-gesa yaitu merupakan perbuatan syetan. Setiap perbuatan syetan niscaya mengarah kepada keburukan dan akan menjerumuskan insan pada kesesatan, kegelapan, serta kejelekan. Namun, tahukah kalian bahwa ada 5 perbuatan tergesa-gesa yang menerima pahala? Ya, ternyata Islam pun menawarkan pengecualia...
Baca selengkapnya

Cara Memakai Psiphon Pro Di Windows Komputer / Laptop

Gambar
Bagaimana cara memakai Psiphon di PC windows – Entah bagaimana aku harus menciptakan judul, yang terperinci di sini aku akan menjelaskan pengalaman aku dalam memakai software psiphon di laptop semoga bisa internetan bebas tanpa tanpa batas. Psiphon yaitu sebuah aplikasi dengan memakai teknologi SSH, VPN, dan HTTP proxy semoga bisa internetan secara bebas dan aman. Psiphon tidak hanya mempunyai kegunaan untuk mengamankan privasi pengguna, namun juga bisa dipakai untuk menembus situs yang diblokir oleh pemerintah atau negara. Selama ini aku mengira bahwa Psiphon hanya tersedia untuk android saja, artinya hanya support dan bisa dipakai untuk perangkat smartphone saja. Namun nyatanya tidak, Psiphon juga bisa diunduh dan dipasang di windows. Bahkan di IOS pun juga support, dan bisa kita dapatkan melalui Apple App Store ataupun laman resmi Psiphon3. Biasanya ada beberapa pengguna yang aktif dengan internet butuh jangkauan terusan lebih dan kemanan privasi tinggi. Sebab terkadang a...
Baca selengkapnya

Bisakah Aku Menjadi Penulis Hebat? Ini Jawabannya!

Gambar
Mungkin banyak diantara kalian yang bercita-cita ingin menjadi penulis. Entah itu penulis blog, jurnalistik, atau hanya sekedar mengekspresikan jati diri melalui karya tulis. Namun banyak juga yang mengeluh dan berkecil hati sebelum mulai menjadi penulis. Ragu, malu, bahkan merasa tidak punya kemampuan sama sekali untuk menjadi penulis. Bisa disebabkan lantaran usia, pendidikan, dan faktor sosial. Padahal siapa saja niscaya bisa dan boleh menjadi seorang penulis. Tidak peduli anak-anak, remaja, tua, dokter, guru, insinyur, lulusan Sekolah Menengah Pertama / SMA, direktur, pejabat, petani, dan nelayan. Kita semua bisa boleh menjadi seorang penulis dan berhak memberikan kisah ataupun gagasan melalui karya tulis. Mengapa demikian? Sebab menjadi seorang penulis tidak butuh persyaratan akademis ibarat biaya pendaftaran, waktu pendaftaran, serta seleksi pendaftaran. Untuk menjadi penulis tidak perlu yang namanya sertifikat, ijazah, piagam, apalagi surat tertulis dari presiden. Pendek ...
Baca selengkapnya