20.05
8
Like Box Facebook Melayang
Sebelumnya saya sudah post tentang cara membuat likebox di blog, dan sekarang saya akan post tentang Likebox Fanspage FB dan follow twitter melayang. widget ini dapat memancing pengunjung untuk men-like fanspage kita, dikarenakan muncul di awal blog dibuka. seperti yang terpasang diblog saya.
Langsung menuju cara pemasangan
  1. Login dulu ke akun Blogger
  2. Buka Tata Letak.
  3. Klik Tambah Gadget.
  4. Lalu, Pilih HTML/Java Script
  5. Lalu Masukin kode Java Script dibawah ini kedalam kotak yang telah di sediakan.
<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">Jangan Lupa Likenya</a></center>
<center>
<div class="fb-like-box" href="https://www.facebook.com/vxcdcenter" width="287" height="235" faces="true" stream="false" border="true" header="true"></div>
</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=rendy_vxc&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
<br />
<div style="text-align:center">
<span style="float:right; color:#000000;">Get this <a target="_blank" href="http://rendy-vxc.blogspot.jp/2013/06/like-fanspage-dan-twitter-melayang-di.html"> widget! </a></span>
</div>
</div>
<script type="text/javascript">
var gb = document.getElementById("gb");
gb.style.right = (50-gb.offsetWidth).toString() + "px";
</script>
Keterangan kode berwarna :

  • Biru : terserah mau diganti apa. contoh Like ya, Tolong dilike. 
  • Merah : Link fansPage kalian
  • Hijau : ganti dengan username twitter kalian.
     6. Simpan dan lihat hasilnya.

8 komentar: