Cara Membuat Widget Fans Page Facebook Melayang di Blog

Tutorial Cara Membuat Widget Fans Page Facebook Melayang di Blog disertai Tombol Close :

Dedot.info | Cara membuat widget fans page Facebook melayang di blog | disini saya hanya ingin berbagi tutorial kepada kawan-kawan semua tentang bagaimana cara membuat kotak widget fans page facebook yang melayang di blogger, seperti gambar di bawah ini. Seperti yang kita ketahui kotak fans page Facebook banyak sekali manfaatnya untuk para blogger khususnya untuk meningkatkan jumlah visitor dan juga untuk membuat promosi , karenanya dengan adanya fanspage ini memudahkan kita para blogger untuk berkomunikasi atau berbagi informasi jika lalu ada update artikel baru dengan member yang selalu berkunjung kepada blog kita.

Cara Mudah Membuat Widget Kotak Fans Page Facebook Melayang di Blog :

1. Buka Dasbor Blog kawan-kawan 
2. Pilih Tata Letak 
3. Tambah Widget dengan pilihan "klik HTML/Java Script" 
4. Copy kan kode java script di bawah ini :

<style type='text/css'>
#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: #252525;padding: 0 4px; border: 1px solid #190707;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: -36px -8px 0;}
.popup p {padding: 5px 10px;margin: 5px 0;}
*html #fade {position: absolute;}
*html .popup_block {position: absolute;}
.wrapper {padding:5px; margin: 4px auto; width: 300px; height: 450px;border-radius: 0px;position: relative;z-index: 90;background:#eee;background-image:-moz-linear-gradient(top, #fff, #eee);background-image:-ms-linear-gradient(top, #fff, #eee);background-image:-o-linear-gradient( top, #fff, #eee);background-image:-webkit-gradient(linear, left top, left bottom, from(#fff), to(#eee));background-image:-webkit-linear-gradient(top, #fff, #eee);background-image:linear-gradient(top, #fff, #eee);border:1px solid #ddd;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;-moz-box-shadow:0 1px 0 #9a9a9a;-webkit-box-shadow:0 1px 0 #9a9a9a;box-shadow:0 1px 0 #9a9a9a;padding:10px;}
.inner {border:1px dashed #ccc;padding:0.5em;-moz-box-shadow:0 0 0 1px #fff;-webkit-box-shadow:0 0 0 1px #fff;box-shadow:0 0 0 1px #fff}
.ribbon-wrapper-green {width: 85px;height: 88px;overflow: hidden;position: absolute;top: -5px;right: -5px;}
.ribbon-green {font: bold 15px Sans-Serif;color: #190707;text-align: center;text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);-ms-transform: rotate(45deg);-o-transform:rotate(45deg);position: relative;padding: 7px 0;left: -5px;top: 15px;width: 120px;background-color: #2EFE2E;background-image: -webkit-gradient(linear, left top, left bottom, from(#2EFE2E), to(#A9F5A9));background-image: -webkit-linear-gradient(top, #2EFE2E, #A9F5A9);background-image: -moz-linear-gradient(top,#2EFE2E, #A9F5A9);background-image: -ms-linear-gradient(top, #2EFE2E, #A9F5A9);background-image: -o-linear-gradient(top, #2EFE2E, #A9F5A9);color: #190707;-webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);-moz-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);box-shadow: 0px 0px 3px rgba(0,0,0,0.3);}
.ribbon-green:before, .ribbon-green:after {content: "";border-top:3px solid #6e8900;border-left:3px solid transparent;border-right: 3px solid transparent;position:absolute;bottom: -3px;}
.ribbon-green:before {left: 0;}
.ribbon-green:after {right: 0;}
</style>
<a href="#?w=auto" rel="popup3" class="poplight"></a>
<div style="display: none; 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="wrapper"><div class="inner"><div class="ribbon-wrapper-green">
<div class="ribbon-green">d-anime</div>
</div>
<br/>
<center> Letakkan Kode Fans page face book kawan-kawan disini</center>
<!-- Place this tag after the last widget tag. -->
<script type="text/javascript">
(function() {
var po = document.createElement('script'); po.type = 'text/javascript'; po.async = true;
po.src = 'https://apis.google.com/js/plusone.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(po, s);
})();
</script></center></div></div>
<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=auto]').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>

• Klik Simpan

** Ganti Kode Yang berwarna merah dengan kode halaman facebook kawan-kawan
** Ganti Kode Yang berwarna biru dengan nama yang sobat inginkan..

Itulah sekilas tentang bagaimana cara membuat widget Kotak Fanspage Facebook melayang di blog, dan untuk yang belum punya halaman Fans page Facebook, bisa dibaca disini terlebih dahulu (Lengkap dengan cara membuat dan mengambil Script Kotak Fans Page Facebook) . Semoga bisa membantu dan tambah semangat ngeblog nya yah kawan..

Share this post