Cara Membuat Pop Up Fanspage Facebook dan Twitter Melayang di blog

Assalamualaikum.Wr.Wb. Selamat datang di jauhakuna. Pada hari ini ini saya akan membagikan pengalaman saya cara Membuat Pop Up Fanspage dan Twitter di blog. Sebenarnya cara ini cukup sederhana. Dan sangat mudah dilakukan.

  Contoh disalah satu blog saya sudah saya pasang Pop Up. Seperti gambar di bawah ini :

Seperti yang anda lihat gambar di atas , Pop Up Fans page dan dibawahnya ada twitternya. Mempermudah pengunjung untuk like fans page dan follow twitter kita. 

 Oke langsung saja kita ke caranya : 

1. Pertama anda silahkan anda Copy 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://m.facebook.com/Boboiboy-Air-Fans-Indonesia-623748907763561/?ref=ts&fref=ts?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=JauhariRamadha5&amp;show_count=&amp; show_screen_name=&amp;text_color=" frameborder="0" scrolling="no"></iframe> </div>

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

<a href=http://jauharime.blogspot.co.id/ target="_blank">Get This Widget</a></div>

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

</div>

Silahkan anda ganti : yang warna Merah : URL link Fanspage anda
                                       yang warna biru     : Nama Twitter anda
                                       yang warna hijau   : URL link Blog anda.

2. Setelah Dicopy, letakkan di Tata Letak -> Tambah gedget -> Pilih HTML / Java scrips. Paste atau Taruh Code yang di atas tadi di konten. Lalu klik Simpan

3. Lihat hasilnya . Buka Blog anda dan blog anda sudah ada Pop Upnya. 

   Perhatikan ! Pastikan anda menyalin URL link Fans Page yang benar dan Nama Twitter yang benar agar berhasil. 

   Saya rasa cukup sekian , Semoga Postingan kali ini bisa bermanfaat bagi para blogger sekalian. Terima kasih. Salam belajar.
Penulis     : Jauhari Ramadhana 
Facebook : Jauhari Afif
Wassalamualaikum.Wr.Wb.

Tweet