Hello anh em, Cảm Ơn Anh Em Đã Đồng Hành Cùng Blog Phố Nhỏ Hôm Nay Mình Sẽ Chia Sẻ Với Anh Em Code Box Like Fanpage Facebook khi vào blog nhé !
DEMO
CÁC BƯỚC THỰC HIỆN :
BƯỚC 1 : Vào Blog -> Bố Cục
BƯỚC 2 : Thêm Tiện Ích -> Chọn HTML/JAVASCRIPT
BƯỚC 3 : Dán Code Sau Vô
CÁC BƯỚC THỰC HIỆN :
BƯỚC 1 : Vào Blog -> Bố Cục
BƯỚC 2 : Thêm Tiện Ích -> Chọn HTML/JAVASCRIPT
BƯỚC 3 : Dán Code Sau Vô
CSS:
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script>
<style>
#fanback {
display:none;
background:rgba(0,0,0,0.8);
width:100%;
height:100%;
position:fixed;
top:0;
left:0;
z-index:99999;
}
#fan-exit {
width:100%;
height:100%;
}
#JasperRoberts {
background:white;
width:420px;
position:absolute;
top:58%;
left:63%;
margin:-220px 0 0 -375px;
-webkit-box-shadow: inset 0 0 50px 0 #939393;
-moz-box-shadow: inset 0 0 50px 0 #939393;
box-shadow: inset 0 0 50px 0 #939393;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
margin: -220px 0 0 -375px;
}
#Blogduykhanh {
float:right;
cursor:pointer;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj8mIeQBwojuUQP_Ya9-xY6I8wBLD6kfvI24wnp_mFX5T2ljG3k8F-Qa2b_SZ2grl8IjtXgufJe95qiiBPGhFnyhpXOBZ6wsSPFUveYaihWS9YMK5WEn294s6c4ZQtPXSJLTpM-Uj3x7gFN/s1600/blogduykhanhfacebookpopup.png) repeat;
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</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_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#Blogduykhanh, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='Blogduykhanh'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com//PHỐ-NHỎ-BLOG-109536703815585/&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin: -27px 8px -18px 9px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;"http://www.PhoNho.Xyz">Phố Nhỏ Blog</a> - <a style="color:#a8a8a8;font-size:8px;" href="https://www.facebook.com//PHỐ-NHỎ-BLOG-109536703815585/">Fanpage</a></span></center>
</div>
</div>
Trong mặc định ở đoạn code trên popup sẽ tự bật lên sau 10 giây tải trang. Nếu bạn muốn thay đổi nó bạn có thể tìm trong đoạn code trên
height:15px;
padding:20px;
position:relative;
padding-right:40px;
margin-top:-20px;
margin-right:-22px;
}
.remove-borda {
width:366px;
margin:0 auto;
background:#F3F3F3;
margin-top:16px;
position:relative;
margin-left:20px;
}
#linkit,#linkit a.visited,#linkit a,#linkit a:hover {
color:#80808B;
font-size:10px;
margin: 0 auto 5px auto;
float:center;
}
</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_user_login') != 'yes'){
$('#fanback').delay(10000).fadeIn('medium');
$('#Blogduykhanh, #fan-exit').click(function(){
$('#fanback').stop().fadeOut('medium');
});
}
$.cookie('popup_user_login', 'yes', { path: '/', expires: 7 });
});
</script>
<div id='fanback'>
<div id='fan-exit'>
</div>
<div id='JasperRoberts'>
<div id='Blogduykhanh'>
</div>
<div class='remove-borda'>
</div>
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?
href=https://www.facebook.com//PHỐ-NHỎ-BLOG-109536703815585/&width=402&height=255&colorscheme=light&show_faces=true&show_border=false&stream=false&header=false'
style='border: none; overflow: hidden; margin: -27px 8px -18px 9px; width: 402px; height: 230px;'></iframe><center>
<span style="color:#a8a8a8;font-size:8px;" id="linkit">Powered by <a style="color:#a8a8a8;font-size:8px;"http://www.PhoNho.Xyz">Phố Nhỏ Blog</a> - <a style="color:#a8a8a8;font-size:8px;" href="https://www.facebook.com//PHỐ-NHỎ-BLOG-109536703815585/">Fanpage</a></span></center>
</div>
</div>
Trong mặc định ở đoạn code trên popup sẽ tự bật lên sau 10 giây tải trang. Nếu bạn muốn thay đổi nó bạn có thể tìm trong đoạn code trên
Mã:
.delay(10000)Và sửa nó theo ý mình. Đơn vị tính là mili giây, ví dụ bạn muốn đặt thời gian là 30 giây thì có thể sửa thành
Mã:
.delay(30000)Thay link fanpage facebook sau thành link fanpage facebook của bạn
Mã:
https://www.facebook.com//PHỐ-NHỎ-BLOG-109536703815585/TỔNG KẾT :Chỉ cần một vài bước thì các bạn đã có Box Like Fanpage Facebook tuyệt đẹp khi vào blog rồi ! Chúc Các Bạn Thành Công
