JAGOAN KODE

7/07/2018

Cara Membuat Widget Sticky Tanpa Merusak Tampilan Mobile Blogger - Tujuan Saya Kali Ini ialah membagikan solusi buat kalian yang ingin memasang widget sticky berupa iklan, atau widget apapun. pada tampilan desktop baik baik saja, namun pada mobile nya berantakan sekali. ada beberapa hal yang menyebabkan tampilan mobile menjadi gak mau di scroll kebawah. masalah ini saya alami ketika mengecek di tampilan mobilenya yang nggak mau ke scroll sampai ke bagian footer malah kembali lagi keatas. ini gak normal sekali bagi pembaca. pembaca blog akan kesulitan mengakses blog kamu. banyak sekali blogger yang membagikan script untuk membuat widget sticky. tapi satupun tidak ada yang membahas masalah ini. tujuan saya ialah membantu kamu dalam memecahkan masalah 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 seperti di mobile. ini hanya terjadi pada tampilan di mobilenya saja. karena mungkin widget ini terlalu panjang kebawah, seperti contoh iklan, widget artikel terbaru mungkin, atau random post. semua widget tadi mempunyai ukuran yang agak panjang, jadi mungkin menyebabkan bentrok dengan footer blog kamu.


Banyak Cara yang bisa kamu lakukan buat merapikan tampilan mobilenya, dengan cara menonaktifkan tampilan di mobilenya misalnya. jadi didalam postingan ini saya akan membahas bagaimana caranya menonaktifkan widget agar 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 kamu akan menjadi rapi dan tidak ikutan sticky juga pada tampilan mobilenya, yah kalau memang dilihat tampilan sticky mobile memang tidak selayaknya dipasang. apalagi untuk ukuran widget yang panjang, akan membuat tampilan mobile gak bisa di scroll dan terus balik lagi ke atas. Seperti yang saya alami dalam kejadian diatas, saya rasa hanya ini solusinya yang harus kamu 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 agar sempurna dan terlebih lagi saya ingin berbagi buat masalah tampilan mobilenya jadi ikut ikutan sticky juga. di blog jagoankode menggunakan cara ini juga, bisa kalian lihat pada sidebar dari blog ini, nah kalian dapat menggunakannya dan dapat 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 kamu kode dibawah ini dan gantilah dengan ID tertentu sesuai template yang kamu gunakan.

Note :
#HTML1 : Sesuaikan dengan ID dari widget yang akan dibuat sticky.
#footer-wrapper : Sesuaikan dengan ID Footer kamu 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 bisa 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 bisa menambahkan atau menyelipkan kode script seperti dibawah ini merupakan contoh 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 dapat 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 :)

0 komentar