Cara Membuat Like Box Facebook Dengan Fungsi Slide

Baca Juga

Cara Membuat Like Box Facebook Dengan Fungsi Slide – saya yakin sobat sudah tidak asing lagi dengan Like Box Facebook yang biasanya berada di sebuah blog dengan menampilkan penawaran untuk bergabung ke Fanspage Facebook milik sobat. yang jelas untuk membuat widget Like Box Facebook ini sobat sudah harus memilki FansPage Facebook milik sobat sendiri.

Lalu apa Keuntungannya?

Tentu saja jika pengunjung meng like Fans Page, pengunjung bisa mengetahui postingan terbaru dari fanspage tadi (fanspage milik sobat) sehingga dapat menambah Pageview blog dan artikel di blog sobat, terlebih lagi jika Widget Like Box Facebook ini di pasang di blog sobat maka like nya akan bertambah banyak.

Baca juga : Cara Memasang Spoiler di Postingan atau Artikel Blog 

Like Box Facebook yang saya buat ini akan muncul dengan fungsi Slide di halaman blog sobat sehingga akan tampak keren dan menambah kesempatan pengunjung untuk meng like Fanspage tersebut. Baiklah, langsung saja kita cari tahu cara membuatnya berikut ini.

Demo  : http://abuabu-template.blogspot.co.id/

1. Login ke Blog sobat > letakkan kode di bawah ini di atas kode ]]><b:skin

]]><b:skin

#boxslide {
    position: fixed!important;
    position: absolute;
    top: 70px;
    z-index: 999;
    right: -1000px;
    width: 300px;
    margin: 296px 0 0 -182px;
    height: auto;
    font: normal 12px Arial,Sans-Serif;
    padding: 8px 10px 20px 10px;
    background-color: rgba(255, 255, 255, 0.56);
    line-height: 1em;
    -webkit-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    -moz-box-shadow: 0 1px 3px rgba(0,0,0,.4);
    box-shadow: 0 1px 3px rgba(0,0,0,.4);
}
#boxslide h2 {
    font-size: 14px;
    line-height: 16px;
    font-weight: 700;
    margin-bottom: 5px;
    text-transform: uppercase;
    padding: 8px;
    border-bottom: 1px solid #eee;
}
#boxslide h2:after {
    content: "";
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 150px;
    height: 1px;
    background: #e1a66c;
}
#boxslide a.close{position:absolute;bottom:0;left:0;background-color:transparant;font:normal bold 20px Arial,Sans-Serif;text-decoration:none;line-height:22px;width:22px;text-align:center;color:#444;transform:rotate(0);cursor:pointer}
#boxslide a.close:hover{transform:rotate(360deg);color:#efb16f;}

2. setelah itu silahkan sobat letakkan kode di bawah ini di bagian Tata Letak > Buat Widget baru > HTML/Javascript.

<div id='boxslide'>
<h2>Like us</h2>
isi kode like box kamu disini
    <a class='close' href='#'>x</a>
</div>

Keterangan:

Ganti kode isi kode like box kamu disini dengan alamat Url Fans Page Facebook sobat.

3. kemudian cari kode </body> dan letakkan kode di bawah ini di atas kode </body>

</body>

<script type='text/javascript'>
$(window).bind("load", function() {

    // animasikan nilai top saat halaman telah selesai dimuat
    $('#boxslide').animate({right:"5px"}, 1000);

    // hilangkan kotak pesan saat tombol (x) diklik
    $('a.close').click(function() {
        $(this).parent().fadeOut();
        return false;
    });

});
</script>

4. simpan Template dan Lihat hasilnya.

Baca juga : Cara Membuat Tool Parse HTML Pada Halaman Statis

Untuk mengambil kode Like Boxnya silahkan ambil di sini :

https://developers.facebook.com/docs/plugins/page-plugin

Demikianlah tutorial mengenai Cara Membuat Like Box Facebook Dengan Fungsi Slide, semoag artikel ini dapat memberikan ilmu yang bermanfaat dan selamat mencoba untuk sobat pembaca semua.