Tuesday, January 8, 2013

Facebook Like Box Muncul dari Atas

Sebelumnya saya membahas tentang cara membuat widget Recent Comment Dengan Avatar, dan pada kesempatan kali ini saya akan membahas cara membuat Facebook Like Box Muncul Dari Atas. Ini merupakan hasil modifikasi saya dari tutorial sebelumnya yaitu Widget kotak Berlangganan Muncul dari Atas, saya hanya merubah sedikit tampilan boxnya dan menambahkan widget facebook like box di dalamnya seperti gambar diatas.

Cara Pemasangan:

- Masuk ke Tata Letak > Tambah Gadget > HTML/JavaScript,
kemudian salin kode berikut ini dan letakkan di dalamnya.

<style type='text/css'>
#fblikebox {
overflow:display;
position:fixed !important;
top:-1000px;
left:50%;
width:332px;
margin:0 0 0 -182px;
height:auto;
padding:16px;
background-color:#f3f3f3;
border:4px solid #AD3000;
border-radius:25px;-moz-border-radius:25px;-webkit-border-radius:25px;
font:normal normal 13px Cambria,Georgia,Serif;
color:#111;
-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);
}
#fblikebox::after, #fblikebox::before {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none
    }

#fblikebox::before {
    border-top-color: #AD3000;
    border-width: 15px;
    left: 10%;
    margin-left: -5px
    }

#fblikebox::after {
    border-top-color: #f3f3f3; /* Samakan dengan warna background */
    border-width: 9px;
    left: 10%;
    margin-left: 1px
    }
#fblikebox a.close {
position:absolute;
top:-15px;
right:20px;
background-color:#333;
font:normal bold 16px Arial,Sans-Serif;
text-decoration:none;
line-height:22px;
width:25px;
text-align:center;
color:white;
border:2px solid #AD3000;
border-radius:15px;-moz-border-radius:15px;-webkit-border-radius:15px;
cursor:pointer;
}
</style>
<div id='fblikebox'>

<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fkumpulangamesartikelsoftware&width=292&height=270&show_faces=true&colorscheme=light&stream=false&border_color=%23AD3000&header=false&appId=430029853730958" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:270px;" allowtransparency="true"></iframe>

<a class='close' href='#'>×</a>
</div>

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

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

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

});
//]]>
</script>

//Silahkan anda sesuaikan sendiri

Keterangan:

Ganti tulisan kumpulangamesartikelsoftware dengan ID fanpage facebook anda., atau anda juga bisa mengganti kode widget facebook like box dengan kode anda. Lihat semua kode yang berwarna hijau.

Lihat kode F3F3F3 tepatnya yang saya tebalkan, jika anda ingin menggantinya dengan warna lain maka kedua kode tersebut harus sama.

Judul: Facebook Like Box Muncul dari Atas; Ditulis oleh Unknown; Rating Blog: 5 dari 5