Skip to main content

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.


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.
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...

Berbagi itu peduli:

Comment Policy:

Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui. Untuk komentar out of topics silahkan masuk ke Forum Kompi Ajaib
Buka Komentar
Buka Komentar
Jangan Diklik!

Menarik Untuk Dibaca Juga:


PrivacySitemap
©2021 KOMPI AJAIB