Cara Membuat Sticky Sharebar Responsive di Blog

membuat sticky sharebar

Sharebar adalah salah satu elemen yang cukup penting dalam blog. Dengan share bar pengunjung dapat membagikan postingan blog dengan mudah dan cepat. Kali kita akan membahas tentang bagaimana cara membuat sticky sharebar responsive diblog yang bisa kamu pasang diblogger maupun website standalone kamu! Langsung saja kita simak tutorialnya dibawah.

Cara membuat StickyShare

Yang kamu butuhkan:

  • Text Editor (sublime text, etc.)
  • Jquery

Langkah – Langkah

Masuk ke dashboard blog. Setelah itu klik edit HTML

Masukkan script berikut diatas </body>

<script>
//<![CDATA[
$(function() {
  if ($('.sticky-share').length) { 
    var el = $('.sticky-share');
    var stickyTop = $('.sticky-share').offset().top;
    var stickyHeight = $('.sticky-share').height();
    $(window).scroll(function() {
      var limit = $('#blog-pager').offset().top - stickyHeight - 20;
      var windowTop = $(window).scrollTop();
      if (stickyTop < windowTop) {
        el.css({
          position: 'sticky' 
        });
      } else {
        el.css('position', 'static');
      }
      if (limit < windowTop) {
        var diff = limit - windowTop;
        el.css({
          top: diff
        });
      }
    });
  }
});

//]]>
</script>

Tambahkan CSS berikut sebelum </style>

.sticky-share {
    width: 60px;
    background: #eee;
    float: left;
    margin-left: -60px;
    border-radius: 7px;
    overflow: hidden;
}
a.xosocial i {
    font-size: 30px;
    transform: translate(0, 25%);
}
a.xosocial {
    display: block;
    text-align: center;
    height: 45px;
}
  
.xosocial:hover i {
    color: #fff!important;
}
.xosocial.facebook:hover {
    background: #3b5998!important;
}
.xosocial.whatsapp:hover {
    background: #25D366;
}
.xosocial.pinterest:hover {
    background: #c8232c;
}
.xosocial.twitter:hover {
    background: #00acee;
}
i.fa.fa-whatsapp.icons {
    color: #25D366;
}
i.fa.fa-pinterest.icons {
    color: #c8232c;
}
i.fa.fa-twitter.icons {
    color: #00acee;
}
i.fa.fa-facebook.icons {
    color: #3b5998;
}

Terakhir, Letakkan script ini dibawah tag

<b:if cond='data:blog.pageType == "item"'>
<div class='sticky-share' id='sticky-share'>
<a class='xosocial facebook' href='#' onclick='fbshare()' rel='nofollow' target='_blank' title='Share This'><i class='fa fa-facebook icons'/></a>

<a class='xosocial twitter' expr:href='"https://twitter.com/share?url=" + data:post.url + "&amp;title=" + data:post.title' rel='nofollow' target='_blank' title='Tweet This'><i class='fa fa-twitter icons'/></a>

<a class='xosocial pinterest' expr:href='"https://www.pinterest.com/pin/create/button/? url=" + data:post.url + "&amp;t=" + data:post.title' target='_blank' title='Pin This On Pinterest'><i class='fa fa-pinterest icons'/></a>

<a class='xosocial whatsapp' expr:data-href='data:post.url' expr:data-text='data:post.title' href='#' id='whatsapp' title='Forward This'><i class='fa fa-whatsapp icons'/></a>
    </div>

Mudah bukan?

Penutup

Terimakasih telah membaca tutorial tentang cara membuat sticky sharebar diblog yang telah dirangkum oleh itpelajar.com. Selamat mencoba dan salam tekno!

Ketua Kelas
Halo! Saya adalah seorang IT Enhthusiast dan juga seorang desainer grafis. Hobi dalam bidang IT seperti coding dan yang lainnya. Saya juga merupakan seorang contributor di beberapa mikrostok di Internet.

Log In

Forgot password?

Enter your account data and we will send you a link to reset your password.

Your password reset link appears to be invalid or expired.

Log in

Privacy Policy

Add to Collection

No Collections

Here you'll find all collections you've created before.