Cara Membuat Widget Fans Page Melayang IV

Di antara sekian postingan tentang pembuatan widget Fans Page maupun iklan melayang masih saja ada yang tidak berhasil. Ketidak berhasilan itu lantaran template yang digunakan berbeda-beda, itu sebabnya ketika menggunakan Cara Membuat Fans Page Melayang I gagal, harus mencoba Cara Membuat Fans Page Melayang II. Jika Cara Membuat Fans Page Melayang II gagal harus dicoba Cara Membuat Fans Page Melayang III sedangkan jika Cara Membuat Fans Page Melayang III gagal juga harus dicoba menggunakan Cara Membuat Fans Page Melayang IV ini. Begitu seterusnya.

Sebenarnya saya sendiri termasuk orang yang agak anti dengan Fans Page melayang, makanya saya pernah menuliskan Bagaimana Cara Menghindari Iklan atau Fans Page Melayang yang Tidak Ada Fasilitas Close-nya. Karena iklan melayang itu pada dasarnya mengganggu pembaca, apalagi di sana seolah-olah dipaksa untuk klik lantaran tidak ada tombol close-nya. Langsung saja, sekarang akan menjelaskan Cara Membuat Widget Fans Page Melayang IV jika memang cara-cara sebelumnya tidak berhasil.

1. Login Blogger dan buka Dasbor
2. Pilih Tata Letak, terserah tempatnya
3. Klik HTML/Java Scrit
4.  Paste kode skrip 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, ikuti perkembangannya</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/eraterbuka?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=EraTerbuka&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>
<a class='close' href='#'>&times;</a>
</div>

Keterangan:

• Warna hijau ganti dengan pesan
• Warna Merah ganti dengan url Fanspage
• Warrna Biru ganti dengan nama aku Twitter. Contoh: @EraTerbuka

5. Simpan dan selesai.

Simpel, kan? Saya rasa, cara ini lebih mudah dari cara-cara sebelumnya dan kebetulan saya coba secara langsung untuk beberapa saat. Semoga tulisan ini bermanfaat bagi kalian yang ingin membuat Fans Page atau iklan melayang. Enjoy with BER-BAGI.blogspot.com.