Cangciment.blogspot.com - Bagi blogger pemula seperti saya mungkin belum banyak yang tahu bagaiman cara membuat like box melayang, karena itu cankciment akan membagi bagaimana caranya untuk Membuat Like Box Facebook dan Twitter Melayang. Tentu bagi para master cara ini sudah lama diketahui, tapi apa salahnya untuk membagi sedikit ilmu yang saya punya untuk kemajuan blogger indonesia. hehehehe....
Langkah -langkah untuk membuatnya simak dibawah ini :
1. Tentunya kalian harus mempunyai Fanpage atau Halaman Facebook terlebih dahulu. Kalau belum punya kalian bisa membacanya Disini. Untuk membuat akun Twitter tekan Disini
2. Setelah kalian selesai membuat buka akun blogger kalian
3. Masuk ke Tata Letak, Add Widget pilih HTML/Java Script lalu copy paste code 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:#EDEAE7;
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">
Like First Before Read on</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/
all.infhormation&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=
Cankciment&show_count=& show_screen_name=&text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>×</a>
</div>
Catatan :
- Ganti tulisan yang berwarna Kuning sesuka kalian
- Ganti tulisan yang berwarna Merah dengan username Fanpage FB kalian
- Ganti tulisan yang berwarna Biru dengan username Twitte kalian
4. Jika semua telah benar tekan save dan lihat blog kalian,
Diantara kegunaan dari Like Box Facebook dan Twitter ini adalah blog kalian bisa semakin banyak mendapat pengunjung. Untuk cara share otomatis Fanpage FB dan Twitter kalian bisa baca Disini. Sekian