Jumat, 14 April 2017

Cara Membuat Widget Melayang Pada Sidebar Blog

Tags

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

Membuat Widget Melayang

Kenapa saya bilang demikian? Karena saya hanyalah blogger pemula yang belum mengerti apa-apa tentang 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 karena itu, saya mengabadikan dan membagikan pengalaman tersebut melalui postingan ini.

Mengenal Fungsi Sticky


Apa sih sebenarnya 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 seperti yang dikehendaki.

Pernahkah sahabat 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 bisa terjadi karena pemilik blog memasang fungsi sticky pada templatenya.

Atau sahabat juga bisa langsung melihat di blog saya ini. Pada widget Artikel Terbaru di samping, ketika sahabat scroll hingga paling bawah akan tetap tampil mengikuti halaman. Itulah yang saya maksud widget melayang (sticky).

Langkah Memasang Fungsi Sticky


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

#1. Fungsi Sticky Hanya Pada Widget

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

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

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

Kode #footer yang ditandai adalah ID widget sebagai pembatas akhir fungsi sticky akan berfungsi.

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

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

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

Kode max-width:255px merupakan kode untuk menentukan lebar widget

Kedua contoh kode pada CSS di atas bisa saja berbeda dengan yang ada pada template sahabat. Jadi silahkan sesuaikan dan atur sesuai kebutuhan. Jika dirasa sudah selesai silahkan simpan tema dan lihat hasilnya.

Apabila sahabat masih kesulitan, sahabat bisa melihat dan mempelajarinya melalui contoh di bawah ini. Perhatikan pada JS, CSS, serta HTML nya.

Contoh Sticky Hanya Pada Widget

Demikian cara membuat widget melayang pada sidebar blog yang pernah saya praktekkan. Apabila dalam penjelasan di atas masih ada yang kurang dipahami, bisa langsung ditanyakan dan kita bisa belajar bersama. Dan bagi yang sudah ahli tolong kasih kritik dan saran apabila ada kesalahan.

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

Sebenarnya banyak cara yang bisa kita lakukan untuk membuat fungsi sticky seperti di atas. Namun menurut saya cara di atas merupakan cara yang paling mudah. Jika berniat untuk memperdalam memahaminya, sahabat bisa mempelajari melalui link berikut:

Resources:
http://www.arlinadzgn.com/2015/12/cara.membuat.sticky.widget.di.sidebar.blog.html
http://www.kompiajaib.com/2016/09/membuat-sticky-widget-dan-berhenti-di.html
http://blog.kangismet.net/2012/10/membuat-sticky-widget-sidebar-di.html
http://stickyjs.com/
http://leafo.net/sticky-kit/

hal yang membuat tersenyum adalah kebahagian orang lain oleh diriku

Pilih Sistem Komentar yang Anda Sukai
Disqus
Blogger

16 komentar

Waduh non amel udah jago html euy... salut ihh.. saya mah apalah atuh suka gak mudeng kalau belajar beginian.. nyimak aja deh yaa..

Ih.... Belum jago atuh., ini kan masih belajar., hehe

Sepertinya ada kselahan ketik pada top ya ? top:83, mungkin seharusnya top 25 biar sama dengan kode jqurynya.
Dan widget yang disticky, disarankan widget paling bawah pada sidebar agar tampil lebih sempurna.
Sepintas cara ini sederhana, tapi sebenarnya kemungkinan tidak cocok diterapkan pada setiap template. Pasti akan mengalami kendala atau tidak bekerja dengan baik. Semisal saat dilihar dengan versi mobile, widget sticky menutupi halam utama/artikel.
Jika ada teman yang mengalami kendala, bolehlah kirim pesan ke blog saya, mungkin nanti bisa saling bertukar ilmu.

Untung saja ada yang mengingatkan dan sudah saya perbaiki, hehe

Di sini saya juga masih belajar mas, jadi sangat butuh kritik dan saran seperti ini.

Mungkin di blog mas ada postingan terkait seperti di atas? biar saya pelajari dan saya tambahkan sumbernya...

Betul neng stiky widget bentrok dengan widget lainya makanya styki template di blog saya hilangkan, template ini kan sama di blog ini,

apapun yang melayang kalau posisinya ada disidebar tidak menjadi masalah ketika di buka di smartphone, asal jangan melayangnya di tengah artikel aja, biasanya dipasang untuk fanpage fb...sebenernya model begitu tidak disarankan oleh mesin pencari loch.
sipmirkisip sticky nya nih neng.

waduh, selamat deh buat kamu, kamu hebat ya bisa buat yang beginian, lah aku yang pasangan template aja minta bantuan teman hehe

salut buat mbak amel (y) jempol deh pokoknya,tingkatin terus artikel-artikelnya ya kakak

banyak cara yang dilakukan seorang blogger buat memperindah tampilan blognya, termasuk pasang widget melayang sticky

Wah sudah jago nih buat widget stiky, saya masih belum paham nih.. 😪

Harus belajar dari mbak Amel nih 😂

Iklanya dah saya senggol neng, ngomong ngomong nebeng sama siapa sih, awas lo neng jangan mudah dimanfaatkan blogger lain, yg penting sama sama menguntungkan

Kalau lihat di codepennya,,,di perkecil layarnya masing melayang,, dan menghalangi,,, tapi belum tahu juga kalu di test di mobile,,,,mungkin semua orang punya tekniknya masing - masing

sharing dong cara mmebuat note seperti milik mba ini bagaimana ya? terima kasih :D

Iya, tapi kapan2 ya,, kalo nggak sibuk, hehe

gak bisa-bisa mba amel liya, xixixi

kalau bisa dibantu donk.

Silahkan Tinggalkan Komentar Anda