....

Cara Membuat Fanspage Melayang Di Blog

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ اارَّحِيم

  • SUBHANALLAH
  • ALHAMDULILLAH
  • ALLAHU AKBAR
  • LA ILAHA ILLALLAH
  • ALLAHUMMA SHOLLI 'ALA MUHAMMAD
Cara Membuat Like Fanspage Melayang Di Blog, fanspage banyak like
 Cara Membuat Fanspage Melayang Di Blog- kita pasti pernah melihat kotak facebook melayang di blog, pasti kita sudah pernah melihat bukan? Di blog ini pun saya memasang kotak  like fanspage beserta follow twitter dibawah nya, dan bisa dilihat ketika membuka halaman beranda situs ini, kotak nya melayang sendiri dari atas, hehe..

 Widget ini pun, salah satu cara alternative, ketika banyak nya widget yang penuh berjejeran di sidebar, memasang kotak like fanspage melayang di blog ini solusi tepat untuk mengatasi  penuh nya widget yang berada di sidebar dan fanspage kita pun jadi nya banyak yang mengelike. Mungkin juga agan tertarik dengan artikel Cara Meningkatkat Pengunjung Difanspage Paling Ampuh
Dan untuk memasang nya , dibawah ini adalah langkah langkah untuk membuat kotak widget like fanspage beserta Twitter melayang di blog:

1.Buka Dasbor Blog

2. Pilih Tata Letak

3. Klik HTML/Java Script

4.  Pastekan Kode Script 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">Kalau Bermanfaat,Silahkan Dilke Ia</a></center>
<center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/Cirebon.Chikafe?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=fujianto21&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>

5.  Silahkan Ganti Tulisan ini!
 (Edit nya hati hati , jangan sampai ada kode yang kehapus)
  • yang Berwarana Hijau: Tulisan atau pesan nya
  • Yang warna Merah : Url Fanspage nya
  • Yang warna Biru : username Twitternya ,( misal @fujianto21 maka jadi fujianto21)
6.Save, selesai., hasil nya seperti gambar di bawah ini
Cara Membuat Fanspaged dengan twitter Melayang Di Blog

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 gak muncul hanya Twitter nya aja ? 
Solusinya : pastikan Url fanspage nya benar, contoh Url fanspage saya : https://www.facebook.com/Cirebon.Chikafe , karena jika salah memasukan url nya, jadi tombol like fanspage gak akan muncul.


 Demikian cara memasang kotak like fanspage dan twitter melayang di blog.

Semoga bermanfaat ia gan Cara Membuat Fanspage Melayang Di Blog
  • ASTAGHFIRULLAHAL 'ADZIM
  • Aku mohon ampun kepada Allah yang Maha Agung

28 Responses to "Cara Membuat Fanspage Melayang Di Blog"

  1. ini muncul di setiap page ya?? kalo bisa sih cuman 1 user 1 page aja, agar tidak mengganggu pengunjung,

    ReplyDelete
    Replies
    1. nanti akan saya amati lagi scrit nya, biar hanya muncul di 1 page saja

      Delete
  2. kok di saya gak muncul tanda close ya :(
    solusinya gimana nih mas ?

    ReplyDelete
    Replies
    1. Mungkin Template agan yang eror atau gak ada kesalahan saat memasukan script nya, soal nya yang lain nya pada bisa kok gan.

      Delete
  3. terima kasiihh gan.. sudah berhsil ^^
    mmpir yaa gan di blog ane juga

    ReplyDelete
  4. Gan Cara Ganti Warna Background Nya Gimana Ya ?

    ReplyDelete
    Replies
    1. pada kode background:#fff (Paling Atas) ; ganti kode #fff dengan kode warna nya, bisa di lihat beberapa kode warna pada menu pilihan di atas, Alat>Kode Warna.

      Delete
  5. "kotak melayangnya button like FBnya ngk muncul, hanya icon twitternya saja beserta info followernya yang benar, tolong bantu cek scriptnya" Sama kaya kasus ane nih,,, ngaturnya gimana enaknya?

    ReplyDelete
    Replies
    1. itu udah bener gan, mungkin pada saat pengeditan nya yang salah, coba edit dengan baik baik gan pada langakah no.5.

      Delete
  6. Mas, cuma ada twitternya aja yang nongol, kalau like facebook nya ga ada.. :(

    ReplyDelete
  7. Eh udah berhasil ding, thanks atas postingannya, semoga banyak yg baca :D

    ReplyDelete
  8. Klo gak pake twitter, dari kode <div class="twitter" ke bawah dihilangkan ya gan...

    ReplyDelete
  9. Gan kok blogger saya tidak muncul like nya , apakah ada kesalahan .
    Solusinya Gan ???

    ReplyDelete
    Replies
    1. iya pasti ada kesalahan saat mengedit nya, coba edit dengan baik baik. jangan sampai ada kode yang kehapus.

      Delete
  10. Makasih atas infonya sangat bermanfaat.

    ReplyDelete
  11. makasih banget gan, skarang mau saya pasang di website saya yang ini Sepatu Adidas Running

    ReplyDelete
  12. "kotak melayangnya button like FBnya ngk muncul, hanya icon twitternya saja beserta info followernya yang benar, tolong bantu cek scriptnya" Sama kaya kasus ane nih,,, ngaturnya gimana enaknya?

    ReplyDelete
    Replies
    1. mungkin codenya ada yang kehapus kali gan,,,,coba copas lagi kodennya,,,,

      Delete
  13. gan , itunya muncul tapi ga bisa di close :(, ada yang salah gitu ya ? padahal aku dah ngikutin sesuai petunjuk agan

    ReplyDelete
  14. gan udah ada like nya tapi kok nama nya masih fujianto21

    ReplyDelete
  15. Terima kasih sob, udah sukses terpasang di blog saya.

    ReplyDelete
  16. gan gmna sih caranya biar blog gua gk bisa di copas tapi untuk seperti HTMLnya bisa di copas beri pencerahan donk
    Terimakasih

    ReplyDelete

Terimakasih :)