Cara Membuat Sticky Share Button Blogger

Setelah kemaren saya memposting Cara Membuat Sticky Recent Post Slide Out On Scroll yang sudah kita praktekkan bersama kali ini masih berlanjut seputar postingan terkait Sticky, namun yang akan saya posting disini yaitu Cara Membuat Sticky Share Button Blogger, tujuannya sih selain untuk menambah navigasi share button ke medsos fungsinya juga untuk menaikkan trafik bagi blog kita juga nantinya, bila si pengunjung blog menyukai konten yang di posting akan secara otomatis biasanya pengunjung akan menshare postingan blog kita ke Media Sosial.

Postingan ini mampu digunakan nantinya untuk di Blogger dan Wordpress dan juga sebagai solusi untuk Error HTML5 yang kita gunakan dari link twitter untuk menampilkan secara otomatis judul postingan di box tweet. Di Postingan ini Cara Membuat Sticky Share Button Blogger akan menggunakan font awesome, jadi teman wajib memasang font awesome terlebih dahulu di blognya Nah bagi teman yang ingin mencobanya mari kita simak bersama.

Langkah Pertama

Silahkan teman salin dan gunakan kode-kode yang saya berikan dibawah ini 

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> 

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} 

Langkah Ke Dua
Setelah aba-aba tersebut disalin kita lanjut ke cara penerapannya sebagai berikut :

Penerapan di Wordpress
Silahkan teman salin aba-aba CSS dibawah ini di style.php kemudian teman buka file footer.php lalu pastekan aba-aba javascript tepas diatas aba-aba </body>. Nah kalau mau tombol share supaya tidak muncul di Homepage maka lakukan cara buka index.php lalu silahkan teman salin aba-aba yang saya berikan dibawah ini dan letakkan sempurna di bawah aba-aba <?php get_header(); ?>

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

Nah itu beliau cara penerapan di Wordpress bagaimana untuk di Blogger.

Penerapan di Blogger
Langkah penerapannya silahkan teman salin aba-aba CSS lalu letakkan di atas ]]></b:skin> atau mampu juga di aba-aba </style> setelah itu salin aba-aba Javascript lalu simpan sempurna diatas </body>. Lalu bagaimana kalau teman ingin share button-nya ingin muncul di halaman postingan saja, nah silahkan teman mampu tambahkan tag conditional khusus untuk halaman postingan di aba-aba javascript lalu tambahkan aba-aba //<![CDATA[ kemudian //]] fungsinya semoga tanda quote di javascript tidak berubah dan tidak terdeteksi ibarat error atau berwarna merah jadi nantinya aba-aba javascript-nya ibarat 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="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>

Perhatikan baik-baik cara penerapan kodenya, saran saya untuk media berguru ada baiknya templated teman di backup terlebih dahulu bila terjadi error mampu di kembalikan lagi. Dan..selesai, selamat mencoba bila masih galau silahkan berkomentar.