Thứ Ba, 12 tháng 2, 2013

Hộp Facebook Like với hình nền K2

Xem thử nhé:
Tiện ích này có tính chất câu Like vì nó luôn xuất hiện trên trang chủ hoặc trang bài viết khi có người truy cập vào.Bảng này sẽ biến mất khi người ta click vào nút tắt (X).
Để có được tiện ích này bạn cần tiến hành các bước sau:
1- Đăng nhập Blog
2- Vào bố cục
3- Chọn thêm tiện ích
4- Và dán code sau vào rồi save lại
<script src="https://krdautocrazyblog.googlecode.com/files/FacebookLikeK2.js"></script>
<style type="text/css">
#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%;
}
#cboxPrevious, #cboxNext, #cboxClose,#cboxSlideshow{
cursor:pointer;
}
.cboxPhoto{
float:left;
margin:auto;
border:0;
display:block;
}
.cboxIframe{
width:100%;
height:100%;
display:block;
border:0;
}
#cboxOverlay{
background:#000000;/*Màu nền*/
opacity:0.5 !important;
}
#colorbox{
/*box-shadow*/
-webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);
-moz-box-shadow:0 0 15px rgba(0,0,0,0.4);
box-shadow:0 0 15px rgba(0,0,0,0.4);
}
#cboxTopLeft{
width:14px;
height:14px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat 0 0;
}
#cboxTopCenter{
height:14px;
background:url(https://lh6.googleusercontent.com/-qVuFL__wkEg/UVvx44RnCHI/AAAAAAAAU0I/PWQdUcGR1Ic/s75/Dautocrazy.Blog-border.png) repeat-x top left;
}
#cboxTopRight{
width:14px;
height:14px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat -36px 0;
}
#cboxBottomLeft{
width:14px;
height:43px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat 0 -32px;
}
#cboxBottomCenter{
height:43px;
background:url(https://lh6.googleusercontent.com/-qVuFL__wkEg/UVvx44RnCHI/AAAAAAAAU0I/PWQdUcGR1Ic/s75/Dautocrazy.Blog-border.png) repeat-x bottom left;
}
#cboxBottomRight{
width:14px;
height:43px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat -36px -32px;
}
#cboxMiddleLeft{width:14px;background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) repeat-y -175px 0;
}
#cboxMiddleRight{
width:14px;background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) repeat-y -211px 0;
}
#cboxContent{
background:#fff;
overflow:visible;
}
#cboxLoadedContent{
margin-bottom:5px;
}
#cboxLoadingOverlay{background:url(https://lh3.googleusercontent.com/-U1edinUDEAU/UVvx5NL7f0I/AAAAAAAAU0M/J2WHf5FaG1M/s40/Dautocrazy.Blog-loadingbackground.png) no-repeat center center;
}
#cboxLoadingGraphic{background:url(https://lh3.googleusercontent.com/-Wyn9AgDC3DY/UVvx481sY0I/AAAAAAAAUz8/PDgqqmOHKyo/s32/Dautocrazy.Blog-loading.gif) no-repeat center center;
}
#cboxTitle{
position:absolute;bottom:-25px;
left:0;
text-align:
center;width:100%;
font-weight:bold;
color:#7C7C7C;
}
#cboxCurrent{
position:absolute;
bottom:-25px;
left:58px;
font-weight:bold;
color:#7C7C7C;
}
#cboxPrevious, #cboxNext, #cboxClose, #cboxSlideshow{
position:absolute;
bottom:-29px;
background:url(https://lh3.googleusercontent.com/-FfswmvNnWrY/UVvx4920FWI/AAAAAAAAU0E/Lt14ZuX8MwU/s225/Dautocrazy.Blog-controls.png) no-repeat 0px 0px;
width:23px;
height:23px;
text-indent:-9999px;
}
#cboxPrevious{
left:0px;
background-position:-51px -25px;
}
#cboxPrevious.hover{
background-position:-51px 0px;
}
#cboxNext{
left:27px;
background-position:-75px -25px;
}
#cboxNext.hover{
background-position:-75px 0px;
}
#cboxClose{
right:0;
background-position:-100px -25px;
}
#cboxClose.hover{
background-position:-100px 0px;
}
.cboxSlideshow_on #cboxSlideshow{
background-position:-125px 0px;
right:27px;
}
.cboxSlideshow_on #cboxSlideshow.hover{
background-position:-150px 0px;
}
.cboxSlideshow_off #cboxSlideshow{
background-position:-150px -25px;
right:27px;
}
.cboxSlideshow_off #cboxSlideshow.hover{
background-position:-125px 0px;
}
#mdfb{
font:12px/1.2 Arial,Helvetica,san-serif;color:#666;
}
#mdfb a,#mdfb a:hover,#mdfb a:visited{
text-decoration:none;
}
.mdbox-title{
background:#000;
color:#fff;
font-size:20px !important;
font-weight:bold;
margin:10px 0;
border:20px solid #ddd;
/*border-radius*/
-webkit-border-radius:6px;
-moz-border-radius:6px;
border-radius:6px;
/*box-shadow*/
-webkit-box-shadow:5px 5px 5px #CCCCCC;
-moz-box-shadow:5px 5px 5px #CCCCCC;
box-shadow:5px 5px 5px #CCCCCC;
padding:10px;
line-height:25px;
font-family:arial !important;
}
.mdbox-tagline{
color:#999;
margin:0;
text-align:center;
}
#mdsubs-container{
padding:35px 0 30px 0;
position:relative;
}a:link,a:visited{
border:none;
}
.demo{
display:none;
}
</style>
<script type="text/javascript">
jQuery(document).ready(function(){
if (document.cookie.indexOf('visited=false') == -1) {
var fifteenDays = 1000*60*60*24*30;
var expires = new Date((new Date()).valueOf() + fifteenDays);
document.cookie = "visited=true;expires=" + expires.toUTCString();
$.colorbox({width:"600px", inline:true, href:"#mdfb"});
}});
</script>
<div style='display:none'>
<div id='mdfb' style='padding:10px; background:#fff;'>
<center>
<table align="center"background="https://lh5.googleusercontent.com/-u5lzVCm7xqI/UVvz1FqRpxI/AAAAAAAAU0c/Tbu93kcXock/s518/adsense%2520background%2520image-Dautocrazy.Blog.png" border="0" height="300" style="width: 505px;">
<tbody>
<tr>
<td height="345" width="505">
<div align="right">
<script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:fan profile_id="477172592337348" stream="0" connections="15" logobar="0" width="360" height="270" css="https://www.dropbox.com/s/8jaalee76m2yari/DautoCrazy.Blog.cs-FacebooLikeK2.css"></fb:fan>
</div>
</td>
</tr>
</tbody>
</table>
</center>
</div>
</div>
Trong đó bạn thay 477172592337348 bằng ID trang facebook của bạn trên FB(là trang riêng đó không phải ID trang cá nhân nhé)
Và có thể tùy chỉnh màu nền và kích thước sao cho phù hợp với sở thích của mình

Không có nhận xét nào:

Đăng nhận xét