Cara mudah dan simple memasang fans page melayang di blogspot - Anda yang memiliki halaman Fans page di facebook dan ingin memasangnya di blog pribadi, mungkin postingan ini bisa membantu anda.  Caranya sangat gampang dan tidak perlu mengutak atik template.

cara memasang fans page melayang

Berikut langkah memasang fans page melayang di blog:
  • Masuk ke akun blogger anda
  • Klik Layout lalu pilih Add Widget
  • Pilih HTML/Javascript, lalu masukan kode dibawah ini kedalamnya
<style type='text/css'>
/* PopUP */
#fade {
    display: none;
    background: #000;
    position: fixed; left: 0; top: 0;
    z-index: 10;
    width: 100%; height: 100%;
    opacity: .80;
    z-index: 9999;
}
.popup_block{
    display: none;
    background: #fff;
    padding: 20px;
    border: 1px solid #ddd;
    float: left;
    position: fixed;
    top: 50%; left: 50%;
    z-index: 99999;
    -webkit-box-shadow: 0px 0px 20px #000;
    -moz-box-shadow: 0px 0px 20px #000;
    box-shadow: 0px 0px 20px #000;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
img.btn_close {
    float: right;
    margin: -45px -45px 0 0;
}
.popup p {
    padding: 5px 10px;
    margin: 5px 0;
}
/* Making IE6 Understand Fixed Positioning */
*html #fade {
    position: absolute;
}
*html .popup_block {
    position: absolute;
}
</style>
<a href="#?w=350" rel="popup3" class="poplight"></a>
<div style="display: none; width: 900px; margin-top: -200px; margin-left: -200px;" id="popup3" class="popup_block"><a href="#" class="close"><img src="http://2.bp.blogspot.com/-yaNGexS5b74/UGP11O6tvhI/AAAAAAAAASU/1j5Zk9lAbic/s1600/close.png" class="btn_close" title="Close Window" /></a>
<center>
  <h3 class="box-title">Please Join to my fans page at facebook<center><p style="line-height:3px;" >?</p></center></h3>
</center>
<div class="menu" style="background-color:white;margin-top:3px;padding-left:5px;padding-top:5px;">
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/peluangbisnisonlineoke&amp;width=292&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;border_color&amp;stream=false&amp;header=false&amp;appId=252948738092755" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:292px; height:258px;" allowtransparency="true"></iframe></center>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $.fn.popOpen = function(){
        popID = $(this).attr('rel'); //Get Popup Name
        popURL = $(this).attr('href'); //Get Popup Href To Define Size
        //Pull Query & Variables from href URL
        query= popURL.split('?');
        dim= query[1].split('&');
        popWidth = dim[0].split('=')[1]; //Gets The First Query String Value
        //Fade In The Popup And Add Close Button
        $('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('');
        //Define Margin For Center Alignment
        var popMargTop = ($('#' + popID).height() + 80) / 2;
        var popMargLeft = ($('#' + popID).width() + 80) / 2;
        //Apply Margin To Popup
        $('#' + popID).css({
            'margin-top' : -popMargTop,
            'margin-left' : -popMargLeft
        });
        //Fade In Background
        $('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
        $('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer
    };
    //When You Click On A Link With Class Of Poplight And The Href Starts With A #
    $('a.poplight[href^=#]').click(function() {
        $(this).popOpen(); //Run PopOpen Function On Click
        return false;
    });
    $('a.poplight[href=#?w=350]').popOpen(); //Run PopOpen Function Once On Load
    //Close Popups and Fade Layer
    $('a.close, #fade').live('click', function() { //When Clicking On The Close Or Fade Layer
          $('#fade , .popup_block').fadeOut(); //Fade Them Both Out
        $('#fade').remove();
        return false;
    });
    popOpen
});
</script></div></div>
  • Ganti tulisan berwarna biru dengan url halaman facebook anda. 
  • Klik Simpan, dan cek hasilnya.

Mudah bukan cara memasang fans page melayang di blog, di coba yuk,..

 Semoga bermanfaat.