-->

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
Baca Juga

Related Posts

7 comments

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

    ReplyDelete
    Replies
    1. waduh bukannya ngk mau, cuman udah lupa apa aja yang di edit

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

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

      Delete

Post a Comment

Subscribe Our Newsletter