Cara Menciptakan Widget Sticky Tanpa Merusak Tampilan Mobile Blog

Cara Membuat Widget Sticky Tanpa Merusak Tampilan Mobile Blogger - Tujuan Saya Kali Ini yaitu membagikan solusi buat kalian yang ingin memasang widget sticky berupa iklan, atau widget apapun. pada tampilan desktop baik baik saja, namun pada mobile nya berserakan sekali. ada beberapa hal yang mengakibatkan tampilan mobile menjadi gak mau di scroll kebawah. dilema ini saya alami saat mengecek di tampilan mobilenya yang nggak mau ke scroll hingga ke belahan footer malah kembali lagi keatas. ini gak normal sekali bagi pembaca. pembaca blog akan kesulitan mengakses blog kamu. berbagai blogger yang membagikan script untuk menciptakan widget sticky. tapi satupun tidak ada yang membahas dilema ini. tujuan saya yaitu membantu kau dalam memecahkan dilema ini.

Yang Saya Alamu Pada Tampilan Mobilenya, Tidak Mau ke scroll kebawah footer, hanya berbatas ke widget sticky tadi. dan terus berbalik lagi keatas. Namun pada tampilan desktopnya tidak sedikitpun mengalami kerusakan menyerupai di mobile. ini hanya terjadi pada tampilan di mobilenya saja. sebab mungkin widget ini terlalu panjang kebawah, menyerupai referensi iklan, widget artikel terbaru mungkin, atau random post. semua widget tadi memiliki ukuran yang agak panjang, jadi mungkin mengakibatkan bentrok dengan footer blog kamu.

Banyak Cara yang sanggup kau lakukan buat merapikan tampilan mobilenya, dengan cara menonaktifkan tampilan di mobilenya misalnya. jadi didalam postingan ini saya akan membahas bagaimana caranya menonaktifkan widget semoga jquery ataupun javascript tidak berjalan di mobile. namun di tampilan desktop widget akan tetap sticky. kita hanya mematikan fungsi di mobilenya saja, dengan begini tampilan mobile kau akan menjadi rapi dan tidak ikutan sticky juga pada tampilan mobilenya, yah jikalau memang dilihat tampilan sticky mobile memang tidak selayaknya dipasang. apalagi untuk ukuran widget yang panjang, akan menciptakan tampilan mobile gak sanggup di scroll dan terus balik lagi ke atas. Seperti yang saya alami dalam bencana diatas, saya rasa hanya ini solusinya yang harus kau lakukan.

Cara Membuat Widget Sticky Tanpa Merusak Tampilan Mobile Blog

saya selaku admin jagoankode, script dibawah saya mengambil beberapa referensi dari beberapa blog lain, namun saya modifikasi sedikit semoga tepat dan terlebih lagi saya ingin menyebarkan buat dilema tampilan mobilenya jadi ikut ikutan sticky juga. di blog jagoankode memakai cara ini juga, sanggup kalian lihat pada sidebar dari blog ini, nah kalian sanggup menggunakannya dan sanggup dicoba di blog kalian ya, silahkan ikuti tutorial dibawah ini dengan benar...

1. Login Ke Blogger Dan Silahkan Buka Dashboard Bloggernya > Tema > Edit HTML

Tambahkan Script Ini Diatas Tag </body>

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

Jika Sudah, Perhatikanlah yang harus kau isyarat dibawah ini dan gantilah dengan ID tertentu sesuai template yang kau gunakan.

Note :
#HTML1 : Sesuaikan dengan ID dari widget yang akan dibentuk sticky.
#footer-wrapper : Sesuaikan dengan ID Footer kau yang akan dibatasi widget stickynya.

2. Simpan Tema

3. Selesai Dan Lihat Hasil Di Kedua Perangkat [Desktop Dan Mobile]

Bukankah Terlihat Rapi Bukan ?, Script Di Atas hanya berjalan sticky apabila di desktop saja, di tampilan mobilenya akan terlihat biasa saja dan terlebih lagi sanggup di scroll kebawah tanpa nyangkut nyangkut ke atas lagi. dan pada tampilan mobile akan terlihat lebih rapi dari mungkin sebelumnya.

Penjelasan :

Apabila Anda Ingin Menggunakan Widget Lain, Tetapi ingin fungsi tampilannya hanya di desktop saja kalian sanggup menambahkan atau menyelipkan isyarat script menyerupai dibawah ini merupakan referensi ilustrasinya saja :

<b:if cond='data:blog.isMobileRequest == &quot;false&quot;'>
<script type='text/javascript'>
// Your Script In Here //
</script>
</b:if>

Kalian Hanya Perlu Menambahkan Tag Warna Merah Seperti Script Diatas, Diletakkan Diantara Tag Pembuka Dan Penutup Script Yang Kamu Punya.

Mungkin Itu Saja yang sanggup saya bagikan ke temen temen sekalian semoga membantu dan bermanfaat bagi temen temen blogger lain. Sekian Dari saya apabila ada yang ingin kalian tanyakan, silahkan isi kotak komentar dibawah. Apabila Terdapat Kata Yang kurang berkenan mohon dimaafkan, Tujuan Saya Hanya Membantu.. Happy Blogging :)

Share this post