Banyak cara untuk memasang Widget Like Box Facebook di Blog salah satunya dengan model melayang atau floating. Widget Like Box Facebook Melayang di Blog ini memiliki tombol close untuk menghilangkan atau menutup widget like box tersebut sehingga tidak begitu menganggu pembaca setia blog kita.
Widget Like Box Facebook Melayang di Blog ini sudah disatukan dengan follow dari twitter, ingin tau cara memasangnya silahkan simak caranya dibawah ini.
Cara Membuat Widget Like Box Facebook Melayang Di Blog :
- Login Ke Blogger
- Pilih Tata Letak kemudian Tambah Gadget
- Klik HTML/JavaScript
- Masukan Code Dibawah Ini
<style type="text/css" scoped>
/* Message Box */
#box-message{position:fixed !important;position:absolute;top:1000px;left:50%;margin:0px 0px 0px -182px;width:390px;height:auto;padding:16px;background:#000000;font:normal Dosis, Georgia, Serif;color:#CC0000;border:1px solid #333333;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;border-radius:22px;cursor:pointer;}
#twitterx{background: #EEF9FD;padding: 10px;text-align:center;border: 1px solid #C7DBE2;border-top: 0;}
</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({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<div style="text-align: center;"><a class="murub">Jangan Lupa Like Ya Teman</a></div>
<div style="text-align: center;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/lampungtrainer" data-width="390" data-height="260" data-colorscheme="dark" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div></div>
<!-- HTML End -->
<div style="text-align: center;"><div class="twitter">Lampung-Trainer
<!-- Twitter --></div></div>
<a class='close' href='#'>×</a>
</div>
/* Message Box */
#box-message{position:fixed !important;position:absolute;top:1000px;left:50%;margin:0px 0px 0px -182px;width:390px;height:auto;padding:16px;background:#000000;font:normal Dosis, Georgia, Serif;color:#CC0000;border:1px solid #333333;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;border-radius:22px;cursor:pointer;}
#twitterx{background: #EEF9FD;padding: 10px;text-align:center;border: 1px solid #C7DBE2;border-top: 0;}
</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({top:"50px"}, 1000);
// Remove Mailbox When Close Button On Click
$('a.close').click(function() {
$(this).parent().fadeOut();
return false;
});
});
</script>
<div id='box-message'>
<!-- HTML Start -->
<div style="text-align: center;"><a class="murub">Jangan Lupa Like Ya Teman</a></div>
<div style="text-align: center;">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/id_ID/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="https://www.facebook.com/lampungtrainer" data-width="390" data-height="260" data-colorscheme="dark" data-show-faces="true" data-header="true" data-stream="false" data-show-border="true"></div></div>
<!-- HTML End -->
<div style="text-align: center;"><div class="twitter">Lampung-Trainer
<!-- Twitter --></div></div>
<a class='close' href='#'>×</a>
</div>
- Ganti Tulisan Warna Merah dengan URL Halaman Facebook Kita.
- Ganti tulisan Warna Biru dengan URL widget twitter kita.
- Simpan
- Selesai Dan Lihat Hasilnya.
Referensi :
