Ditulis oleh: Ditulis pada: 3/02/2015
Beberapa waktu yang lalu saya sharing cara membuat sticky share button on scroll untuk blogger. Nah kali ini saya akan share cara membuat sticky share button ini agar bisa digunakan 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 menggunakan 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="Share to Google+">\
<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="Share to Facebook">\
<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="Share to Twitter">\
<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="Print this Page">\
<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 kode CSS dan paste di atas kode
]]></b:skin> atau </style> kemudian copy kode javascript dan paste di atas kode </body>. Agar share button-nya hanya tampil di halaman postingan saja, silahkan tambahkan tag conditional hanya untuk halaman postingan pada kode javascript. Dan tambahkan juga kode //<![CDATA[ dan //]]> agar tanda quote pada javascript tidak berubah dan kode tidak menjadi berwarna merah. Sehingga kode javascriptnya menjadi seperti di bawah ini.
<b:if cond='data:blog.pageType == "item"'>
<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="Share to Google+">\
<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="Share to Facebook">\
<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="Share to Twitter">\
<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="Print this Page">\
<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 kode CSS dan pasti di file style.php. Kemudian silahkan buka file footer.php dan paste kode javascript di atas kode
</body>. Agar tombol share tidak muncul di halaman depan atau homepage, silahkan buka index.php (Main Index Template) kemudian copy kode 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.