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 adalah 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, jika si pengunjung blog menyukai konten yang di posting akan secara otomatis biasanya pengunjung akan menshare postingan blog kita ke Media Sosial.
Postingan ini bisa 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 sobat wajib memasang font awesome terlebih dahulu di blognya Nah bagi sobat yang ingin mencobanya mari kita simak bersama.
Langkah Pertama
Silahkan sobat salin dan gunakan kode-kode yang saya berikan dibawah ini
Kode Javascript
Kode CSS
Langkah Ke Dua
Setelah kode tersebut disalin kita lanjut ke cara penerapannya sebagai berikut :
Penerapan di Wordpress
Silahkan sobat salin kode CSS dibawah ini di style.php kemudian sobat buka file footer.php lalu pastekan kode javascript tepas diatas kode </body>. Nah kalau mau tombol share supaya tidak muncul di Homepage maka lakukan cara buka index.php lalu silahkan sobat salin kode yang saya berikan dibawah ini dan letakkan tepat di bawah kode <?php get_header(); ?>
Nah itu dia cara penerapan di Wordpress bagaimana untuk di Blogger.
Penerapan di Blogger
Langkah penerapannya silahkan sobat salin kode CSS lalu letakkan di atas ]]></b:skin> atau bisa juga di kode </style> setelah itu salin kode Javascript lalu simpan tepat diatas </body>. Lalu bagaimana kalau sobat ingin share button-nya ingin muncul di halaman postingan saja, nah silahkan sobat bisa tambahkan tag conditional khusus untuk halaman postingan di kode javascript lalu tambahkan kode //<![CDATA[ kemudian //]] fungsinya agar tanda quote di javascript tidak berubah dan tidak terdeteksi seperti error atau berwarna merah jadi nantinya kode javascript-nya seperti ini
Perhatikan baik-baik cara penerapan kodenya, saran saya untuk media belajar ada baiknya templated sobat di backup terlebih dahulu jika terjadi error bisa di kembalikan lagi. Dan..selesai, selamat mencoba jika masih bingung silahkan berkomentar.
<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 kode tersebut disalin kita lanjut ke cara penerapannya sebagai berikut :
Penerapan di Wordpress
Silahkan sobat salin kode CSS dibawah ini di style.php kemudian sobat buka file footer.php lalu pastekan kode javascript tepas diatas kode </body>. Nah kalau mau tombol share supaya tidak muncul di Homepage maka lakukan cara buka index.php lalu silahkan sobat salin kode yang saya berikan dibawah ini dan letakkan tepat di bawah kode <?php get_header(); ?>
<style scoped='scoped' type='text/css'>
#shareOnscroll{display:none}
</style>Nah itu dia cara penerapan di Wordpress bagaimana untuk di Blogger.
Penerapan di Blogger
Langkah penerapannya silahkan sobat salin kode CSS lalu letakkan di atas ]]></b:skin> atau bisa juga di kode </style> setelah itu salin kode Javascript lalu simpan tepat diatas </body>. Lalu bagaimana kalau sobat ingin share button-nya ingin muncul di halaman postingan saja, nah silahkan sobat bisa tambahkan tag conditional khusus untuk halaman postingan di kode javascript lalu tambahkan kode //<![CDATA[ kemudian //]] fungsinya agar tanda quote di javascript tidak berubah dan tidak terdeteksi seperti error atau berwarna merah jadi nantinya kode javascript-nya seperti 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>Perhatikan baik-baik cara penerapan kodenya, saran saya untuk media belajar ada baiknya templated sobat di backup terlebih dahulu jika terjadi error bisa di kembalikan lagi. Dan..selesai, selamat mencoba jika masih bingung silahkan berkomentar.
EmoticonEmoticon