Sticky Widget untuk Textrim Template



Assalamu'alaikum Blogger!!

To the point, edit template lalu letakan kode jQuery dibawah sebelum tag </body>
pastikan template anda sudah menggunakan jQuery, jika belum silahkan ditambahkan terlebih dahulu
<script type='text/javascript'>
//<![CDATA[
$(function() {
  if ($('#PopularPosts1').length) {
    var el = $('#PopularPosts1');
    var stickyTop = $('#PopularPosts1').offset().top;
    var stickyHeight = $('#PopularPosts1').height();

    if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {
        el.css('position', 'static');
    }
    else {
    $(window).scroll(function() {
      var limit = $('.textrimAdditional')
   if (limit.length) {
            limit.offset().top - stickyHeight - 20;}
        
      var windowTop = $(window).scrollTop();

      if (stickyTop < windowTop) {
        el.css({ position: 'fixed', top: 50 });
        el.addClass("stickwidget");
      }
      else {
        el.css('position', 'static');
        el.removeClass("stickwidget");
      }

      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({top: diff});
        el.removeClass("stickwidget");
      }
      
    });
  }
}
});
//]]>
</script>
Tambahkan kode css dibawah sebelum tag ]]></b:skins>
.stickwidget {
background-color: $(textrim.main.color);
z-index: 99;
width: inherit
}
Sesuaikan dengan kebutuhan blog anda :
  1. Edit Kode Javascript :
    1. Ganti #PopularPosts1 dengan id Widget yang mau di Sticky, cara melihat id Widget di blogger : Layout > edit Layout kemudian lihat pada address bar, kalau ngga kelihatan maximize saja windowsnya.


    2. Default template textrim pada bagian bawah ada elemen .textrimAdditional elemen ini saya jadikan penanda agar sticky widget berhenti sampai disitu. silahkan sesuaikan dengan kondisi blog masing-masing, jika masih default bawaan textrim maka biarkan saja tak perlu diganti
  2. Edit kode CSS : CSS ini berfungsi untuk merubah tampilan widget ketika ikut bergerak kebawah silahkan dirubah menyesuaikan tema, pada saat Widget berada diposisi sebenarnya dan paling bawah kode CSS ini tidak berfungsi
itu Sudah
Next Post Previous Post
7 Comments
  • UgieL
    UgieL Friday, 06 March, 2020

    Bang buatin tutorialnya modif template textrim seperti punya abang, (tertarik)

    • Dhanny
      Dhanny Saturday, 25 July, 2020

      waduh bukannya ngk mau, cuman udah lupa apa aja yang di edit

  • Ely Goro Leba
    Ely Goro Leba Monday, 06 July, 2020

    thanks gan..... tempaltemnya uda dimodif ya? keren banget.. bisa share templatenya gan??

    • Dhanny
      Dhanny Saturday, 25 July, 2020

      maaf bos ku belum bisa di share, ini modifnya cuman modal CSS aja.. silahkan di copas lansung dari source

  • Chord lagu indonesia
    Chord lagu indonesia Friday, 10 July, 2020

    Terimakasih

    Chord Perlahan Guyon Waton

    Chord Layang Kangen Didi Kempot


    Chord Kalung Emas Didi Kempot

    Chord Titip Rindu Buat Ayah



  • Rabbit Run
    Rabbit Run Friday, 05 November, 2021

    Izin pake

  • Rabbit Run
    Rabbit Run Friday, 05 November, 2021

    Gak work bang

Add Comment
comment url