• 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] - 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 ...
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

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