• KIẾN THỨC SEO
  • BLOG SERIER
  • SEO BLOGSPOT
  • TEMPLATE BLOGSPOT
  • ICON FACEBOOK
MENU

Hoc Tieng Trung Khamphablog.com

Menu
  • Home
  • #Web Tools
    • Giải Mã
    • Mã Hóa
    • Chuyển đổi code
    • Lấy mã màu
  • Liên Hệ
  • #Dịch Vụ
    • Rip Blogspot
    • Rip Wordpress
  • Site map
  • #Giới Thiệu
    • Admin
    • Blog
  • Liên Kết
  • Hỏi Đáp
Trang Chủ Blog Series Blog-Tips Like-box Thu-Thuat [Tips] - Popup like box với chỉ dẫn đẹp cho blogspot

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

Đỗ Mạnh Hồng June 01, 2015 Blog Series Blog-Tips Like-box Thu-Thuat
Đỗ Mạnh Hồng
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.
popup like box

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] - Bạn đã có định hướng seo cho mình chưa?Định hướng seo hay còn gọi là Chiến Lượt SEO, có nghĩa là những dự định của bạn khi bắt đầu làm seo blogpsot hay seo mộ ...
  • Thủ thuật thêm comments facebook chuẩn HTML5 cho blogspotComments facebook cũng như bất kỳ thủ thuật blogspot nào khác mà bạn muốn thêm vào trang của mình thì đỏi hỏi những tiệ ...
  • [Tips] - Hướng dẫn tối ưu blogspot chuẩn PageSpeed InsightsPageSpeed Insights là công cụ check tối ưu cho blogspot và website, với công cụ này khi bạn check với website mà tầm 80 ...
  • [Tips] - Sticky menu kèm hộp tìm kiếm cho blogspotNói đến stick menu là chúng ta nói đến một menu ghim cố định trên top blog, nó giúp tiện lợi hơn khi chúng ta lăn thanh ...
  • [Tips] - Làm đẹp widget nhãn (label) blogpsotNhãn hay còn gọi là Label trong blogspot là một phần không thể thiếu trong blogpsot nhằm giúp blogspot tăng pagera ...
Next
[Tips] - Hướng dẫn chi tiết cách tích hợp Responsive cho blogspot
Previous
[Tips] - Auto Nofollow link trỏ ra ngoài cho blogpsot
Penulisan markup di komentar
  • Untuk menulis huruf bold gunakan <strong></strong> atau <b></b>.
  • Untuk menulis huruf italic gunakan <em></em> atau <i></i>.
  • Untuk menulis huruf underline gunakan <u></u>.
  • Untuk menulis huruf strikethrought gunakan <strike></strike>.
  • Untuk menulis kode HTML gunakan <code></code> atau <pre></pre> atau <pre><code></code></pre>, dan silakan parse kode pada kotak parser di bawah ini.

3 nhận xét

Write nhận xét
Unknown
AUTHOR
8 June 2015 at 19:35 delete

template của mình k có thẻ body . vậy phải mần răng

Reply
avatar
Đỗ Mạnh Hồng
AUTHOR
8 June 2015 at 19:48 delete

templates nào mà lại ko có thẻ body hả bạn, bạn bấm crtl + F và tìm kỹ lại nhé, or có thể inbox mình hỗ trợ cho

Reply
avatar
Unknown
AUTHOR
6 September 2015 at 22:44 delete

Có khả năng đoạn code này bị ẩn đi nên khi tìm nó không hiện ra? Còn không có thẻ body thì web bị lỗi luôn rồi bạn.

Reply
avatar

Icon CommentsIcon Comments

:)
:(
=(
^_^
:D
=D
=)D
|o|
@@,
;)
:-bd
:-d
:p
:ng
Đăng Nhập để bình luận chém gió.
Subscribe to: Post Comments (Atom)

Blog Tự Học Seo Online

Blog ra đời dưới sự thành lập của Đỗ Mạnh Hồng với mục đích chia sẻ những kiến thức giúp bạn tự học seo blog online chạy trên nền tản blogspot và website, cùng với đó chúng tôi còn chia sẻ tới các bạn những templates blogspot chuẩn seo, những thủ thuật đơn giản giúp bạn thao tác dễ dàng hơn trong phần quản trị Blogger. Với tiêu chí muốn gởi đến các bạn "SEO TỪ KHÓA LÊN TOP - KHÓ MÀ DỄ". Hãy cũng chúng tôi trao đổi và mong muốn được hỗ trợ các bạn nhiều hơn nữa.


  • Popular

Popular

  • [Tips] - Thẻ điều kiện trong blogspot là gì?

SUBSCRIBE TO OUR NEWSLETTER

Copyright © 2015 Khamphablog.com All Right Reserved Tự học seo blog online cho người mới bắt đầu