Membuat Sticky Share Button On Scroll

Membuat Sticky Share Button On Scroll

Bola Hero Gawai

Membuat Sticky Share Button On Scroll

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:

Animasi Sticky Share Button On Scroll

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

Share this:

Share this with short URL: Get Short URL loading short url

You Might Also Like:

Disqus
Blogger
Pilih Sistem Komentar Yang Disukai

0 Comment

Add Comment

Komentar dengan link promo akan masuk spam.

Gunakan konversi tool jika ingin menyertakan kode atau gambar.


image
How to style text in Disqus comments Top Disqus Commentators
  • To write a bold letter please use <strong></strong> or <b></b>.
  • To write a italic letter please use <em></em> or <i></i>.
  • To write a underline letter please use <u></u>.
  • To write a strikethrought letter please use <strike></strike>.
  • To write HTML code, please use <code></code> or <pre></pre> or <pre><code></code></pre>.
    And use parse tool below to easy get the style.
Show Parser Box

How to get ID DISQUS - http://disq.us/p/[ID DISQUS] - lihat di sini

strong em u strike
pre code pre code spoiler
embed

Like Kompi Ajaib? Keep us running by whitelisting Kompi Ajaib in your ad blocker.

This is how to whitelisting Kompi Ajaib in your ad blocker.

Thank you!

×
×
×