Facebook Like Box PopUp Dengan Sedikit Tampilan Berbeda

Pada postingan ini saya akan share sedikit sebuah tekhnik membuat facebook like box dengan sedikit tampilan berbeda mungkin dianata agan ada yang mau mencoba silahkan di ikuti langkah langkah dibawah ini...

Masuk Blog anda
pilih menu tata letak/add gadged
kemudian pilih html javascript
lalu letakan kode dibawah ini pada box yang tersedia

<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: #8B0000;padding: 0 4px; border: 1px solid #333;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: 276px; height: 300px;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: -3px;right: -3px;}
.ribbon-green {font: bold 15px Sans-Serif;color: #333;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: #306EFF;background-image: -webkit-gradient(linear, left top, left bottom, from(#306EFF), to(#3BB9FF));background-image: -webkit-linear-gradient(top, #306EFF, #3BB9FF);background-image: -moz-linear-gradient(top, #306EFF, #3BB9FF);background-image: -ms-linear-gradient(top, #306EFF, #3BB9FF);background-image: -o-linear-gradient(top, #306EFF, #3BB9FF);color: #fff;-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">Facebook</div>
</div>
<center><iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Fpages%2Fid fanpage kamu&amp;width=280&amp;height=290&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=true&amp;header=true&amp;appId=557614747605058" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:280px; height:290px;" allowtransparency="true"></iframe></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>

Catatan : Ganti kode berwarna  dengan kode pans page sobat

                jika sobat ingin menampilkan like box nya hanya pada tampilan depan maka silahkan sobat cari kode yang kira kira mirip seperti ini....

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>

</b:includable>
</b:widget>

Jika sudah tambahkan kode dibawah ini disekitar kode tersebut

<b:if cond='data:blog.url == data:blog.homepageUrl'> dan  </b:if>

Sehingga hasilnya seperti ini...

<b:widget id='HTML11' locked='false' title='' type='HTML'>
<b:includable id='main'>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<!-- only display title if it's non-empty -->
<b:if cond='data:title != &quot;&quot;'>
<h2 class='title'><data:title/></h2>
</b:if>
<div class='widget-content'>
<data:content/>
</div>
<b:include name='quickedit'/>
</b:if>
</b:includable>
</b:widget>

Jika Sudah Save template anda dan lihat hasilnya...
selamat mencoba semoga bermanfaat...