Cara Membuat Fanspage Melayang Di Blog- kita pasti pernah melihat kotak
facebook melayang di blog, pasti kita sudah pernah melihat bukan? Di
blog ini pun saya memasang kotak like fanspage beserta follow twitter
dibawah nya, dan bisa dilihat ketika membuka halaman beranda situs ini,
kotak nya melayang sendiri dari atas.
Widget ini pun, salah satu cara alternative, ketika banyak nya widget
yang penuh berjejeran di sidebar, memasang kotak like fanspage melayang
di blog ini solusi tepat untuk mengatasi penuh nya widget yang berada
di sidebar dan fanspage kita pun jadi nya banyak yang mengelike.
Dan untuk memasang nya , dibawah ini adalah langkah langkah untuk
membuat kotak widget like fanspage beserta Twitter melayang di blog:
1.Buka Dasbor Blog
2. Pilih Tata Letak
3. Klik HTML/Java Scrit
4. Pastekan Kode Scrit 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">Kalau Bermanfaat,Silahkan Di like</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/pages/As-SI/582141785202442?ref=hl&width=292&height=258&colorscheme=light&show_faces=true&border_color&stream=false&header=false&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& align=&button=blue&id=twitter_tweet_button_0& lang=ID&link_color=&screen_name=systeminformasi&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>×</a>
</div>
5. Silahkan Ganti Tulisan:
yang Kalau Bermanfaat,Silahkan Dilike : Tulisan atau pesan nya
Yang https://www.facebook.com/pages/As-SI/582141785202442 : Url Fanspage nya
Yang : username Twitternya ,( misal @systeminformasi maka jadi systeminformasi)
6.Save, selesai., hasil nya seperti gambar di bawah ini
Post a Comment