Hướng dẫn tạo PopUp Like Facebook, share MXH và đăng ký bản tin qua Email

Đầu tiên đăng nhập vào Blogspot- Template-Edit HTML
Tìm thẻ </head> và dan đoạn code này trước nó

<script type="text/javascript" language="javascript">function ccpop(){document.getElementById("overlay").style.display = 'block';}window.onload = ccpop;</script><script type="text/javascript">var switchTo5x=true;</script><script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>

Tiếp tục tìm thẻ </body> thẻ này thì nằm cuối template

<style>@import url(http://fonts.googleapis.com/css?family=Electrolize);#overlay {background:url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgOzPmGv2suKeYkIfmagyY7FtHlERlCFrAY-ZM3wg1zsR9mcBaS5RKUXWKwKBgRoe4gC16Ap36HfYYZh3r8kTQKqXPn8LVwr2SBFqauQUlodi99tberXjjzNb3e6KRRduOB9hidb0ia01qZ/s1600/overlay.png');position:fixed;z-index: 99998;width:100%;height:100%;top:0;}.fb-box {box-shadow: 0px 0px 6px #ccc;-webkit-box-shadow: 0px 0px 6px #ccc;-o-box-shadow: 0px 0px 6px #ccc;background: #fff;margin-bottom: 10px;}#ccpop {position:fixed;top: 50px;width:300px;height:auto;border:5px solid #fafafa;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius:3px;background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj5WYVvxePuRxxlNPRpn5f1aUxyQg8ubj5cEDj90xnnOFr1NQnyYK7MC6nA7t6MAacIgLHrW_KqECPghJ7aEgPMzed05WSaiSEagF0YqGdowQsvoDejAMtl4ia3xXLE6Kebbphf-7CC2LPV/s0/body-pattern-1.png');padding: 15px;z-index: 99999; color: #333;left:50%;margin-left:-150px;}h2#ccpop-h2 {font-size:12px;color: #333;text-shadow: 0px 1px 1px rgba(0,0,0,0.3);-webkit-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);-o-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);-moz-text-shadow: 0px 1px 1px rgba(0,0,0,0.3);font-family: 'Electrolize', Arial,sans-serif;text-align:center;text-transform:uppercase;}#ccpop-h2 img {position: relative;width: 20px;top: 5px;right: 3px;}#thebutton {-moz-box-shadow:inset 0px 1px 0px 0px #54a3f7;-webkit-box-shadow:inset 0px 1px 0px 0px #54a3f7;box-shadow:inset 0px 1px 0px 0px #54a3f7;background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7)); background:-moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-o-linear-gradient(top, #007dc1 5%, #0061a7 100%);background:-ms-linear-gradient(top, #007dc1 5%, #0061a7 100%); background:linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);background-color:#007dc1;-moz-border-radius:3px; -webkit-border-radius:3px;border-radius:3px;border:1px solid #124d77;display:inline-block;cursor:pointer;color:#ffffff; font-size:13px;padding:6px 47px;text-decoration:none;text-shadow:0px 1px 0px #154682;font-family: Electrolize , Arial, sans-serif;}#thebutton:hover {background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05,#0061a7), color-stop(1, #007dc1));background:-moz-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:-webkit-linear-gradient(top, #0061a7 5%, #007dc1 100%); background:-o-linear-gradient(top, #0061a7 5%, #007dc1 100%);background:-ms-linear-gradient(top, #0061a7 5%, #007dc1 100%); background:linear-gradient(to bottom, #0061a7 5%, #007dc1 100%);background-color:#0061a7;}#thebox {padding:6px 69px;margin: 10px 0px;background: #fff url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj3HYTj3TE7g9H67-aeNpihHDHqW5m1gin3ovbmw62UruGIfnBCnxgpR3u9u0Sz0czvUu9AWNhkYQVx3gbJ-a9WMOyDiQ3PWLLNiDIxl4oVPgbr8sFLrWdRq1uWy4WtIz6lK8HOGcC1HhU/s1600/email_go.png') no-repeat right center; -webkit-transition: all 0.30s ease-in-out;-moz-transition: all 0.30s ease-in-out;-ms-transition: all 0.30s ease-in-out; -o-transition: all 0.30s ease-in-out;outline: none;border: 1px solid #d2d2d2;font-family: Electrolize , Arial, sans-serif; font-size:14px;-moz-border-radius:3px;-webkit-border-radius:3px;border-radius:3px;}#thebox:focus {box-shadow: 0 0 5px rgba(81, 203, 238, 1);border: 1px solid rgba(81, 203, 238, 1);}.copyright {float:right;width: 110px;}.copyright a{font-size:10px;color: #999;font-family: Electrolize , Arial, sans-serif;}</style><div id="overlay" style="display:none;"><div id='ccpop'><h2 id='ccpop-h2'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh5bLu1n7M27vD1ptVP2OVnx_8Ceeae8kCLAOCBphdIkdPPzgTydVQd06Bv0EBfLWlqCCgknhNJDcKoJrkr5fwjcms1N7Av8FGrCrES8ROEAr60LyRtpLie_qCE1Ur8w0HHlf7SP7MWzJk/s1600/facebook-messenger-like.png"/>Like Our Facebook Fan Page</h2><div class='fb-like-pop'><div class="fb-box"><iframe src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Farisvnn&width&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false&appId=784784778251784"scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:258px;"allowTransparency="true"></iframe></div></div><center><span class='st_sharethis_large' displayText='ShareThis'></span><span class='st_facebook_large' displayText='Facebook'></span><span class='st_googleplus_large' displayText='Google +'></span><span class='st_twitter_large' displayText='Tweet'></span><span class='st_linkedin_large' displayText='LinkedIn'></span><span class='st_pinterest_large' displayText='Pinterest'></span><span class='st_email_large' displayText='Email'></span></center><div class='subscribe-bottom'><h2 id='ccpop-h2'><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEim9VnqBRp0Or41z6nY6ThV1tgQIIVX9aIGmb5kFIPjGCELxqlv_1bcevykNs62zcDGgHf12MnnAM1SFMtoispKIGP4Gdh6tFxbR7KYnQ9N0Ug_i_XdJefoIBPex44yFWJHIaH00Yo4BZw/s1600/rss-feed-submission.png"/>Subscribe For Free Email Updates</h2><form action='http://feedburner.google.com/fb/a/mailverify' method='post'onsubmit='window.open("http://feedburner.google.com/fb/a/mailverify?uri=codingcrazy" , "popupwindow", "scrollbars=yes,width=550,height=520");return true' target='popupwindow'><input name='uri' type='hidden' value='arisvn'/><input name='loc' type='hidden' value='en_US'/><input class='emailinput' id='thebox' name='email' onblur='if (this.value =="") {this.value = "Enter your email";}' onfocus='if (this.value== "Enter your email") {this.value = ""}' type='text'value='Enter your email'/><input id='thebutton' type='submit' value='Subscribe For Email Updates Now'/></form></div><hr width="300" align="center"/><div class="copyright"><a href="http://arisvn.blogspot.com/" target="_blank" >Get This</a> | <ahref="#" onclick="document.getElementById('overlay').style.display='none'">X Close This</a></div></div></div>

Thay các đoạn sau thành ID Facebook và Feed của bạn :
arisvnn : ID Facebook của bạn
arisvn : ID Feed của bạn
http://arisvn.blogspot.com địa chỉ blog hoặc 1 bài trong blog của bạn
Thêm kiểu box khác :
Vào bố cục thêm Widget

Code

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><style> /* Jquery Facebook Likebox Popup Version 2.0 by MBT MyBloggerTricks.com   */   #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;}   /*
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:#000;opacity:0.5 !important;}   #colorbox{   box-shadow:0 0 15px rgba(0,0,0,0.4);   -moz-box-shadow:0 0 15px rgba(0,0,0,0.4);   -webkit-box-shadow:0 0 15px rgba(0,0,0,0.4);   }      #cboxTopLeft{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL-BXaptfdDo6ACXhaIoJlEvG-SBwRCvEE0U5MBTeRdikFxDX2DQ1DV_Hxq6d_sSc0x5ovCzEb6BbeKw0mn7BGy9d8o5d7932__sNJj34eXprJ7R7S2WCzgn4iMMApkXgr_3TviEtpOk/s1600/controls.png) no-repeat 0 0;} #cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdYwIbpOotHTCnHnJPL2f5J7RZEmPpdkzhqTaMn8Jc2_BgjtjKJ31o_xPpc3FtZlDMi7wFmRC_Sr__p2pX_3T5QG-dnKf3rUHQxiBtRGXsBl4kNvneBLqv8HZuwkpu193mYVeNaKNMAE/s400/border.png) repeat-x top left;}   #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL-BXaptfdDo6ACXhaIoJlEvG-SBwRCvEE0U5MBTeRdikFxDX2DQ1DV_Hxq6d_sSc0x5ovCzEb6BbeKw0mn7BGy9d8o5d7932__sNJj34eXprJ7R7S2WCzgn4iMMApkXgr_3TviEtpOk/s1600/controls.png) no-repeat -36px 0;}   #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL-BXaptfdDo6ACXhaIoJlEvG-SBwRCvEE0U5MBTeRdikFxDX2DQ1DV_Hxq6d_sSc0x5ovCzEb6BbeKw0mn7BGy9d8o5d7932__sNJj34eXprJ7R7S2WCzgn4iMMApkXgr_3TviEtpOk/s1600/controls.png) no-repeat 0 -32px;}   #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhRdYwIbpOotHTCnHnJPL2f5J7RZEmPpdkzhqTaMn8Jc2_BgjtjKJ31o_xPpc3FtZlDMi7wFmRC_Sr__p2pX_3T5QG-dnKf3rUHQxiBtRGXsBl4kNvneBLqv8HZuwkpu193mYVeNaKNMAE/s400/border.png) repeat-x bottom left;}   #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL-BXaptfdDo6ACXhaIoJlEvG-SBwRCvEE0U5MBTeRdikFxDX2DQ1DV_Hxq6d_sSc0x5ovCzEb6BbeKw0mn7BGy9d8o5d7932__sNJj34eXprJ7R7S2WCzgn4iMMApkXgr_3TviEtpOk/s1600/controls.png) no-repeat -36px -32px;}   #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL-BXaptfdDo6ACXhaIoJlEvG-SBwRCvEE0U5MBTeRdikFxDX2DQ1DV_Hxq6d_sSc0x5ovCzEb6BbeKw0mn7BGy9d8o5d7932__sNJj34eXprJ7R7S2WCzgn4iMMApkXgr_3TviEtpOk/s1600/controls.png) repeat-y -175px 0;}   #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL-BXaptfdDo6ACXhaIoJlEvG-SBwRCvEE0U5MBTeRdikFxDX2DQ1DV_Hxq6d_sSc0x5ovCzEb6BbeKw0mn7BGy9d8o5d7932__sNJj34eXprJ7R7S2WCzgn4iMMApkXgr_3TviEtpOk/s1600/controls.png) repeat-y -211px 0;}   #cboxContent{background:#fff; overflow:visible;}   #cboxLoadedContent{margin-bottom:5px;}   #cboxLoadingOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxWVdyUNMxBJcZMTV5p-hMn0OY14lrdc68VHia2XUBggn-dHqiLJs5fzqMVVmvU_WQWYhzIPNIQiJ2HoAePuxwLqrjH5P0k6v_YrjS7Of1pwq02bGn7lcGMJ52QCbi4nwR6ZVKkStafsA/s400/loadingbackground.png) no-repeat center center;}   #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEithSFCRdXI59OtZIsxP3sa33dFZiWZgBXjsCKRYNX39wVdUz4cKNoG_Utyzh73_r8RXIX2kP4Vw4NIGgH8o6QQRF4iKrd_aFuoQzm8tAe0wmLRNlBdyRnlgf2S2xoOUG9PV6pHyBCVgQ8/s400/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiZL-BXaptfdDo6ACXhaIoJlEvG-SBwRCvEE0U5MBTeRdikFxDX2DQ1DV_Hxq6d_sSc0x5ovCzEb6BbeKw0mn7BGy9d8o5d7932__sNJj34eXprJ7R7S2WCzgn4iMMApkXgr_3TviEtpOk/s1600/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;}   /*-----------------------------------------------------------------------------------*/   /* Facebook Likebox popup For Blogger Version 2.0   /*-----------------------------------------------------------------------------------*/   #subscribe {   font: 12px/1.2 Arial,Helvetica,san-serif; color:#666;   }   #subscribe a,   #subscribe a:hover,   #subscribe a:visited {   text-decoration:none;   }   .box-title {   color: #F66303;   font-size: 18px !important;   font-weight: bold;   margin: 10px 0;   border:1px solid #ddd;   -moz-border-radius:6px;   -webkit-border-radius:6px;   border-radius:6px;   box-shadow: 5px 5px 5px #CCCCCC;   padding:10px;   line-height:25px; font-family:arial !important;   }
.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;   }
/* ---------MBT Subscribe Form---------- */ .box-title1 {   border:1px solid #ddd;   -moz-border-radius:6px;   -webkit-border-radius:6px;   border-radius:6px;   box-shadow: 5px 5px 5px #CCCCCC;   padding:10px;   margin: 10px 0;   }
.enteryouremail{ background: #fff !important; border: 1px solid #d2d2d2; padding: 0px 8px 0px 8px; color: #a19999; font-size: 12px; height: 25px; width: 165px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; margin:0px; } .submitbutton{ background:#F66303; border: 1px solid #F66303; text-shadow: 1px 1px 1px #333; box-shadow: 3px 3px 3px #666; font:bold 12px Arial, sans-serif; color: #fff; height: 25px; padding: 0 12px 0 12px; margin: 0 0 0 5px; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; cursor:pointer;} </style> <script src="http://downloads.mybloggertricks.com/jquery.colorbox-min.js"></script> <script type="text/javascript"> jQuery(document).ready(function(){   if (document.cookie.indexOf('visited=true') == -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:"400px", inline:true, href:"#subscribe"});   } }); </script>       <div style='display:none'>   <div id='subscribe' style='padding:10px; background:#fff;'>   <h3 class="box-title">Receive all updates via Facebook. Just Click the Like Button Below<center><p style="line-height:3px;" >▼</p></center></h3>   <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2Farisvnn&width=300&colorscheme=light&show_faces=true&border_color=%23ffffff&stream=false&header=false&height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe> </center> <div class="box-title1 "> <center> <h3 style="color:#F66303;">You can also receive Free Email Updates:</h3>   <form action="http://feedburner.google.com/fb/a/mailverify" method="post" target="popupwindow" onsubmit="window.open('http://feedburner.google.com/fb/a/mailverify?uri=arisvn', 'popupwindow', 'scrollbars=yes,width=550,height=520');return true"><input gtbfieldid="10" class="enteryouremail" name="email" value="Enter your email here..." onblur="if (this.value == '') {this.value = 'Enter your email here...';}" onfocus="if (this.value == 'Enter your email here...') {this.value = '';}" type="text" /><input value="tntbystc" name="uri" type="hidden" /><input value="Submit" class="submitbutton" type="submit" /></form></center> </div>   <p style=" float:right; margin-right:35px; font-size:9px;" >Powered By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://arisvn.blogspot.com">Blogger Widgets</a></p>   </div>   </div>

Những chỗ tô đỏ bạn thay vào ID fanpage và ID Feed của bạn nhé
Receive all updates via Facebook. Just Click the Like Button Below : đoạn này bạn có thể thay bằng lời giới thiệu của bạn

Khung popup ko có nút share và Feed

Vào bố cục thêm Widget

<style type='text/css'>#PopFace {
position : absolute;
display : block;
top : 0;
left : 0;
width : 100%;
height : 100%;
position : fixed;
background-color : rgba(0, 0, 0, 0.9);
margin : 0;
overflow : hidden;
z-index : 999999;
}
#PopBook {
background-color : #ecf0f1;
overflow : hidden;
z-index : 999999;
}
.PopBook {
width : 290px;
height : 300px;
position : fixed;
top : 45%;
left : 50%;
margin-top : -200px;
margin-left : -200px;
border : #3b5998 solid 10px;
padding : 20px;
z-index : 999999;
border-radius : 4px;
}
#PopTitle {
background : #3b5998;
color : #fff;
font-size : 18px !important ;
font-weight : 700;
width : 324px;
margin : 0 -27px 10px -27px;
padding : 10px;
line-height : 25px;
text-align : center;
float : left;
}
.kangrio {
width : 280px;
height : 200px;
position : relative;
background : #3b5998;
padding : 0 10px 15px 0;
margin-top : 60px;
border-radius : 4px;
overflow : hidden;
}
.kangrio, .kangrio:before, .kangrio:after {
background : transparent;
border : #3b5998 solid 1px;
}
.kangrio:before, .kangrio:after {
position : absolute;
content : "";
bottom : -3px;
left : 2px;
right : 2px;
height : 1px;
border-top : none;
}
.kangrio:after {
left : 4px;
right : 4px;
bottom : -5px;
box-shadow : 0 0 2px #3b5998;
}
.close {
background : #3b5998;
padding : 5px 5px 10px 5px;
font-size : 14px;
font-weight:bold;
color : #ecf0f1;
text-decoration : none;
border-radius : 4px 4px 0 0;
cursor:pointer;
}
</style>
<div id='PopFace'><div class='PopBook' id='PopBook'><h3 id='PopTitle'>Get Update Photos Via Facebook</h3> <div class='kangrio'> <div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/V<div class='kangrio'><div class='fb-like-box' data-header='false' data-href='http://www.facebook.com/Varisvnn' data-show-faces='true' data-stream='false' data-width='292'></div> </div> <a class='close' onmouseup='document.getElementById('PopFace').style.display='none''>CLOSE</a> </div></div></div><a class='close' onmouseup='document.getElementById('PopFace').style.display='none''>CLOSE</a></div></div>

arisvnn : thay bằng ID fanpage của bạn
Get Update Photos Via Facebook : thay bằng lời giới thiệu của bạn

Khung like đếm s ko có nút tắt nhé

Vào mẫu- template tìm thẻ </body>, thẻ này gần cuối bài, dán đoạn code trước nó

Code :

<script type='text/javascript'>
//<![CDATA[
KNFBFansPRO='arisvn'
//]]>
</script>
<style>
#fblikepop{background-color:#fff;display:none;position:fixed;top:200px;_position:absolute; /* hack for IE 8*/width:450px;border:10px solid #900000;z-index:200;-moz-border-radius: 9px;-webkit-border-radius:

9px;margin:0pt;padding:0pt;color:#900000;text-align:left;font-family:arial,sans-serif;font-size:13px;
}
#fblikepop body{background:#FFF none repeat scroll 0%;line-height:1;margin:0pt;height:100%;
}
.fbflush{cursor:pointer;font-size:11px !important;color:#FFF !important;text-decoration:none !important;border:0 !important;
}
#fblikebg{display:none;position:fixed;_position:absolute; /* hack for IE 8*/height:100%;width:100%;top:0;left:0;background:#000000;z-index:100;
}
#fblikepop #closeable{float:right;margin:7px 15px 0 0;
}
#fblikepop h1{background:#900000 none repeat scroll 0 0;border-top:1px solid #900000;border-left:1px solid #900000;border-right:1px solid #900000;color:#FFFFFF !important;font-size:14px !important;font-

weight:normal !important;padding:5px !important;margin:0 !important;font-family:"Lucida Sans Unicode", "Lucida Grande", sans-serif !important;
}
#fblikepop #actionHolder{height:30px;overflow:hidden;}
#fblikepop #buttonArea{background:#FFFFFF;border-top:1px solid #9000000;padding:10px;minCCCCCCght:50px;
}
#fblikepop #buttonArea a{color:#999999 !important;text-decoration:none !important;border:0 !important;font-size:10px !important;
}
#fblikepop #buttonArea a:hover {color:#900000 !important;text-decoration:none !important;border:0 !important;
}
#fblikepop #popupMessage{font-size:12px !important;font-weight:normal !important;line-height:22px;padding:8px;background:#333 !important;
}
#fblikepop #counter-display{float:right;font-size:11px !important;font-weight:normal !important;margin:5px 0 0 0;text-align:right;line-height:16px;
}
</style>
<script src='https://sites.google.com/site/mmkbindas/jquery.js' type='text/javascript'/>
<script src='http://connect.facebook.net/en_US/all.js#xfbml=1' type='text/javascript'/>
<script src='https://sites.google.com/site/mmkbindas/fbpopup.js' type='text/javascript'/>
<script language='javascript'>
//<![CDATA[
$(document).ready(function(){
$().KNFBFansPRO({
timeout: 100,wait: 0,
url:'http://www.facebook.com/arisvnn',closeable:true});});
//]]>
</script>
<div id='fbtpdiv'/>

arisvnn : thay bằng tên bạn muốn

timeout: 100, : chỉnh thời gian tắt của hộp like

arisvnn : thay bằng ID fanpage của bạn

Tiếp tục khung like bé bé xinh xinh:

Chúng ta vẫn vào phần bố cục thêm tiện ích vào cpoy code này vào

<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type='text/javascript'></script><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 #828282;    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: #828282;    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 IEoptions.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/arisvnn&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://arisvn.blogspot.com" rel="nofollow">ARIS Blogger</a></div></div></div>

https://www.facebook.com/arisvnn : Thay bằng ID fanpage của bạn
Để khung đẹp hơn bạn nên chỉnh màu viền khớp với màu blog của bạn

Pin it

TÁC GIẢ : Unknown

Hi. I’m Designer and CEO/Founder of ThemeXpose. I’m Creative Web Designer, UI/UX Designer, Web Developer, Business Enthusiast, StartUp Enthusiast, Speaker, Writer and Photographer. Inspired to make things looks better.