Cara Memasang Widget Like Fanspage Melayang di Blog/tampilan awal blog

contoh seperti yang ada diatas langsung saja lah

1. Pertama kamu harus WAJIB mempunyai Halaman Blog sobat di Facebook dan script Widget Like Box Facebok-nya. Silakan baca artikel tentang Cara Membuat Halaman Blog di Facebook dan Cara Membuat Widget Like Box Facebook di Blog di sini untuk mendapatkan scriptnya.


2. Kalau sobat sudah mempunyai Halaman Blog sobat di Facebook dan telah mendapatkan script-nya, sobat bisa mulai memasang widget ini. Login ke akun Blogger sobat.

3.  Masuk pada bagian Tata Letak.

4. Klik Tambahkan Gadget di posisi mana saja gak jadi masalah. Karena hasilnya tetap akan melayang di halaman Blog kamu. hehehe

5. Pilih mode HTML/Javascript.

6. Masukan kode berikut.

<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=http%3A%2F%2Fwww.facebook.com%2Fid.adit&amp;width&amp;height=290&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:290px;" allowtransparency="true"></iframe></center>

<a class="twitter-follow-button" data-lang="id" data-show-count="true" href="https://twitter.com/radit_raditya45">Ikuti @radit_raditya45</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

<iframe src="//www.facebook.com/plugins/follow.php?href=http%3A%2F%2Fwww.facebook.com%2Fbobyyi007&amp;width&amp;height=21&amp;colorscheme=light&amp;layout=button_count&amp;show_faces=true" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:21px;" allowtransparency="true"></iframe>

<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>

simpan dan lihat hasilnya 

Share this post