Blogger
Share CODE POPUP Like Fanpage FaceBook Đẹp cho Blogger Blogspot
Code hiển thị Popup Like Fanpage FaceBook chắc không còn xa lạ gì. Tác dụng của code này sẽ hiển thị khung like fanpage trên trang của các bạn khi người dùng lướt xuống. Lưu ý code này phải trượt xuố…
Code hiển thị Popup Like Fanpage FaceBook chắc không còn xa lạ gì. Tác dụng của code này sẽ hiển thị khung like fanpage trên trang của các bạn khi người dùng lướt xuống. Lưu ý code này phải trượt xuống mới hiện bảng thông báo. Khá hay khi người dùng tương tác.
Điểm đặc biệt là code này sẽ không hiển thị mỗi lần người dùng click mà chỉ hiển thị 1 lần duy nhất và không hiển thị lại nữa. Điều này sẽ khiến người dùng không cảm thấy khó chịu và bỏ rơi web bạn đâu nhé ^^
Giao diện hiển thị của code sẽ như hình dưới
Sau đây là toàn bộ code bao gồm thư viện jquery + css + html
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>Thay đoạn bôi đỏ bên trên thành link Fanpage facebook của các bạn
<style>
#fbox-background {
display: none;
background: rgba(0,0,0,0.8);
width: 100%;
height: 100%;
position: fixed;
top: 0;
left: 0;
z-index: 99999;
}
#fbox-close {
width: 100%;
height: 100%;
}
#fbox-display {
background: #eaeaea;
border: 5px solid #3a5795;
width: 340px;
height: 230px;
position: absolute;
top: 32%;
left: 37%;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
}
#fbox-button {
float: right;
cursor: pointer;
position: absolute;
right: 0px;
top: 0px;
}
#fbox-button:before {
content: "CLOSE";
padding: 5px 8px;
background: #3a5795;
color: #eaeaea;
font-weight: bold;
font-size: 10px;
font-family: Tahoma;
}
#fbox-link,#fbox-link a.visited,#fbox-link a,#fbox-link a:hover {
color: #aaaaaa;
font-size: 9px;
text-decoration: none;
text-align: center;
padding: 5px;
}
</style>
<script type='text/javascript'>
//<![CDATA[
jQuery.cookie = function (key, value, options) {
// key and at least value given, set cookie...
if (arguments.length > 1 && String(value) !== "[object Object]") {
options = jQuery.extend({}, options);
if (value === null || value === undefined) {
options.expires = -1;
}
if (typeof options.expires === 'number') {
var days = options.expires, t = options.expires = new Date();
t.setDate(t.getDate() + days);
}
value = String(value);
return (document.cookie = [
encodeURIComponent(key), '=',
options.raw ? value : encodeURIComponent(value),
options.expires ? '; expires=' + options.expires.toUTCString() : '', // use expires attribute, max-age is not supported by IE
options.path ? '; path=' + options.path : '',
options.domain ? '; domain=' + options.domain : '',
options.secure ? '; secure' : ''
].join(''));
}
// key and possibly options given, get cookie...
options = value || {};
var result, decode = options.raw ? function (s) { return s; } : decodeURIComponent;
return (result = new RegExp('(?:^|; )' + encodeURIComponent(key) + '=([^;]*)').exec(document.cookie)) ? decode(result[1]) : null;
};
//]]>
</script>
<script type='text/javascript'>
jQuery(document).ready(function($){
if($.cookie('popup_facebook_box') != 'yes'){
$('#fbox-background').delay(5000).fadeIn('medium');
$('#fbox-button, #fbox-close').click(function(){
$('#fbox-background').stop().fadeOut('medium');
});
}
$.cookie('popup_facebook_box', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fbox-background'>
<div id='fbox-close'>
</div>
<div id='fbox-display'>
<div id='fbox-button'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com/xemvuilams&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; background: #fff; width: 339px; height: 200px;'></iframe>
<div id="fbox-link">Powered by <a style="padding-left: 0px;" href="http://codeseo.net" rel="nofollow">codeseo</a></div>
</div>
</div>
Các bạn nên chèn code này bên trên thẻ sẽ khiến blog của bạn load mượt mà hơn là để ở đầu trang
Related post
Hung.Pro.VN
Nhà thiết kế WebTôi là admin trang Hung.Pro.VN là một người có đam mê với Blogspot, kinh nghiệm 5 năm thiết kế ra hàng trăm mẫu Template blogpsot như" Bán hàng, bất động sản, landing page, tin tức...
Đẹp đấy :)
Trả lờiXóaCảm ơn bạn :D chúc bạn thành công ^^
Xóa