[Tips] - Popup like box với chỉ dẫn đẹp cho blogspot

Like box là tiện ích thiết yếu cho một blogspot nhằm quảng bá thương hiệu cho fanpage cũng như danh tiếng của mình, để bố trí ở đâu cho hợp lý khiến nhiều blogger phải suy nghĩ. Nay Khám Phá Blog's chia sẻ cho các bạn một kiểu like box dạng popup với chỉ dẫn động siêu đẹp.

Thêm popup like blog vào blogspot

Đăng nhập vào Blogger > Mẫu (templates) > Chỉnh sửa HTML, tìm đến thẻ đóng </body> và chèn đoạn code sau trên nó.

<div class='widget-content'>
<style>
#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;}
#cboxOverlay{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjaTNyrDG2Cx3IPO33P0uk-O8xronbMfvL3T7CHm4ZcS9ezTDATogGYymViOJNJd3UWhYzu-g8FTiwgS4xHCGmjGcXEdNV83zKAzzVzmyVHDtgmMaWo6b3Syeo3_qa_DJ5tu5sVdPWyo2CI/s1600/overlay.png) repeat 0 0;}
#colorbox{}
#cboxTopLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/s1600/controls.png) no-repeat -101px 0;}
#cboxTopRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/s1600/controls.png) no-repeat -130px 0;}
#cboxBottomLeft{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/s1600/controls.png) no-repeat -101px -29px;}
#cboxBottomRight{width:21px; height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/s1600/controls.png) no-repeat -130px -29px;}
#cboxMiddleLeft{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/s1600/controls.png) left top repeat-y;}
#cboxMiddleRight{width:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/s1600/controls.png) right top repeat-y;}
#cboxTopCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvGydBK4YFZGFbmUX5s4SA_-9hvP0UAV2NUXVdW2Ml5UTHYFYdrm1GW6RaOee9Gu8-jRxLmAa9h34hyphenhyphenuJT7aMtiXmr_5l8CuSTf8C-nN3Z6aIMYpb7odaLGbYPF9cDhF1C3_-ceqwf6gL/s1600/border.png) 0 0 repeat-x;}
#cboxBottomCenter{height:21px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgAvGydBK4YFZGFbmUX5s4SA_-9hvP0UAV2NUXVdW2Ml5UTHYFYdrm1GW6RaOee9Gu8-jRxLmAa9h34hyphenhyphenuJT7aMtiXmr_5l8CuSTf8C-nN3Z6aIMYpb7odaLGbYPF9cDhF1C3_-ceqwf6gL/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/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/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/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/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/AVvXsEirNEn-E0z-ShDVv9VBYeBxbT3oGqxo8wtB8CXXsQCkV1gz9JRJhMFsNTamePUciA0Dh9qcDAPgJY1-LSChIomol7ALmWGls3BoFtIopUILiuUqPzUqa1XfRCqllOeeKdbRvo18-VvBhy90/h120/loading.gif) no-repeat center center;}
#cboxLoadingGraphic{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEirNEn-E0z-ShDVv9VBYeBxbT3oGqxo8wtB8CXXsQCkV1gz9JRJhMFsNTamePUciA0Dh9qcDAPgJY1-LSChIomol7ALmWGls3BoFtIopUILiuUqPzUqa1XfRCqllOeeKdbRvo18-VvBhy90/h120/loading.gif) no-repeat center center;}
#cboxClose{position:absolute; bottom:0; right:0; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiOKBa07mg3MlblavYnj3bTZjb1OirsW-QwOoYex1-_aspFqgET3IIWM426xsVy9ysg2ElGEyoFutMxencPlVeG9XCTVwaYuSPo-9KyzAIUtS0kAF-z5I3ahN9eSssRgFMRsFk77AH6NWIj/s1600/controls.png) no-repeat -25px 0; width:25px; height:25px; text-indent:-9999px;}
#cboxClose:hover{background-position:-25px -25px;}
.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);
}
.cboxIE6 #cboxTopLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj_ug-i6HDeO4Ok66PvjRUtYF33TS6BqYGg4OYVDMA25By_Bni8AAyit5xBbt_9Vlu8K_HIcW70h19reV3VNiZDMp9Sk8rzNQ2YRk3j7Px7n6JP2foP_z4OY9JlK4IosGI0GpCxYHRww01f/s1600/borderTopLeft.png);}
.cboxIE6 #cboxTopCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhF2AyJDrwlaplZ18HT0ge0f2OaHlOrb_NMQzvmo8Zku4zw6oZvaz0vPXCKNxLCi6iTU5lyaGiN0tWELLyarWRRM53HzhcOWJKMlOot1mD_kN-yI1As52vvpFUbk7wpgVdCXF_sA1HEcRFv/s1600/borderTopCenter.png);}
.cboxIE6 #cboxTopRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHRUPQlrmwyCz-HF6UxGcScggXdF8VjNEc4FIxmdELMXyLCAlD2Ngnner2zarb9mq82Qmp2ZgXS9Jd6KeFH8AbhtG5ppI3Qs9BQDlMmTnsU0K-D0T98Mtk1lWqMgXIAoltCA0uu9OD2fRd/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhHRUPQlrmwyCz-HF6UxGcScggXdF8VjNEc4FIxmdELMXyLCAlD2Ngnner2zarb9mq82Qmp2ZgXS9Jd6KeFH8AbhtG5ppI3Qs9BQDlMmTnsU0K-D0T98Mtk1lWqMgXIAoltCA0uu9OD2fRd/s1600/borderTopRight.png);}
.cboxIE6 #cboxBottomCenter{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEil41mbFpmG1cv5uMurdwuvlbbTfIwZNvsxJ5R9FkQ4rmB8yVIB2V-VifecsXWEOTfSBJTi0rKWwmow1-kkmkk728gBc9U-wjIhdQdKrqjYj_FTtxDLV1Tp9Y589mYIyo1pN_XEO169NdbM/s1600/borderBottomCenter.png);}
.cboxIE6 #cboxBottomRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiY5ngm1kTBg114stW2aJAOWD48Ok9MTVw0smUVsDYWR6vTxQMufLPjZk4YMWtxQMbEpflhDYv-sLtuhyphenhyphene2XNGqo3N877ek8uWGUDERrWgOGsATpy-hLVp16uxIOvMbtaLQGG44jCTQr_eP/s1600/borderBottomRight.png);}
.cboxIE6 #cboxMiddleLeft{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEglx52ebFDrMxEFCj9HsKRrIWTEpvmD69P5LMSB446dpqU39JRmdfj71eKFk9q_IgeM6B3fkYr2C3xognfQCi8Rkam0i0NzJ3c0EhoBxa4vj7rMYPIHdwl1ODj7reMQQRGjeFHvhql6i-bm/s1600/borderMiddleLeft.png);}
.cboxIE6 #cboxMiddleRight{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhTzKk4u2d3Dp5gTPF-atP7y28pejiHl85Nf-TyvtubLP5yN073sE6yXK04Zd9GBjaVt2AnRRdT0lnx3fuhsRX_4Z4jTB6HOAehIgj4SOdQi1AvTbRsRtUhg2gKPgcj8JnR0LUAf6W_Qim0/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')");
}
#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;
}
.facebookOuter {
width: 299px;
position: relative;
padding:0;
}
.facebookOuter, .facebookOuter:before, .facebookOuter:after {
}
.facebookOuter:before, .facebookOuter:after {
content: "";
position: absolute;
bottom: -3px;
left: 2px;
right: 2px;
height: 1px;
border-top: none;
}
.facebookOuter:after {
left: 4px;
right: 4px;
}
.facebookInner {
width: 300px; margin-left: 0px;
overflow:hidden;
}
div.fb-widget { width: 300px; height: 258px; overflow: hidden; margin-left: -3px; margin-top: -2px; }
</style>
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script src="http://yourjavascript.com/3093182329/btt_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*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><h3 class="box-title"><img alt='' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjqt2mlN_ax5eZFh4FTSbXCPKspHcO3GTQD8jUOfah7wQR_cDENbY_D-4suLWMpgR5tfN-RYGHhMEE3o2KjZmF7pAKHW7B52l_eleCqU6mSs4KCzOH9qvtma4_vBDSrRXdXirrZJv675kI/s1600/subscribe.gif'/></h3> </center>
<center>
<div class="facebookOuter">
<div class="facebookInner">
<div class="fb-widget">
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-like-box" data-href="http://www.facebook.com/pages/Blogger-Tips-and-Tricks/357585684268281" data-width="300" data-height="250" data-show-faces="true" data-stream="false" data-show-border="false" data-header="false" colorscheme="light"></div>
</div>
</div> </div>
</center>
<p style=" float:right; margin-right:15px; font-size:6px;" >Powered By <a style=" font-size:6px; color:#3B78CD; text-decoration:none;" href="http://www.bloggertipsandtricks.net/2012/04/jquery-popup-facebook-like-box-v5.html" target='_blank'>Blogger Tips and Tricks</a></p>
</div>
</div>
</div>

Lưu mẫu và hốt hàng thôi hehe, chúc các bạn thành công ! 

Bài Viết Cùng Chủ Đề

• [Tips] - Hướng dẫn tích hợp AncPlayer cho BlogspotAncPlayer là trình chơi nhạc hay xem phim cho blogspot cực kỳ chuyên nghiệp mà bất kỳ blog phim hay nhạc đều phải có, t ...
• [Tips] - Thêm nút Pin Button cho ảnh bài viết BlogspotPin Button là công cụ share ảnh lên mạng xã hội Pinterest, mọi khi các bạn phải coppy link và lên trang này mới có thể ...
• [Tips] - Mẫu PopularPosts đẹp mà bạn nên dùngPopularPosts là bài đăng phổ biến là những bài viết được xem nhiều nhất thường được hiển thị trên sidebar của blogspot, ...
• [Tips] - Tối ưu css và js cho blogspot Trong việc seo blogspot thì tối ưu css và js là một điều khá cần thiết cho một blogger. Trong cộng đồng blogger việc n ...
• [Tips] - Thủ thuật khống chế css và js mặc định của blogspotCss mặc định của blog là những css khi bạn search với PageSpeed Insights  thì nó sẽ báo chặn hiển thị trên bl ...