Membuat Widget FP Melayang Mudah di Blogger

Membuat Widget FP Melayang Mudah di Blogger

Awalnya saya coba cari artikel tentang cara membuat widget fanspage yang melayang di blogger dan akhirnya ketemu juga cara-caranya dengan mudah, langsung saja cekidot dibawah ini :

1. Login ke Blogger
2. Buka Dasbor Blog
3. Pilih Tata Letak
4. Pilih Edit HTML/JavaScript
5. Masukkan Kode 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">Like Our Fanspage</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/GrosirBrosSurabayaPage?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=Mnurwahid&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<div style="text-align: center;">
<a href="http://fujianto21-chikafe.blogspot.com/2013/10/cara-membuat-fanspage-melayang-di-blog.html" target="_blank">Get This Widget</a></div>
<a class='close' href='#'>&times;</a>
</div>

6. Silahkan Ganti Tulisan dibawah ini
    - Ganti tulisan yang berwarna HIJAU = Tulisan / Isi Pesan
    - Ganti tulisan yang berwarna  MERAH = Link Halaman Fanspage (Url Fanspage)
    - Ganti tulisan yang berwarna BIRU = Username Twitter (Misal @Mnurwahid = Mnurwahid)

7. Hasilnya seperti dibawah ini

Like Our Fanspage

Get This Widget

×

Cara Membuat Like Fanspage diblog Terbaru

Cara Membuat Like Fanspage diblog Terbaru

Langkah-langkah Memasang Fanspage di Blog :
1. Login ke akun facebook anda
2. Buka link facebook developer disini
3. Pada Facebook Page URL silahkan masukkan link fanspage anda
4. Klik Get Code
5. Pilih dan klik IFRAME
6. Copy paste kodenya

Cara Meletakkan Kode ke Blogger :

1. Login dan Masuk ke akun blogger anda
2. Pilih Tata Letak
3. Klik Tambah Gadget
4. Pilih HTML/JavaScript
5. Masukkan kode yang sudah di copy (langkah no.5-6)
6. Kemudian SAVE/ Simpan

Sumber Info : http://m-nurwahid.blogspot.com/2014/02/cara-membuat-like-fanspage-di-blog.html