KODE IKLAN DFP 1 Cara Membuat Sticky Share Button Blogger | Masgunggoyo

Recents Posts

    Iklan Atas Artikel

    Cara Membuat Sticky Share Button Blogger

    KODE IKLAN 200x200
    KODE IKLAN 336x280
    Cara Membuat Sticky Recent Post Slide Out On Scroll 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 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

    <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="Cara Membuat Sticky Share Button Blogger">\     <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="Cara Membuat Sticky Share Button Blogger">\     <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="Cara Membuat Sticky Share Button Blogger">\     <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="Cara Membuat Sticky Share Button Blogger">\     <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 == &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="Cara Membuat Sticky Share Button Blogger">\     <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="Cara Membuat Sticky Share Button Blogger">\     <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="Cara Membuat Sticky Share Button Blogger">\     <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="Cara Membuat Sticky Share Button Blogger">\     <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.

    Sumber https://www.dibalikseo.com
    KODE IKLAN 300x 250
    close
    ==[ Klik disini 1X ] [ Close ]==
    KODE IKLAN DFP 2
    KODE IKLAN DFP 2