Memasang Fans Page Like Box Dengan Efek Bounce

Memasang Widget Fans Page Like Box Dengan Efek Bounce

Fans Page atau Like Box pastinya sangat di butuhkan oleh web/blog dalam melakukan 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 lama atau jadul, yaitu fanspage yang masih memakai code <iframe> dan tag penutup </iframe>. Sekedar himbauan bagi yang belum mengetahui efek dari kode tersebut kurang bagus untuk blog, karena akan membuat 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 bisa Anda pergunakan, silahkan lihat disini

Beralih ke cara memasang fans page like box dengan efek bounce. Sekedar pemberitahuan bahwa fans page dengan efek bounce ini sangat ringan untuk blog, karena desainnya yang sangat minimalis dan tidak menggunakan iframe. Saya menyediakan fans page ini dalam dua model, yaitu dengan background gelap dan terang. Jadi, Anda dapat menentukan 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 saat halaman telah selesai dimuat
    $('#kotak-pesan').animate({top:"91px"}, 9000, "easeOutBounce");
    // hilangkan kotak pesan saat 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 saat halaman telah selesai dimuat
    $('#kotak-pesan').animate({top:"91px"}, 9000, "easeOutBounce");
    // hilangkan kotak pesan saat 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 sampai loading blog Anda selesai, karena fans page ini akan muncul ketika blog Anda telah selesai di muat sehingga tidak mengganggu loading blog. Namun, bila tidak muncul juga silahkan ikuti cara berikut.

Setelah memasang widget fans page, buka Template lalu Edit Template. Masukkan code berikut tepat di atas code </body> lalu 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 tentang cara memasang fans page dengan efek bounce, berikan komentar Anda bila ada yang ingin di tanyakan. Terima Kasih.

Bagikan Artikel ini