Cara Membuat Sticky Widget di Blogspot - Tutorial Lengkap

Advertisement

Penawaran Terbatas! Paket Data 25GB Hanya Rp 90.000

---

Dapatkan kuota besar 25GB untuk semua nomor AS, Loop, dan simPATI hanya dengan Rp 90.000, berlaku selama 30 hari! Internet lancar tanpa khawatir kehabisan kuota, cocok untuk streaming, gaming, dan browsing sepuasnya!

Aktifkan sekarang dan nikmati kebebasan internet!

Read More Beli Paket

Advertisement

Sticky Widget adalah salah satu fitur yang sangat berguna di Blogspot untuk memastikan widget tetap terlihat saat pengunjung menggulir halaman. Widget ini bisa digunakan untuk menampilkan elemen penting seperti iklan, tombol ajakan bertindak (CTA), form pendaftaran newsletter, atau bahkan link navigasi tambahan. Dengan membuat widget menjadi sticky, elemen ini akan selalu mengikuti pengunjung sehingga lebih mudah diakses dan memberikan dampak lebih besar terhadap konversi.

Apa Itu Sticky Widget di Blogspot?

Sticky Widget adalah elemen yang "menempel" di posisi tertentu pada halaman web dan tetap terlihat ketika pengguna menggulir ke bawah. Biasanya, elemen ini ditempatkan di sidebar, tetapi bisa juga dipasang di posisi lain. Widget yang sticky memungkinkan pengguna untuk terus melihat konten penting tanpa harus menggulir kembali ke atas halaman.

Keuntungan Menggunakan Sticky Widget di Blogspot

Menggunakan Sticky Widget di Blogspot menawarkan berbagai keuntungan, termasuk:

• Meningkatkan Visibilitas: Widget yang sticky selalu terlihat, sehingga elemen penting seperti iklan atau ajakan bertindak (CTA) lebih sering dilihat oleh pengunjung.
• Meningkatkan Konversi: Dengan tetap tampil di layar, widget seperti form langganan newsletter atau tombol beli sekarang dapat meningkatkan interaksi pengguna dan konversi.
• Pengalaman Pengguna yang Lebih Baik: Sticky Widget memudahkan pengguna untuk mengakses informasi penting tanpa harus menggulir kembali ke bagian atas halaman.

Cara Membuat Sticky Widget di Blogspot

Untuk membuat Sticky Widget di Blogspot, ada tiga langkah mudah yang harus diikuti: menambahkan kode CSS, menambahkan kode JavaScript, dan memastikan elemen yang ingin dibuat sticky memiliki ID yang sesuai. Berikut adalah langkah-langkah detailnya.

Langkah 1: Menambah Kode CSS

Langkah pertama dalam membuat widget menjadi sticky adalah menambahkan kode CSS ke template Blogspot Anda. Kode ini akan mengatur posisi elemen agar tetap "terkunci" di layar saat pengguna menggulir halaman.

1. Login ke akun Blogger Anda.
2. Di dashboard Blogger, klik Template atau Tema, lalu pilih Edit HTML.
3. Temukan bagian </b:skin> dalam kode HTML Anda.
4. Tambahkan kode CSS berikut ini tepat di atas </b:skin>:

   .sticky {
     position: fixed;
     top: 10px; /* jarak dari atas */
     z-index: 100;
   }
         

Kode CSS ini menentukan posisi elemen agar tetap di bagian atas saat pengguna menggulir halaman. Anda bisa menyesuaikan nilai top: 10px sesuai dengan kebutuhan Anda, misalnya untuk mengatur jarak dari atas layar.

Langkah 2: Menambah Kode JavaScript

Setelah menambahkan kode CSS, langkah selanjutnya adalah menambahkan kode JavaScript untuk memastikan widget tetap sticky hanya setelah pengunjung menggulir melewati posisi widget tersebut.

1. Masih di bagian Edit HTML, temukan bagian </body> di akhir kode template Anda.
2. Tambahkan kode JavaScript berikut ini tepat di atas </body>:

   <script type='text/javascript'>
   $(document).ready(function() {
     var stickyWidgetTop = $('#HTML5').offset().top; 
     var stickyWidget = function(){
       var scrollTop = $(window).scrollTop();     
       if (scrollTop > stickyWidgetTop) { 
         $('#HTML5').addClass('sticky');
       } else {
         $('#HTML5').removeClass('sticky'); 
       }
     };
     stickyWidget();
     $(window).scroll(function() {
       stickyWidget();
     });
   });
   </script>
         

Kode di atas memastikan bahwa elemen dengan ID yang Anda tentukan akan mendapatkan class sticky hanya ketika pengunjung telah menggulir melewati posisi aslinya di halaman. Jangan lupa mengganti #HTML5 dengan ID widget yang ingin Anda buat sticky.

Kode sticky diatas Armaila dapatkan dari blog Kang Ismet. Ketika diaplikasikan di template Blogspot Landing Page, widget yang dibuat stickynya terus tampil sampai menutupi footer. Artinya belum ada script yang membatasi sampai kapan atau dititik mana script ini berhenti.

Langkah 3: Menentukan ID Widget

Setiap widget di Blogspot memiliki ID unik. Untuk mengetahui ID widget yang ingin Anda buat sticky, ikuti langkah-langkah berikut:

1. Di dashboard Blogger, klik Tata Letak.
2. Temukan widget yang ingin Anda buat sticky, lalu klik Edit.
3. Perhatikan URL di browser Anda. Di bagian akhir URL, akan ada teks seperti #HTML5, #HTML4, atau yang lainnya. Itulah ID widget Anda.
4. Ganti #HTML5 di kode JavaScript yang telah Anda tambahkan dengan ID widget yang sesuai.

Penyesuaian Tambahan

Anda juga bisa menyesuaikan kode yang telah Anda tambahkan untuk meningkatkan fungsionalitas dan tampilan Sticky Widget di Blogspot Anda. Misalnya, Anda bisa menambahkan animasi agar widget bergerak halus ketika berubah posisi atau menambahkan lebih banyak elemen CSS untuk mengatur ukuran dan jarak widget dari elemen lain di halaman.

Berikut adalah beberapa contoh penyesuaian yang bisa Anda terapkan:

• Menambahkan Animasi: Anda bisa menambahkan efek animasi pada widget saat berubah menjadi sticky dengan menambahkan kode berikut ke CSS:

  .sticky {
    transition: top 0.3s ease-in-out;
  }
        

• Menyesuaikan Z-Index: Jika widget sticky tertutup oleh elemen lain di halaman, pastikan z-index dari widget lebih tinggi. Anda bisa menyesuaikan z-index dalam CSS seperti ini:

  .sticky {
    z-index: 999;
  }
        

Kesimpulan

Membuat Sticky Widget di Blogspot adalah cara yang efektif untuk meningkatkan visibilitas konten penting seperti iklan, form, atau tombol ajakan bertindak. Dengan mengikuti langkah-langkah sederhana di atas, Anda bisa dengan mudah membuat widget yang tetap terlihat ketika pengguna menggulir halaman. Pastikan untuk menyesuaikan ID widget dan nilai CSS sesuai kebutuhan untuk mendapatkan hasil yang optimal.

Selamat mencoba dan semoga berhasil! Jangan ragu untuk berkreasi dengan Sticky Widget di Blogspot agar blog Anda semakin menarik dan fungsional.

Koleksi Artikel Tentang Blogging

Advertisement