Like Box Facebook adalah box atau kotak media like facebook yang terintegrasi dengan halaman posting blog sehingga secara otomatis akan menambah like pada halaman facebook langsung dari halaman entri posting posting blog. Untuk penempatannya sangat gampang karena langsung di halaman layout dan add gadget.
Tombol Like Box Facebook akan mempermudah visitor untuk menyukai halaman facebook yang sudah diintegrasikan dengan isi posting blog dan juga akan menambah cantik tampilan pada entri posting blog dan kemungkinan besar akan kembali lagi di lain waktu.
Cara meletakkan Like Box Facebook pada blog.
Masuk ke akun blogger.
Masuk ke menu tab Layout > Add a Gadget.
Letakkan semua kode dibawah ini pada Gadget tersebut kemudian tekan tombol SAVE.
<style type='text/css'>
/* Skin Design Share Box */
#box-message {
position:absolute;
bottom:-1000px;
right:10px;
width:300px;
height:auto;
padding:10px;
background:#fff;
font:normal Dosis, Georgia, Serif;
color:#111;
border:2px solid #333;
-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:1px;
-moz-border-radius:1px;
border-radius:10px;
}
#box-message a.close {
position:absolute;
top:-10px;
right:-10px;
background:#fff;
font:bold 16px Arial, Sans-Serif;
text-decoration:none;
line-height:22px;
width:22px;
text-align:center;
color:#111;
border:2px solid #333;
-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;
}
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type='text/javascript'>
$(window).bind("load", function() {
// Animate Top Value When Page Loaded Completed
$('#box-message').animate({bottom:"10px"}, 20000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<center>
<iframe src="https://www.facebook.com/plugins/like.php?href=https%3A%2F%2Fdevelopers.facebook.com%2Fdocs%2Fplugins%2F&width=450&layout=standard&action=like&size=small&show_faces=true&share=true&height=80&appId=360622741133884" width="300" height="200" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allow="encrypted-media"></iframe>
</center>
<!-- HTML End -->
<a class='close' href='#'>×</a>
</div>
Pada teks box hijau adalah posisi Box Share dan animasi slide pada halaman blog dan bisa dirubah sesuai selara.
Pada teks box orange adalah kode facebook developers dan ganti dengan facebook developers kamu.
Jika semua selesai dan sesuai dengan tutorial diatas, maka lihatlah hasilnya!.
Demikian tutorial yang bisa kami sampaikan, jika kurang dipahami silahkan tinggalkan pesan.
Show Parser Hide Parser