Membuat Sticky Share Button On Scroll

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

Baca juga : Fixed Sharing Button With Show Hide Button Jquery

Hasil modifikasi share button ini akan menyerupai 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 memakai font Awesome. Jika belum silahkan simak postingannya di bawah ini.

• Penggunaan Font Awesome Terbaru Versi 4.2.0
• Mengatasi Render Blocking CSS Font Awesome

Langkah Kedua

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

• Jangan Menggunakan Lagi jquery-latest.js

Langkah Ketiga

Silahkan gunakan instruksi 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 instruksi animasi bounceIn untuk memperlihatkan dampak ketika share buttonnya muncul.

Langkah Keempat

Copy instruksi 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 instruksi di atas di bawah instruksi berikut atau yang menyerupai mirip 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 instruksi </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, kalau ingin menampilkannya di sebelah kana silahkan ganti instruksi left menjadi right pada instruksi 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 instruksi top. Untuk mengatur ketinggian kemunculan button ketika halaman di-scroll, silahkan atur besaran angka pada instruksi jquery-nya. Selamat mencoba...

DEMO

Silahkan scroll halaman demonya...

Sumber https://www.kompiajaib.com/

Share this post