Zing News - Tri thức trực tuyến

M

Tạo like Box - Hộp like Facebook hiện nổi trên trang

Saturday, May 3, 2014
Để giúp blog chúng ta tăng số lương like - song hành cùng với số lượng xem, thì cách tốt nhất mà win phạm thấy đó là tạo một popup hộp like Facebook hiện nổi trên mỗi trang khi độc giả xem bài viết.








Để làm hộp like facebook này, các bạn cần cài đặt và làm theo các bước sau:

1. Vào Bảng điều khiển, chọn Chỉnh sửa HTML.
2. Copy và tìm thẻ </head> , sau đó dán đoạn mã sau trên nó:
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script><script src='http://yourjavascript.com/69231961363/jquery-colorbox-min.js' type='text/javascript'/> 
<script type='text/javascript'> 
jQuery(document).ready(function(){ 
if (document.cookie.indexOf(&#39;visited=true&#39;) == -1) { 
var setDays = 1000*60*60*24*7; 
var expires = new Date((new Date()).valueOf() + setDays); 
document.cookie = &quot;visited=true;expires=&quot; + expires.toUTCString(); 
$.colorbox({width:&quot;400px&quot;, height:&quot;430px&quot;, inline:true, href:&quot;#facebook-popup&quot;}); 
}});</script>    
Lưu ý: trong đó số 7 ở trong đoạn code trên, là giá trị thời gian để xuất hiện popup box like này. Ở đây là 1 tuần (7 ngày), bạn không nên dùng số 1 vì sẽ gây phiên hà cho độc giả.

3. Copy và tìm thẻ </b:skin>, sau đó dán đoạn mã sau trên nó:
/* 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; -webkit-overflow-scrolling: touch; } #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; max-width: none; -ms-interpolation-mode: bicubic; } .cboxIframe { width: 100%; height: 100%; display: block; border: 0; } #colorbox, #cboxContent, #cboxLoadedContent { box-sizing: content-box; -moz-box-sizing: content-box; -webkit-box-sizing: content-box; } /* User Style: Change the following styles to modify the appearance of Colorbox. They are ordered and tabbed in a way that represents the nesting of the generated HTML. */ #cboxOverlay { background: #000; } #colorbox { outline: 0; } #cboxContent { margin-top: 20px; background: #000; } .cboxIframe { background: #fff; } #cboxError { padding: 50px; border: 1px solid #ccc; } #cboxLoadedContent { border: 5px solid #123D60; background: #fff; box-shadow: 3px 3px 3px #fff; } #cboxTitle { position: absolute; top: -20px; left: 0; color: #ccc; } #cboxCurrent { position: absolute; top: -20px; right: 0px; color: #ccc; } #cboxLoadingGraphic { background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjmqTqEO9-WwCQ_fkOqlbqNOEmPDFKuBYahuKw_tfObYKGF7CUazQRSf-aDg1WIxdgVwsRLyXoNDfAXJLkDEtGRV1-Yeu8Ns4yjcJTIt-S9Xmstiq3k8UOTmpCq2qpZ3mbK28cjh1NVguIX/s32/loading.gif) no-repeat center center; } /* these elements are buttons, and may need to have additional styles reset to avoid unwanted base styles */ #cboxPrevious, #cboxNext, #cboxSlideshow, #cboxClose { border: 0; padding: 0; margin: 0; overflow: visible; width: auto; background: none; } /* avoid outlines on :active (mouseclick), but preserve outlines on :focus (tabbed navigating) */ #cboxPrevious:active, #cboxNext:active, #cboxSlideshow:active, #cboxClose:active { outline: none; } #cboxSlideshow { position: absolute; top: -20px; right: 90px; color: #fff; } #cboxPrevious { position: absolute; top: 50%; left: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top left; width: 28px; height: 65px; text-indent: -9999px; } #cboxPrevious:hover { background-position: bottom left; } #cboxNext { position: absolute; top: 50%; right: 5px; margin-top: -32px; background: url(https://sites.google.com/site/techprevue/home/controls.png) no-repeat top right; width: 28px; height: 65px; text-indent: -9999px; } #cboxNext:hover { background-position: bottom right; } #cboxClose { position: absolute; top: 5px; right: 5px; display: block; background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjHWveNH6_fc5g2PRT8I9XgQGaLOixbBKdTepVgIxrxhgKpUqWQ9XtkD1g92KhkSPkvHI-_icYnuFd8J21wnsVBb3U9iKBUiWzxO2M51SVvKqrWmzPw-78fkDfIeVjp4n66QL7H2Zj-i_oQ/s130/controls.png) no-repeat top center; width: 38px; height: 19px; text-indent: -9999px; } #cboxClose:hover { background-position: bottom center; }  
4. Copy và tìm thẻ </body>, dán đoạn mã sau vào trên nó:
<div style='display:none'> 
<div id='facebook-popup' style='background:#fff;position:scroll;z-index:99999;'> 
<div style='text-align:center;padding-top:15px'> <h3 style='font-family: &apos;Source Sans Pro&apos;, Sans Serif; Font-size: 18px; font-weight: 300px; '>Receive All Free Updates Via Facebook.</h3> 
<iframe allowtransparency='true' frameborder='0' scrolling='no' src='//www.facebook.com/plugins/likebox.php?href=https://www.facebook.com/VinaSens&amp;width=342&amp;height=300&amp;show_faces=true&amp;colorscheme=light&amp;stream=false&amp;show_border=false&amp;header=false&amp;appId=' style='border:none; overflow:hidden; width:342px; height:300px;'/> 
  </div> 
  </div> 
    </div>  
Trong code này bao gồm :
https://www.facebook.com/VinaSens : là link fanpage của Blog.
-  width=342 và height=300 : là chiều rộng và cao của box.
  • http://thuthuatvinasens.blogspot.com/2014/05/tao-like-box-hop-like-facebook-hien-noi.html
Zing cám ơn bạn đã quan tâm và rất vui vì bài viết đã đem lại thông tin hữu ích cho bạn.

All comments [ 0 ]


Your comments