-->

Cara Membuat Widget Melayang Atau Sticky Widget Terbaik Yang Pernah Saya Coba

Tentang bagaimana cara membuat widget melayang atau widget melekat atau sticky widget atau static widget ini pastinya sudah banyak dibahas dan dapat dengan mudah ditemukan hanya dengan mengetikkan kata kunci tersebut di mesin pencari. 

Secara singkat yang dimaksud dengan widget melayang atau widget melekat atau sticky widget atau static widget adalah widget yang posisinya tetap, tidak bergerak ke bawah meski tombol scroll menggulung layar ke bawah. 

Tujuan utama dari pemasangan Widget Melayang Atau Sticky Widget ini diantaranya adalah untuk mempercantik tampilan blog. 
Selain itu, dengan pemasangan yang tepat widget ini dapat menyita perhatian pengunjung blog pada apa yang dimuat dalam widget tersebut. Misalnya dengan atau untuk pemasangan iklan. 
Dengan memasang static widget apabila di dalamnya berisi iklan, berdasar pengalaman bisa mendapatkan klik yang lebih banyak. 
Anda sendiri bahkan mungkin sudah menggunakan atau memasang Widget Melayang Atau Sticky Widget ini. 

Namun berdasar pengalaman ( saya ) dari sekian banyak cara dan script Widget Melayang Atau Sticky Widget yang pernah saya temukan, ada satu cara atau script yang menurut saya pula sebagai Cara Membuat Widget Melayang Atau Static Widget yang Terbaik, yaitu seperti yang diberikan oleh mbak Arlina dalam blog arlinadezign. 

Mengapa terbaik ? 
Setidaknya ada beberapa kelebihan dari cara atau script Widget Melayang Atau Sticky Widget dari mbak Arlina ini, diantaranya : 

- Script dan caranya cukup simple sehingga mudah diterapkan 

- Tidak terlalu berat dalam loadingnya 

- Pengaturannya cukup mudah 

- Dan yang paling penting : widget melayang ini tidak “melorot” sebagaimana widget melayang lainnya. Sebagaimana diketahui pada umumnya statis widget akan menutupi area blog. 
Misal ketika dipasang pada sidebar, maka widget ini akan menutupi keseluruhan area sidebar. 
Lalu ketika tombol scroll digulung ke bawah, maka static widget akan terus turun, melorot terus hingga menutupi bagian footer. Akibatnya bagian footer akan “hilang” tidak kelihatan. 
Namun widget melayang dari mbak Arlina ini tidak. Bagian footer masih tetap bisa kelihatan. 
Hal ini disebabkan pada script widget ini dilengkapi dengan pembatas bawah, dimana widget ini harus berhenti. 
Dan eloknya, batas bawah dimana sticky widget berhenti dapat diatur-atur sendiri, tidak hanya pada bagian Footer blog saja. 

- Dan yang terakhir, widget ini juga mengcover untuk tampilan mobilnya, termasuk seberapa lebar widget ini nantinya akan tampil. 

Nah jika anda tertarik, disini saya akan bagikan kembali Cara Membuat Widget Melayang Atau Sticky Widget Terbaik Yang Pernah Saya Coba, yang mana saya ambil dari blognya Mbak Arlina. ( Ijin ya mbak ) 

Berikut script dan langkah-langkahnya : 

● Cari kode </body> agar cepat, gunakan kontrol F 

● Copy lalu pastekan kode di bawah ini di atas </body> 

<script type='text/javascript'> 
//<![CDATA[ 
$(function() { 
if ($(' #sticky-widget').length) { // Ganti "#sticky-sidebar" dengan ID atau CLASS tertentu 
var el = $(' #sticky-widget'); 
var stickyTop = $(' #sticky-widget').offset().top; 
var stickyHeight = $(' #sticky-widget').height(); 
$(window).scroll(function() { 
var limit = $(' #footer-wrapper').offset().top - stickyHeight - 20; // Jarak berhenti di "#footer-wrapper" 
var windowTop = $(window).scrollTop(); 
 if (stickyTop < windowTop) { 
el.css({ 
position: 'fixed', 
top: 20 // Jarak atau margin sticky dari atas 
 }); 
} else { 
el.css('position', 'static'); 
if (limit < windowTop) { 
var diff = limit - windowTop; 
el.css({ 
top: diff 
}); 
}); 
}); 
//]]> 
</script> 

● Langkah selanjutnya adalah mengganti kode yang berwarna merah dengan kode ID dari widget sesuai dengan template yang akan dibuat widget melayang atau sticky widget 
Selain kode “ID” bisa pula digunakan “CLASS” sesuai template anda 
( Sebagai contoh pada script di atas adalah CLASS pada template saya, bukan ID ). 

● Kemudian gantikan kode yang berwarna biru untuk mengatur dimana static widget ini harus berhenti. 
Ganti pula angkanya ( pada kode di atas adalah 20 ) untuk menentukan jaraknya 

●Untuk mengatur jarak static widget dari atas ganti angka yang berwarna hijau sesuai keinginan anda 

● Langkah selanjutnya adalah menambahkan lebar dari widget yang dibuat malayang atau sticky. Misalnya selebar 300 px 
Caranya : 
- cari kode <b:/skin> 
- Lalu copy dan pastekan kode css di bawah ini di atasnya 

#sticky-widget{width:100%;max-width:300px} 

● Tentukan pula lebar widget sesuai templat dan querynya caranya : 
- cari kode <b:/skin> 
- Lalu copy dan pastekan kode css di bawah ini di atasnya 

@media only screen and (max-width:768px)
{ #sticky-widget{width:100%;max-width:100%} 

● Terakhir klik tombol SAVE dan lihat hasilnya. 
Kini anda telah memiliki widget melayang atau sticky widget di blog anda. 

Nah cukup mudah bukan Cara Membuat dan memasang Widget Melayang Atau Sticky Widget Terbaik ala mbak Arlina ini ? 

Hanya saja, widget ini ( menurut saya ) juga memiliki sedikit kekurangan, yaitu tidak adanya tombol CLOSE untuk menutup widget. 
Apabila widget melayang ini digunakan untuk menampilkan link artikel, misalnya recent post atau random post, mungkin tidak menjadi masalah. 
Masalahnya adalah jika widget melayang ini digunakan untuk membuat atau memasang iklan melayang atau static ads. 
Karena ketidakberadaan tombol CLOSE pada sticky widget ini maka pengunjung tidak punya pilihan untuk menutup iklan yang tampil, sehingga terkadang dirasa terganggu. 
Untuk itu, pada posting selanjutnya Insya Allah akan dibahas bagaimana cara memodifikasi widget ini dan memberikan tombol close di atasnya. 
Untuk kali ini silahkan dicoba dulu, semoga bermanfaat. 
Dan jangan lupa lihat juga trik widget lainnya:

You may like these posts