Code Popup khung Like Page Facebook giữa trang cho Website, Blog

Nhiều bạn quan tâm tới Code Popup để sử dụng làm quảng cáo hoặc điểm nhấn của mình. Khá nhiều Code Popup được ITViet360 chia sẻ và trong bài hôm nay, chúng tôi xin chia sẻ với bạn 1 code Popup hiển thị khung Like page Facebook ở trang Web hoặc Blogspot. Đáp ứng theo yêu cầu của bạn đọc gửi về Email.

Demo trực tiếp tại Blog Hình ảnh đẹp 

Ở đây mình sẽ chia sẻ code và hướng dẫn làm trên Blogspot. Ở nền Website khác như Wordpress,...các bạn làm tương tự nhé.

Code Popup khung Like Page Facebook giữa trang cho Website, Blog


<style>
/*
   ColorBox Core Style:
   The following CSS is consistent between example themes and should not be altered.
*/
#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/AVvXsEguL46TOJqXDArVFUf10iPGBBNj3QE7st8jW6sWUPAf40gV-ds1NzR4EiTQtreqOusdRW6t0UtSpzWNBbSJm8hKgz4ATAX5GtsIvYrKs-pXSWfqS-YhbC-9FEkbfqlamyuBIbYle6Yxocc/s1600/controls.png) no-repeat 0 0;}
#cboxTopCenter{height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNaUEFjTjG1cGvjHdcOE46UXtE6qUl52oE8krAkAMVvoW6WMEOXwiu0ISqxjy1Q4J5JZB5jX51OPiMe9YKXIE534NM_zdQ3Modrppw0tNWRsyjlGGDgZvWiSmvdTPzq_hPc5ddpkKsPFw/s400/border.png) repeat-x top left;}
     #cboxTopRight{width:14px; height:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguL46TOJqXDArVFUf10iPGBBNj3QE7st8jW6sWUPAf40gV-ds1NzR4EiTQtreqOusdRW6t0UtSpzWNBbSJm8hKgz4ATAX5GtsIvYrKs-pXSWfqS-YhbC-9FEkbfqlamyuBIbYle6Yxocc/s1600/controls.png) no-repeat -36px 0;}
     #cboxBottomLeft{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguL46TOJqXDArVFUf10iPGBBNj3QE7st8jW6sWUPAf40gV-ds1NzR4EiTQtreqOusdRW6t0UtSpzWNBbSJm8hKgz4ATAX5GtsIvYrKs-pXSWfqS-YhbC-9FEkbfqlamyuBIbYle6Yxocc/s1600/controls.png) no-repeat 0 -32px;}
     #cboxBottomCenter{height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiNaUEFjTjG1cGvjHdcOE46UXtE6qUl52oE8krAkAMVvoW6WMEOXwiu0ISqxjy1Q4J5JZB5jX51OPiMe9YKXIE534NM_zdQ3Modrppw0tNWRsyjlGGDgZvWiSmvdTPzq_hPc5ddpkKsPFw/s400/border.png) repeat-x bottom left;}
     #cboxBottomRight{width:14px; height:43px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguL46TOJqXDArVFUf10iPGBBNj3QE7st8jW6sWUPAf40gV-ds1NzR4EiTQtreqOusdRW6t0UtSpzWNBbSJm8hKgz4ATAX5GtsIvYrKs-pXSWfqS-YhbC-9FEkbfqlamyuBIbYle6Yxocc/s1600/controls.png) no-repeat -36px -32px;}
     #cboxMiddleLeft{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguL46TOJqXDArVFUf10iPGBBNj3QE7st8jW6sWUPAf40gV-ds1NzR4EiTQtreqOusdRW6t0UtSpzWNBbSJm8hKgz4ATAX5GtsIvYrKs-pXSWfqS-YhbC-9FEkbfqlamyuBIbYle6Yxocc/s1600/controls.png) repeat-y -175px 0;}
     #cboxMiddleRight{width:14px; background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguL46TOJqXDArVFUf10iPGBBNj3QE7st8jW6sWUPAf40gV-ds1NzR4EiTQtreqOusdRW6t0UtSpzWNBbSJm8hKgz4ATAX5GtsIvYrKs-pXSWfqS-YhbC-9FEkbfqlamyuBIbYle6Yxocc/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/AVvXsEjdyU2mCsHiDZvWgm3QQF3yFLa-PjEmDJofT1kWCGsPDGyOpU2zGc8BPNrHOs406IqodScYM4aP8mLn4ztALAjVIBlDndzLqyjXDiZrc8bbLVdchq_cCN_GI718YsmO_wo25MUA_-VOFyw/s400/loadingbackground.png) no-repeat center center;}
         #cboxLoadingGraphic{https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjo6SGKjAFZ6ViumjqqZtAPs7XvFViu6KMejNR9Mt371jBiyOcvK8r92ze8ktzLH8yukjfCqz82hWPtXItdTcMgDPukSoCy5AZ_MUSpVgLGqp8zRSULjBmSOwshxAn3QOYeV1kF0QhyTQI/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/AVvXsEguL46TOJqXDArVFUf10iPGBBNj3QE7st8jW6sWUPAf40gV-ds1NzR4EiTQtreqOusdRW6t0UtSpzWNBbSJm8hKgz4ATAX5GtsIvYrKs-pXSWfqS-YhbC-9FEkbfqlamyuBIbYle6Yxocc/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
/*-----------------------------------------------------------------------------------*/
#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: 20px !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;
}
</style>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
<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>
    <!-- This contains the hidden content for inline calls -->

        <div style='display:none'>
   <div id='subscribe' style='padding:10px; background:#fff;'>
        <h3 class="box-title">Like Page hình ảnh đẹp để theo dõi những ảnh đẹp ý nghĩa nhé!<center><p style="line-height:3px;" >▼</p></center></h3>
      <center>
<iframe src="//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/hinhanhdep3&amp;width=300&amp;colorscheme=light&amp;show_faces=true&amp;border_color=%23ffffff&amp;stream=false&amp;header=false&amp;height=258" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:300px; height:258px;" allowtransparency="true"></iframe>
</center>
<p style=" float:right;  margin-right:35px;  font-size:9px;" >Support By <a style=" font-size:9px; color:#3B78CD; text-decoration:none;" href="http://www.itviet360.com" target="_blank">IT Viet</a></p>
</div>
</div>

Trong đó: các dòng bôi vàng được thay thế bằng tùy chọn của bạn.

• Cách thêm Code popup này vào Blogspot

Bạn chỉ cần tạo 1 tiện ích HTML/Javascript và dán code đó vào tiện ích đó.
Thêm tiện ích bằng thao tác vào bảng điều khiển Blogger -> bố cục (Layout) -> Thêm tiện ích (Add a Widget) -> HTML/Javascript.
Chúc các bạn vui vẻ !

Tweet