Widget Fanspage Facebook Dan Twitter Melayang Di Blog

Hello.. Sobat BagasUnix, ketemu lagi dengan saya :D

Kali ini saya ingin membagikan cara memasang Widget Fanspage Facebook dan Twitter Melayang di Blog. Sering kali saya liat di blog yang lain, mereka kebanyakan memakai Widget Fanspage Facebooknya untuk promosiin Fanspage Blognya tersebut. Selain Widget Fanspage Facebook itu hanya di sidebar ada juga yang melayangnya, kali ini saya akan membagikan cara memasang widget fanspage facebook dan twitter melayang di blog.

Ok langsung saja.

1. Buka Blogger,
2. Masuk ke Dasbor Blog,
3. Kemudian Klik Tata Letak,
4. Tambahkan Gedget, (Terserah mau sobat taruh mana)
5. Masukan script dibawah ini,

 <style type='text/css'>
/* Message Box */
#box-message {
position:fixed !important;
position:absolute;
top:-1000px;
left:50%;
margin:0px 0px 0px -182px;
width:300px;
height:auto;
padding:16px;
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:10px;
-moz-border-radius:10px;
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;
}
#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 -->
<center><a class="murub">Silahkan dilike untuk update lainnya ^_^</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/BagasUnix?ref=hl&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=371524026202784" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe>
</center>
<!-- HTML End -->
<br/>
<div class="twitter">
<!-- Twitter --> <iframe title="" style="width: 250px; height: 20px;" class="twitterx-follow-button" src="http://platform.twitter.com/widgets/follow_button.html#_=1319978796351&amp; align=&amp;button=blue&amp;id=twitter_tweet_button_0&amp; lang=ID&amp;link_color=&amp;screen_name=Aldinopratama04&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div style="text-align: center;">
<a href="http://bagasunix.blogspot.com/2015/08/widget-fanspage-facebook-dan-twitter-melayang-di-blog.html" target="_blank">Get This Widget</a></div>
<a class='close' href='#'>&times;</a>
</div> 

6. Ganti Tulisan BagasUnix dan Aldinopratama04, ganti dengan fp dan twitter sobat.
7. Klik Simpan Setelan dan lihat lah di blog sobat ^_^

Jika ada yang tidak sesuai dengan template sobat silahkan di edit / modif sendiri :D