Memasang Fans Page Like Box Dengan Dampak Bounce

Memasang Widget Fans Page Like Box Dengan Efek Bounce

Fans Page atau Like Box pastinya sangat di butuhkan oleh web/blog dalam melaksanakan optimalisasi SEO pada sosial media. Telah banyak fans page yang beredar di tiap blog dengan bentuknya yang beragam. Namun, sering ada blogger yang menggunakan fans page dengan tema usang atau jadul, yaitu fanspage yang masih menggunakan code <iframe> dan tag epilog </iframe>. Sekedar himbauan bagi yang belum mengetahui pengaruh dari arahan tersebut kurang manis untuk blog, alasannya ialah akan menciptakan loading pada blog menjadi lebih berat dan hal tersebut akan mengganggu visitor.

Saya sarankan untuk meninggalkan kebiasaan menggunakan iframe tersebut dan gunakan fans page terbaru dari facebook. Bila ingin melihat-lihat tema fanspage yang sanggup Anda pergunakan, silahkan lihat disini

Beralih ke cara memasang fans page like box dengan pengaruh bounce. Sekedar pemberitahuan bahwa fans page dengan pengaruh bounce ini sangat ringan untuk blog, alasannya ialah desainnya yang sangat minimalis dan tidak menggunakan iframe. Saya menyediakan fans page ini dalam dua model, yaitu dengan background gelap dan terang. Jadi, Anda sanggup memilih pilihan fans page yang sesuai dengan template blog Anda. Bila tertarik silahkan simak cara pemasangannya.

Cara pemasangannya sangat mudah, Anda tinggal memasukkan code berikut pada Tata Letak > Add Widget > HTML/JavaScript.

Fans Page Background Gelap

<style> #kotak-pesan{ position:fixed !important; position:absolute; /* IE6 */ top:-1000px; z-index:999; left:14%; margin:0px 0px 0px -180px; width:180px; height:auto; padding:0px; background:#242424; border:2px solid #242424; font:normal 1em Cambria,Georgia,Serif; color:#111; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); } #kotak-pesan a.close{ position:absolute; top:-10px; right:-10px; background:#333; font:bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#fff; border:2px solid #fff; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:22px; cursor:pointer; } #floatleft { float:left; padding:5px 2px; } </style> <p>    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script><br />     <script type='text/javascript'>     $(window).bind("load", function() {     // animasikan nilai top ketika halaman telah tamat dimuat     $('#kotak-pesan').animate({top:"91px"}, 9000, "easeOutBounce");     // hilangkan kotak pesan ketika tombol (x) diklik     $('a.close').click(function() {     $(this).parent().slideUp(800, "easeOutBounce");     return false;     });     });     </script></p> <div id='kotak-pesan'> <div class="fb-like-box" data-href="https://www.facebook.com/opickweblog" data-width="100" data-show-faces="false" data-colorscheme="dark" data-stream="false" data-show-border="false" data-header="false"></div> <div id="fb-root"> </div> </div>

Fans Page Background Terang

<style> #kotak-pesan{ position:fixed !important; position:absolute; /* IE6 */ top:-1000px; z-index:999; left:14%; margin:0px 0px 0px -180px; width:180px; height:auto; padding:0px; background:#FFF; border:2px solid #FFF; font:normal 1em Cambria,Georgia,Serif; color:#111; -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4); box-shadow:0px 1px 3px rgba(0,0,0,0.4); } #kotak-pesan a.close{ position:absolute; top:-10px; right:-10px; background:#333; font:bold 16px Arial,Sans-Serif; text-decoration:none; line-height:22px; width:22px; text-align:center; color:#fff; border:2px solid #fff; -webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.4); -moz-box-shadow:0px 1px 2px rgba(0,0,0,0.4); box-shadow:0px 1px 2px rgba(0,0,0,0.4); -webkit-border-radius:22px; -moz-border-radius:22px; border-radius:22px; cursor:pointer; } #floatleft { float:left; padding:5px 2px; } </style> <p>    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.5/jquery-ui.min.js'></script><br />     <script type='text/javascript'>     $(window).bind("load", function() {     // animasikan nilai top ketika halaman telah tamat dimuat     $('#kotak-pesan').animate({top:"91px"}, 9000, "easeOutBounce");     // hilangkan kotak pesan ketika tombol (x) diklik     $('a.close').click(function() {     $(this).parent().slideUp(800, "easeOutBounce");     return false;     });     });     </script></p> <div id='kotak-pesan'> <div class="fb-like-box" data-href="https://www.facebook.com/opickweblog" data-width="100" data-show-faces="false" data-colorscheme="light" data-stream="false" data-show-border="false" data-header="false"></div> <div id="fb-root"> </div> </div>

Silahkan ganti https://www.facebook.com/opickweblog dengan alamat fans page Anda.

Bila fans page tidak muncul, tunggu saja hingga loading blog Anda selesai, alasannya ialah fans page ini akan muncul ketika blog Anda telah tamat di muat sehingga tidak mengganggu loading blog. Namun, kalau tidak muncul juga silahkan ikuti cara berikut.

Setelah memasang widget fans page, buka Template kemudian Edit Template. Masukkan code berikut sempurna di atas code </body> kemudian save.

<script type='text/javascript'> //fb (function(){var fb1=document.createElement('script');fb1.type='text/javascript';fb1.async=true;fb1.src='http://connect.facebook.net/id_ID/all.js#xfbml=1','facebook-jssdk';var fb2=document.getElementsByTagName('script')[0];fb2.parentNode.insertBefore(fb1,fb2)})(); </script>

Sekian tutorial perihal cara memasang fans page dengan pengaruh bounce, berikan komentar Anda kalau ada yang ingin di tanyakan. Terima Kasih.