Cara Membuat Fanspage Facebook Melayang di Blog

Cara Membuat Fanspage Facebook Melayang di Blog

Dunia TNT - Pasti agan semua pernah melihat kotak fanspage facebook melayang di blog bukan ? Di blog ini pun juga memasang kotak fanspage beserta follow twitternya melayang di blog ini, dan bahkan bisa dilihat dengan membuka halaman beranda blog ini.

Widget ini pun juga salah satu cara alternatif untuk mengatasi masalah jika di samping blog agan sudah penuh dengan widget lainnya, cara ini juga termasuk cara paling ampuh untuk meningkatkan jumlah fanspage blog agan, jika ingin memasang widget ini silahkan ikuti tutorial berikut :

1. Buka Dashbor Blog agan

2. Pilih tata letak

3. Klik HTML/Java script

4. Copy kode script di bawah 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">Kalau Bermanfaat, Silahkan like blog ini ya!!!</a></center>

<center>

<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/DuniaTNT?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=alifrayhan2&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

<div style="text-align: center;">

<a href="http://duniatnt.blogspot.com/2014/12/cara-membuat-fanspage-facebook-melayang.html" target="_blank">Get This Widget</a></div>

<a class='close' href='#'>&times;</a>

</div>

5. Silahkan Ganti Tulisan ini!

        (Edit nya hati hati , jangan sampai ada kode yang kehapus)

• Yang Berwarana Hijau : Tulisan atau pesan agan
• Yang Berwarna Merah : URL Fanspage agan
• Yang Berwarna Biru     : username Twitternya,(misalnya : @alifrayhan2 maka menjadi alifrayhan2)

6.Save, selesai., hasil nya seperti gambar di bawah ini :

ohiya, berikut permasalahan yang sering terjadi : 

1. Tombol Close Tidak Muncul ? 

• Solusi nya : Jangan Sampai kehapus kode ini <a class='close' href='#'>times;</a> , karena kode itu kode buat munculin tombol close nya.

2. Like Facebook nya tidak muncul, yang muncul hanya follow twitternya aja ? 

• Solusinya : pastikan URL fanspage nya benar, contoh URL fanspage saya : https://www.facebook.com/DuniaTNT , karena jika salah memasukan URL nya, tombol like fanspage gak akan muncul.

 Note : Please, Don't copy my article!!