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.
kemudian salin kode berikut ini dan letakkan di dalamnya.
//Silahkan anda sesuaikan sendiri<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>
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.
Posting Komentar
Untuk menyisipkan gambar, gunakan tag <i rel="image">URL GAMBAR ANDA...</i>
Untuk menyisipkan kode, gunakan tag <i rel="pre">KODE ANDA...</i>
Untuk menciptakan efek tebal gunakan tag <strong>TEKS ANDA...</strong>
Link aktif akan dimatikan secara otomatis.
NB: Jika ingin menuliskan kode pada komentar harap gunakan Tool untuk mengkonversi kode tersebut agar kode bisa muncul dan jelas atau gunakan tool dibawah "Konversi Kode di Sini!".
NB: Jika ingin menuliskan komentar yang keluar dari topik pada artikel ini silahkan kehalaman OOT (Out Of Topic) dengan menekan tombol OOT di bawah ini.