Jquery popup Like Facebook (FB) box cho Web, blogger: thủ thuật

Khi truy cập 1 số trang Web hoặc blog các bạn có thấy hiện tượng hộp khung của LIKE Facebook xuất hiện khi chúng ta bắt đầu truy cập tới site đó. Điều đó thật thú vị để thu hút và hướng người vào Trang website, blog mình biết tới Pages Facebook của mình.
- Để làm được điều đó chúng ta sử dụng Jquery tạo Popup cho box Like Facebook.

Ở thủ thuật này mình sẽ hướng dẫn các bạn cách làm trên blogspot. Trên các nền Website khác các bạn cũng làm tương tự bằng cách chèn Code.
Popup này chỉ xuất hiện 1 lần khi chúng ta truy cập tới site (để tránh làm phiền người xem site blogger của bạn)
Demo trực tiếp
- CÁCH LÀM THỦ THUẬT TRÊN BLOGGER
+ Vào bảng điều khiển Blogger -> Bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/JavaScript
+ Dán đoạn code dưới đây vào nó:

<style>
/*
ColorBox Core Style:
The following CSS is consistent between example themes and should not be altered.
*/
#colorbox, #cboxOverlay, #cboxWrapper{position:absolute; top:0; left:0; z-index:9999; overflow:hidden;}
#cboxOverlay{position:fixed; width:100%; height:100%;}
#cboxMiddleLeft, #cboxBottomLeft{clear:left;}
#cboxContent{position:relative;}
#cboxLoadedContent{overflow:auto;}
#cboxTitle{margin:0;}
#cboxLoadingOverlay, #cboxLoadingGraphic{position:absolute; top:0; left:0; width:100%; height:100%;}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{cursor:pointer;}
.cboxPhoto{float:left; margin:auto; border:0; display:block;}
.cboxIframe{width:100%; height:100%; display:block; border:0;}

/*
User Style:
Change the following styles to modify the appearance of ColorBox. They are
ordered & tabbed in a way that represents the nesting of the generated HTML.
*/
#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKBXsD_5Np_RKOV3jb2I62LPBC_AZ3MuM5Jco99WVUiBTzaP1H0IGPLRUglADtyVZRf2cCmDpkgbnXxu-MFXOoBubtO9Xdar8qeoZ4oaYfiR2QSicMGvnUxDMJDCxmSvN_kO7KAhAzPX_7/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0xfsasbBHdlXfuLQFmsVD2XqipCriSNeSJHLTZTp1Q21B_jUQU4mQs5vZiqOslvT-DSN69UzJu1i2_-HRgfloCssTUOsc69pJu4UrzCD-nry9YjpEcyvWzeNDzwpUjdZhSH3chKKekCU/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEio0xfsasbBHdlXfuLQFmsVD2XqipCriSNeSJHLTZTp1Q21B_jUQU4mQs5vZiqOslvT-DSN69UzJu1i2_-HRgfloCssTUOsc69pJu4UrzCD-nry9YjpEcyvWzeNDzwpUjdZhSH3chKKekCU/s1600/border.png) 0 -29px repeat-x;}
#cboxContent{background:#fff; overflow:hidden;}
.cboxIframe{background:#fff;}
#cboxError{padding:50px; border:1px solid #ccc;}
#cboxLoadedContent{margin-bottom:28px;}
#cboxTitle{position:absolute; bottom:4px; left:0; text-align:center; width:100%; color:#949494;}
#cboxCurrent{position:absolute; bottom:4px; left:58px; color:#949494;}
#cboxSlideshow{position:absolute; bottom:4px; right:30px; color:#0092ef;}
#cboxPrevious{position:absolute; bottom:0; left:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) no-repeat -75px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxPrevious:hover{background-position:-75px -25px;}
#cboxNext{position:absolute; bottom:0; left:27px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) no-repeat -50px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxNext:hover{background-position:-50px -25px;}
#cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAc-ZDgge3wm8ORWFqacnz2rxcLfXbTZT7wPhkPQRnTumJQ1kzCEFWmoj9J9_2CI-fOOVxa5VtA-Nkm_ZkleEIZgqt5Zei0Nbhfu_zB-Jymcg4JZ_fCV3FFW7GhSXiwR8kwgiIX_e6oz9b/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhAc-ZDgge3wm8ORWFqacnz2rxcLfXbTZT7wPhkPQRnTumJQ1kzCEFWmoj9J9_2CI-fOOVxa5VtA-Nkm_ZkleEIZgqt5Zei0Nbhfu_zB-Jymcg4JZ_fCV3FFW7GhSXiwR8kwgiIX_e6oz9b/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgpLFQOiZycyIKmn_6eAmbe3AnO-l2V4BOjsrGKowKQX3A8LJeDODd1oAE7TiPXoZi8QtCXuhOPdNlf3WsUGTR83K8cReZt_h3Q8gBpdDXmQKQ9rTTNmH-lQC4VGmudCoRMs6YbSh2V62P4/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}

/*
The following fixes a problem where IE7 and IE8 replace a PNG's alpha transparency with a black fill
when an alpha filter (opacity change) is set on the element or ancestor element. This style is not applied to or needed in IE9.
See: http://jacklmoore.com/notes/ie-transparency-problems/
*/
.cboxIE #cboxTopLeft,
.cboxIE #cboxTopCenter,
.cboxIE #cboxTopRight,
.cboxIE #cboxBottomLeft,
.cboxIE #cboxBottomCenter,
.cboxIE #cboxBottomRight,
.cboxIE #cboxMiddleLeft,
.cboxIE #cboxMiddleRight {
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00FFFFFF,endColorstr=#00FFFFFF);
}

/*
The following provides PNG transparency support for IE6
Feel free to remove this and the /ie6/ directory if you have dropped IE6 support.
*/
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrmfxdsIvJErjjMZ4nlTQ_1WsCVU1hGmNvGilgLkNDjABa9PKmCC_c0mnc6T7UfOS-5yHCbDzL2ER0AaXdG1Y7qaJxbmq1yZMgPZ9ntFIZtiPUh0f5uZxXpMHg3hksPhyjyeYTa_CcJM_a/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhK5FQ3kH3MZyxjIKrWCGfVwvzr44eH3lsQe1TTG-MISXLSPOAgTrK-WGi7zT1dAcpk0NjdthWgb9KaJ8ZlohNrftAq9mO0gP_ZDlrbDQon_CkR7ylD9nmrZe9eA4zwogDYEx8gHASEtm_p/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkI9lGrwIYNe74Chh6rqtjma-l2-AvmsXAadzvZMtSfaggbSfw9kzufKwIMqNqiO85VkNs_eTI02t1GZuRcFLn4iimeC_IunQzQBGcYWP8_MDj78KikgRI7kYqN1shnHv_DgkZvjMQNqK-/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgkI9lGrwIYNe74Chh6rqtjma-l2-AvmsXAadzvZMtSfaggbSfw9kzufKwIMqNqiO85VkNs_eTI02t1GZuRcFLn4iimeC_IunQzQBGcYWP8_MDj78KikgRI7kYqN1shnHv_DgkZvjMQNqK-/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAvylPG0YKvLl8SjIxdyPu05vDnWOhOuxAaSAfGw4wS1Y5pDvK7nBucsWjZRSyC4WIVNcENf6M4uemwFjn_1vcaCP4u__40ScSb1UB7QgUxKuf2Yl6RBMVUjN6-LJ8sA7H9oueAF0Vbqkm/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg2wiHLkEgzl0US5CiBi4tgM7pkIhPz5qvOxmKkUxIjLU3NaEMA8GlWJtXoZtuHSO_fg5WG0Ly_P2oXwKRgqVgpKgDbawjp904j07G6jOw3yUHPgmrpSti1nj15RYKpVeoVapbRD4oHWMvJ/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9dKIoiOQUVYv4_L6XqsuOOkFYQv-U_N70RLiqkSxb-z-BZLiCVPDdhkzPGxWD9NiLdJmu-8QXbApU-HIhyMiXe6IOwx-zP-0pNZ9dwQtOduWr1BatRTtQqsJuySEuB4zgNJGrptEbEdgq/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5PAkBgYZsH2WSySk5MG4Wg0MICkGkrlt_oPoGZgh2eYiLWTOgxZ_2z6DbV3oAKlnRCmZf5K0BnxyPjggIW6dDs5RswImoUwyrYmPq7LtErGS4nlfEP6-eTRYUl9Y9w2uQygZbs1E90n14/s1600/borderMiddleRight.png);}

.cboxIE6 #cboxTopLeft,
.cboxIE6 #cboxTopCenter,
.cboxIE6 #cboxTopRight,
.cboxIE6 #cboxBottomLeft,
.cboxIE6 #cboxBottomCenter,
.cboxIE6 #cboxBottomRight,
.cboxIE6 #cboxMiddleLeft,
.cboxIE6 #cboxMiddleRight {
_behavior: expression(this.src = this.src ? this.src : this.currentStyle.backgroundImage.split('"')[1], this.style.background = "none", this.style.filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(src=" + this.src + ", sizingMethod='scale')");
}

/*-----------------------------------------------------------------------------------*/
/* Huong dan thu thuat: http://itviet360.com
/*-----------------------------------------------------------------------------------*/
#subscribe {
font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;
}
#subscribe a,
#subscribe a:hover,
#subscribe a:visited {
text-decoration:none;
}

.box-tagline {
color: #999;
margin: 0;
text-align: center;
}
#subs-container {
padding: 35px 0 30px 0;
position: relative;
}
a:link, a:visited {
border:none;
}
.demo {
display:none;
}
</style>

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://itviet360.googlecode.com/files/jquery.popbox.js"></script>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=true') == -1) {
var fifteenDays = 1000*60*60*24*7;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"400px", inline:true, href:"#subscribe"});
}
});
</script>
<!-- This contains the hidden content for inline calls -->

<div style='display:none'>
<div id='subscribe' style='padding:10px; background:#fff;'>
<center><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgtB6_RKxBspxjzrMZYI04hcZsD7WA3khOInViuB7h4-jKRaZkmIPq2nSQTDWK_nM-jJzTrpn-uN66vXcI0SQQYa2z6nCJqcOUtxTOKXVCudWREEE754gBzcKTd4nRVu5V0qmivwASwSako/s1600/LikeUsOnFacebook.png" width:300px; height:150px;"/></center>
<center>

<div class="fbInner">
<div class="textwidget"><script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php/en_US"></script>
<script type="text/javascript">FB.init("1690883eb733618b294e98cb1dfba95a");</script>
<fb:fan profile_id="166823093455666" stream="0" connections="10" logobar="0" width="290" height="175" css="http://itviet360.googlecode.com/files/btsnts-custom-fbv4.css?1" class=" FB_fan FB_ElementReady"></fb:fan><div dir="ltr" style="text-align: left;" trbidi="on"><div style="text-align: right;">
<span style="font-family: Verdana, sans-serif; font-size: xx-small;"><a href="http://www.itviet360.com/2013/01/chinh-sua-fan-facebook-khung-like-web-blog.html" target="_blank">Tùy chỉnh FB Like Box</a></span></div>
</div>
</div></div></center></div>
</div>

Dãy số được bôi màu: là ID Pages của bạn. Ví dụ pages itviet360: http://www.facebook.com/pages/itviet360com/166823093455666
Xem thêm: Code popup javascript tạo quảng cáo [tổng hợp]

---

Chúc các bạn thành công !