17 January 2015

Home » , » Cara Membuat Popup Like Facabook Melayang di Blog

Cara Membuat Popup Like Facabook Melayang di Blog

Written By AdukCampurAduk on 17 January 2015 | Saturday, January 17, 2015

   Kali ini kita akan bahas tentang salah satu widget yang cukup banyak di pakai oleh para blogger dalam mengisi tampilan blognya yaitu Like Box Facebook Page. Dan bagaimana Cara Membuat Popup Like Facabook Melayang di Blog di blog ??
Kelebihan Like Box ini adalah like box akan selalu tampil baik di halaman depan blog atau di tampilan artikel, dan meskipun kita berpindah ke artikel lain like box ini akan selalu muncul selama adana masih di blog yang sama, juga di lengkapi Twitter Follow dan juga tombol close.
image

Langkah-langkahnya sebagai berikut
1. Seperti bisa Login ke Blogger.
2. Masuk ke Layout, dan klik Add a Gadget.
3. Pilih mode HTML/Javascript
4. Masukan Script berikut :

<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">MONGGO DI LIKE DULU</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/adukcampuraduk&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=Ivanzzna&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

- Ganti tulisan merah sesuai keinginan anda
- Ganti tulisan hijau dengan alamat Fans Page Facebook anda
- Ganti tulisan biru dengan username Twitter
5. Setalah selesai tinggal Save.
Share this article :

2 comments:

  1. Terima kasih Infonya Bro, izin ikut menerapkan ya. hehe

    Informasi Lowongan Kerja Terbaru BUMN, Persero, Swasta, & Berbagai Perusahaan Besar di Indonesia : http://expocpnsbumn.blogspot.com

    ReplyDelete
  2. mantab.. terimakasih banyak buat script tutorialnya...

    http://bit.do/2SXk

    ReplyDelete

 
Support : Facebook
Copyright © 2013-2015. Aduk Campur Aduk - All Rights Reserved
Proudly powered by Blogger