Cara membuat widget blogspot melayang

Setelah  mengganti templates mbahkung.com beberapa waktu yang lalu, saya mendapati ada area kosong pada sisi sidebar ketika halaman discroll kebawah. Tampilan situs makin buruk saat artikel yang dimuat memiliki jumlah kalimat yang banyak. Buruknya tampilan situs dikarenakan pada sisi kiri (main content)penuh dengan artikel sementara disisi kanan (side bar) kosong melompong seperti nampak pada screenshoot berikut ini.

Untuk menyiasati kondisi tersebut, saya membutuhkan widget yang dapat melayang. Harapan saya agar saat halaman discroll kebawah, widget tersebut dapat ikut bergerak kebawah mengisi sidebar. Sehingga komposisi konten dalam tampilan monitor dapat berimbang.

Setelah googling beberapa saat saya menemukan banyak sekali tutorial  bagaimana cara membuat flying widget alias widget melayang. Tutorial yang saya dapatipun beraneka ragam, ada yang sederhana ada juga yang lumayan njlimet. Bahkan ada juga tutorial yang sudah tidak bisa lagi dipraktekkan. Setelah saya cek, ternyata tutorial itu sudah berumur 6 tahun lamanya. What the heck!. Saya memperbaiki pencarian dengan memfilter hasil pencarian untuk 1 bulan terakhir. Harapan saya agar dapat menemukan tutorial yang masih uptodate.

Cara mudah membuat widget blogspot melayang

Dari beberapa tutorial membuat widget blogspot melayang yang saya peroleh ada yang sangat sederhana dan mudah untuk di implementasikan  sekali. Ini dia cara membuat widget melayang di blogspot.

1. Masuk ke akun blogger

2. Pilih template

3. Edit HTML (pastikan anda membackup file template terlebih dahulu )

4.Cari bagian </body> (gunakan Ctrl+F untuk memudahlan pencarian). Jika sudah ketemu paste-kan scrip berikut ini :

<script type='text/javascript'>
      $(document).ready(function(){
    $(&quot;#melayang&quot;).sticky({topSpacing:0});
      });
    </script>
<script src='https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js' type='text/javascript'/>

5. Save
6. Klik menu layout
7. Buat/edit  widget yang akan dibuat melayang
8. Pada bagian atas widget masukkan script berikut

<div id="melayang"> ............. code widget ................ </div>

9. Save

Kesimpulan

Widget blogspot melayang ini membutuhkan java script yang bersumber dari https://googledrive.com/host/0B0Dd8XYrtgdDQS03RzFLSmx6RVE/sticky.js. Saya sendiri tidak tau siapa pembuat script tersebut. Ada baiknya ada menyimpan script tersebut ditempat yang lebih aman, misal di akun google drive anda sendiri. Karena kita tidak tau sampai kapan file sticky.js tersebut tersimpan di akun google drive seperti diatas. Demikian cara sederhana membuat widget blogspot melayang yang bisa saya share. Semoga bermanfaat.

• Twitter
• Facebook
• Google
• Tumblr
• Pinterest