Cara Membuat Widget Melayang Pada Sidebar Blog
Friday, 14 April 2017
Edit
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.
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.
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).
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>
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.
3. Tambahkan CSS seperti berikut sebelum </style> atau bisa juga sebelum ]]></b:skin>
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.
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/
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/