Sticky Share Button On Scroll For Website

Beberapa waktu yang kemudian aku sharing cara menciptakan sticky share button on scroll untuk blogger. Nah kali ini aku akan share cara menciptakan sticky share button ini biar dapat dipakai untuk Blogger dan Wordpress serta ini solusi untuk mengatasi error validasi HTML5 dari link share Twitter yang menyertakan judul postingan secara otomatis di tweet box.

Langkah Pertama

Sticky share button ini memakai ikon font Awesome, jadi pastikan dulu Anda sudah menyimpan font Awesome di blog Anda.

Langkah Kedua

Silahkan gunakan kode-kode di bawah ini.

Kode CSS

 .grayscale{-webkit-filter:grayscale(100%);opacity:.7;filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");transition:all 400ms ease-in-out}
 .grayscale:hover{-webkit-filter:grayscale(0%);filter:grayscale(0%);filter:url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");opacity:1}
 .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}
 #shareOnscroll{position:fixed;height:auto;width:auto;left:50px;top:150px;font-size:18px}
 a.gp{color:#ba3227}
 a.fb{color:#324b81}
 a.tw{color:#01a7de}
 a.pr{color:#0a7111}
 

Kode Javascript

 <script type="text/javascript">
 var siteurl = window.location.href;
 var appended = false, bookmark = document.createElement("div");
 bookmark.id = "shareOnscroll";
 bookmark.innerHTML = '<div class="ani-dur ani-name"> \
 <a class="grayscale gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a><br/> \
 <a class="grayscale fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a><br/> \
 <a class="grayscale tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=KompiAjaib&related=kompiajaib" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a><br/> \
     <a class="grayscale pr" href="javascript:print(document)" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-print fa-stack-1x fa-inverse"></i></span></a></div> \
 ';
 onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;if(e>600){if(!appended){document.body.appendChild(bookmark);appended=true}}else{if(appended){document.body.removeChild(bookmark);appended=false}}};
 </script>
 

Penerapan di Blogger

Silahkan copy instruksi CSS dan paste di atas kode ]]></b:skin> atau </style> kemudian copy instruksi javascript dan paste di atas instruksi </body>. Agar share button-nya hanya tampil di halaman postingan saja, silahkan tambahkan tag conditional hanya untuk halaman postingan pada instruksi javascript. Dan tambahkan juga kode //<![CDATA[ dan //]]> biar tanda quote pada javascript tidak berubah dan instruksi tidak menjadi berwarna merah. Sehingga instruksi javascriptnya menjadi menyerupai di bawah ini.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
 <script type="text/javascript">
 //<![CDATA[
 var siteurl = window.location.href;
 var appended = false, bookmark = document.createElement("div");
 bookmark.id = "shareOnscroll";
 bookmark.innerHTML = '<div class="ani-dur ani-name"> \
 <a class="grayscale gp" href="https://plus.google.com/share?url=' + siteurl + '" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-google-plus fa-stack-1x fa-inverse"></i></span></a><br/> \
 <a class="grayscale fb" href="https://www.facebook.com/sharer/sharer.php?u=' + siteurl + '" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-facebook fa-stack-1x fa-inverse"></i></span></a><br/> \
 <a class="grayscale tw" href="https://twitter.com/intent/tweet?text='+encodeURIComponent(document.title)+'&url='+siteurl+'&via=KompiAjaib&related=kompiajaib" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-twitter fa-stack-1x fa-inverse"></i></span></a><br/> \
     <a class="grayscale pr" href="javascript:print(document)" target="_blank" title="Sticky Share Button On Scroll For Website">\
     <span class="fa-stack fa-lg"><i class="fa fa-square fa-stack-2x"></i><i class="fa fa-print fa-stack-1x fa-inverse"></i></span></a></div> \
 ';
 onscroll=function(){var e=document.documentElement.scrollTop||document.body.scrollTop;if(e>600){if(!appended){document.body.appendChild(bookmark);appended=true}}else{if(appended){document.body.removeChild(bookmark);appended=false}}};
 //]]>
 </script>
 </b:if>

Penerapan Di Wordpress

Silahkan copy instruksi CSS dan niscaya di file style.php. Kemudian silahkan buka file footer.php dan paste instruksi javascript di atas instruksi </body>. Agar tombol share tidak muncul di halaman depan atau homepage, silahkan buka index.php (Main Index Template) kemudian copy instruksi di bawah ini dan simpan di bawah kode <?php get_header(); ?>

 <style scoped='scoped' type='text/css'>
 #shareOnscroll{display:none}
 </style>

Jika ada yang kurang dimengerti silahkan bertanya di kolom komentar.

Sumber https://www.kompiajaib.com/

Share this post