Cara Membuat Widget Fans Page Like Box Melayang

Membuat Fans Page Melayang dengan Tombol Close -Cara Membuat like box Melayang Widget like Facebook dengan Posisi Melayang dengan tombol close di blog,Cara Membuat Widget Fans Page Like Box Melayang. memang mempunyai keuntungan tersendiri buat para blogger, kenapa, karena widget ini bisa menghemat tempat dan juga bisa cepat dilihat oleh visitor blog. Selain keuntungan tersebut di atas, masih banyak lagi keuntungan lain mengenai widget ini.

Cara Membuat Widget Fans Page Like Box Melayang - Pemasangannya sendiri tidaklah terlalu rumit dan tanpa harus mengedit HTML/CSS template blog, cukup dengan membuat gadget baru dan mamasukkan kode scriptnya ke dalam box tersebut. Nah, jika sobat tertarik untuk memakainya, berikut penjelasan mengenai pemasangannya :

Membuat Fans Page Melayang dengan Tombol Close - karena banyaknya jumlah widget yang terpasang dihalaman blog membuat halaman blog menjadi sempit, nah banyak orang untuk mengatasi masalah tersebut tanpa mengurangi widget didalam blognya menggunakan metode ini yaitu membuat widget melayang dihalaman blog. contohnya kamu bisa lihat pada gambar dibawah ini

• Login ke blogger
• Pilih Tata Letak > Tambah Gadget > HTML/Javascript
• Copy dan pastekan kode di bawah ini dan masukkan kedalam gadget yang sobat buat tadi

<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: 300px; 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>
<div class="menu" style="background-color:white;margin-top:3px;padding-left:5px;padding-top:5px;">
<center>
  <h3 class="box-title">Tekan Tombol Like Untuk Melihat<center><p style="line-height:3px;" ></p></center></h3>
</center>
<center><object data="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fjalmiswar.isk&amp;width=300&amp;height=258&amp;colorscheme=light&amp;show_faces=true&amp;header=true&amp;stream=false&amp;show_border=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;" allowtransparency="true"></object></center>
<center><a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/mis_jal">Ikuti Jal Destar</a><center></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></center></div></div>

Keterangan ;

Ganti Warna kuning dengan id facebook sobat

Ganti Warna kuning dengan id Twitter sobat

• Langkah selanjutnya, pilih simpan dan lihat hasilnya.

Demikain tutorial tentang bagaimana cara membuat like box facebook melayang pada blog kali ini, semoga ada manfaatnya, terima kasih dan salam blogger...!!!