Tutorial Menciptakan Widget Sticky Tanpa Merusak Tampilan Mobile Blog

Cara Membuat Widget Sticky Tanpa Merusak Tampilan Mobile Blogger - Tujuan Saya Kali Ini ialah membagikan solusi buat kalian nan ingin memasang widget sticky berupa iklan, ataupun widget apapun. di tampilan desktop benar benar saja, tetapi di mobile nya awut-awutan sekali. tersedia sebagian hal nan menyebabkan tampilan mobile alhasil gak mau di scroll kebawah. masalahitu saya alami dikala mengecek di tampilan mobilenya nan nggak mau ke scroll hingga ke bab footer malah kembali lagi keatas.itu gak normal sekali sebagai pembaca. pembaca blog mau kesulitan mengakses blog kamu. aneka macam blogger nan membagikan script sebagai membikin widget sticky. tapi sebuahpun belomada nan membahas problem ini. tujuan saya ialah meringankan kau didalem memecahkan problem ini.

Yang Saya Alamu Pada Tampilan Mobilenya, Tidak Mau ke scroll kebawah footer, hanya berbatas ke widget sticky tadi. juga terus berbalik lagi keatas. Namun di tampilan desktopnya belomtidak banyakpun mengalami kerusakan menyerupai di mobile.itu hanya terjadi di tampilan di mobilenya saja. alasannya yaitu sanggup saja widgetitu terlalu panjang kebawah, menyerupai tumpuan iklan, widget artikel terbaru sanggup saja, ataupun random post. semua widget tadi mempunyai ukuran nan agak panjang, jadi sanggup saja menyebabkan bentrok dengan footer blog kamu.

Banyak Cara nan sanggup kau kerjakan buat merapikan tampilan mobilenya, dengan tutor menonaktifkan tampilan di mobilenya misalnya. jadi dididalem postinganitu saya mau membahas bagaimana tutornya menonaktifkan widget supaya jquery ataupunpun javascript belomberjalan di mobile. tetapi di tampilan desktop widget mau tetap sticky. kami hanya mematikan fungsi di mobilenya saja, dengan begini tampilan mobile kau mau alhasil rapi juga belomikutan sticky juga di tampilan mobilenya, yah jikalau memang dilihat tampilan sticky mobile memang belomselayaknya dipasang. apalagi sebagai ukuran widget nan panjang, mau membikin tampilan mobile gak sanggup di scroll juga terus balik lagi ke atas. Seperti nan saya alami didalem insiden diatas, saya rasa hanialah solusinya nan musti kau kerjakan.

Cara Membuat Widget Sticky Tanpa Merusak Tampilan Mobile Blog

saya selaku admin jagoankode, script dibawah saya mengambil sebagian referensi dari sebagian blog lain, tetapi saya modifikasi tidak banyak supaya tepat juga terlebih lagi saya ingin menyebarkan buat problem tampilan mobilenya jadi ikut ikutan sticky juga. di blog jagoankode memakai tutoritu juga, sanggup kalian lihat di sidebar dari blog ini, naahh kalian sanggup menggunakannya juga sanggup dicoba di blog kalian ya, silahkan ikuti tutorial dibawahitu 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 terpastinya     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 ataupun 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 nan musti kau arahan dibawahitu juga gantilah dengan ID terpastinya sesuai template nan kau gunakan.

Note :
#HTML1 : Sesuaikan dengan ID dari widget nan mau dibentuk sticky.
#footer-wrapper : Sesuaikan dengan ID Footer kau nan mau 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 mau terlihat biasa saja juga terlebih lagi sanggup di scroll kebawah tanpa nyangkut nyangkut ke atas lagi. juga di tampilan mobile mau terlihat lebih rapi dari sanggup saja sebelumnya.

Penjelasan :

Apabila Anda Ingin Menggunakan Widget Lain, Tetapi ingin fungsi tampilannya hanya di desktop saja kalian sanggup menambahkan ataupun menyelipkan arahan script menyerupai dibawahitu merupakan tumpuan 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 nan sanggup saya bagikan ke temen temen sekalian semoga meringankan juga berfungsi sebagai temen temen blogger lain. Sekian Dari saya apabila tersedia nan ingin kalian tanyakan, silahkan isi kotak komentar dibawah. Apabila Terdapat Kata Yang kurang berkenan mohon dimaafkan, Tujuan Saya Hanya Membantu.. Happy Blogging :)