Membuat Sticky Share Button On Scroll

Sebenarnya ini adalah pengembangan dari share button yang sebelumnya saya posting, hanya lebih saya sederhanakan dan menambah efek show hide ketika halaman digulung dan ditambahkan juga efek animasi ketika share button muncul.

Baca juga : Fixed Sharing Button With Show Hide Button Jquery

Hasil modifikasi share button ini akan seperti penampakan pada animasi gif di bawah ini:

Bagaimana, ingin mencobanya? Bagi yang ingin mencobanya silahkan ikuti caranya di bawah ini.

Langkah Pertama

Pastikan blog Anda sudah menggunakan font Awesome. Jika belum silahkan simak postingannya di bawah ini.

Langkah Kedua

Pastikan blog Anda sudah menggunakan jquery library. Jika belum, silahkan simak postingannya di bawah ini.

• Jangan Menggunakan Lagi jquery-latest.js

Silahkan gunakan kode CSS di bawah ini.

.shareOnscroll{margin:0;padding:0;text-align:center;position:fixed;top:400px;left:10px;z-index:100000;display:none}

.shareOnscroll ul{list-style:none;text-align:center}

.shareOnscroll ul li{list-style:none}

.shareOnscroll ul li.fb,.shareOnscroll ul li.pt{position:absolute;left:0;z-index:1;font-size:18px}

.shareOnscroll ul li.fb{bottom:15px;}

.shareOnscroll ul li.pt{bottom:165px;}

.shareOnscroll ul li.tw,.shareOnscroll ul li.gp{position:absolute;left:-10px;z-index:1;font-size:18px}

.shareOnscroll ul li.tw{bottom:65px;}

.shareOnscroll ul li.gp{bottom:115px;}

.shareOnscroll ul li.fb,.shareOnscroll ul li.pt,.shareOnscroll ul li.tw,.shareOnscroll ul li.gp{-webkit-filter:grayscale(100%);filter:grayscale(100%);opacity:0.7;transition:all .4s ease-in-out}

.shareOnscroll ul li.fb:hover,.shareOnscroll ul li.pt:hover,.shareOnscroll ul li.tw:hover,.shareOnscroll ul li.gp:hover{-webkit-filter:grayscale(0%);filter:grayscale(0%);opacity:1;}

.shareOnscroll ul li.fb a{color:#324b81 !important}

.shareOnscroll ul li.tw a{color:#01a7de !important}

.shareOnscroll ul li.gp a{color:#ba3227 !important}

.shareOnscroll ul li.pt a{color:#0a7111 !important}



.ani-dur{-webkit-animation-fill-mode:both;-moz-animation-fill-mode:both;-ms-animation-fill-mode:both;animation-fill-mode:both;-webkit-animation-duration:1s;-moz-animation-duration:1s;-ms-animation-duration:1s;animation-duration:1s;}

@-webkit-keyframes bounceIn {0%{opacity:0;-webkit-transform:scale(.9);}100%{-webkit-transform: scale(1);}}

@-moz-keyframes bounceIn {0%{opacity: 0;-moz-transform: scale(.9);}100%{-moz-transform:scale(1);}}

@-ms-keyframes bounceIn {0% {opacity:0;-ms-transform:scale(.9);}100%{-ms-transform:scale(1);}}

@keyframes bounceIn {0%{opacity:0;transform:scale(.9);}100%{transform:scale(1);}}

.ani-name {-webkit-animation-name: bounceIn;-moz-animation-name: bounceIn;-ms-animation-name: bounceIn;animation-name: bounceIn;}

Kode CSS di atas sudah termasuk dengan kode animasi bounceIn untuk memberikan efek ketika share buttonnya muncul.

Langkah Keempat

Copy kode HTML ini.

<b:if cond='data:blog.pageType == &quot;item&quot;'>

<div class='shareOnscroll ani-dur ani-name'> 

    <ul> 

        <li class='fb'><a expr:href='&quot;http://www.facebook.com/sharer.php?u=&quot; + data:post.url' target='_blank' title='Share to Facebook'> <span class='fa-stack fa-lg' title='Share to Facebook'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-facebook fa-stack-1x fa-inverse'></i></span> </a>

        </li>

        <li class='pt'> <a href='javascript:print(document)' title='Print This Blog'><span class='fa-stack fa-lg' title='Print This Blog'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-print fa-stack-1x fa-inverse'></i></span></a> 

        </li>

        <li class='tw'><a expr:href='&quot;http://twitter.com/share?url=&quot; + data:post.url' style='margin-left:10px' target='_blank' title='Share to Twitter'> <span class='fa-stack fa-lg' title='Share to Twitter'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-twitter fa-stack-1x fa-inverse'></i></span> </a>

        </li>

        <li class='gp'><a expr:href='&quot;https://plus.google.com/share?url=&quot; + data:post.url' style='margin-left:10px' target='_blank' title='Share to Google+'> <span class='fa-stack fa-lg' title='Share to Google+'> <i class='fa fa-square fa-stack-2x'></i> <i class='fa fa-google-plus fa-stack-1x fa-inverse'></i></span> </a>

        </li>

    </ul>

</div>

</b:if>

Silahkan simpan kode di atas di bawah kode berikut atau yang mirip seperti di bawah ini:

<b:if cond='data:blog.pageType == &quot;item&quot;'>

  <data:post.body/>

</b:if>

<b:if cond='data:blog.pageType == &quot;static_page&quot;'>

  <data:post.body/>

</b:if>

      <div class='clear'/> <!-- clear for photos floats -->

    </div>

Langkah Kelima

Silahkan simpan jquery di bawah ini di atas kode </body>

<script type='text/javascript'>

//<![CDATA[

var $toTop=$(".shareOnscroll");$(window).scroll(function(){$(this).scrollTop()>500?$toTop.fadeIn():$toTop.is(":visible")&&$toTop.fadeOut()});

//]]>

</script>

Kode CSS di atas akan menempatkan share button di sebelah kiri blog, jika ingin menampilkannya di sebelah kana silahkan ganti kode left menjadi right pada kode CSS di bawah ini.

.shareOnscroll{margin:0;padding:0;text-align:center;position:fixed;top:400px;left:10px;z-index:100000;display:none}

Begitu pun untuk jarak share button dari atas, silahkan atur angkanya pada kode top. Untuk mengatur ketinggian kemunculan button saat halaman di-scroll, silahkan atur besaran angka pada kode jquery-nya. Selamat mencoba...

Silahkan scroll halaman demonya...