Khi đặt các nút từ mạng xã hội như Like hay 1+ trên trang của trang web của bạn với hi vọng bạn đọc tự nhấn nút nhưng đa phần mọi người đều không nhấp vào vì họ sợ web người ta hơn mình!
Chính vì vậy đây là một giải pháp khá tốt để bạn khuyến khách bạn đọc nhấn vào các nút từ hai mạng xã hội phổ biến nhất hiện nay từ facebook và google+ plus.
![]() |
Social Locker for Blogger (Để xem nội dung bạn đọc phải nhấn vào một trong 2 nút trên) |
Bước 1: Vào chỉnh sửa HTML tìm tới code này ]]></b:skin> sau đó copy code dưới đây chèn trên code vừa tìm được.
/* --- Nút ẩn Like & +1 --- */ .to-lock{padding:20px}.inner-wrap{background:#435989}#header .get-it a{text-decoration:none;color:#000}#header .get-it #zenbox_tab{background-color:#f6f6f6!important}#zenbox_tab:hover{background-color:#333!important}#zenbox_tab #feedback_tab_text{color:#333!important}#zenbox_tab:hover #feedback_tab_text{color:#fff!important}.ui-social-locker,.ui-social-locker .ui-social-locker-text,.ui-social-locker .ui-social-locker-timer{font:normal normal 400 13px/23px "Arial",serif}.ui-social-locker,.ui-social-locker .ui-social-locker-outer-wrap,.ui-social-locker .ui-social-locker-inner-wrap{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.ui-social-locker{position:relative!important;background-color:#FFF;max-width:500px}.ui-social-locker p{margin:0}.ui-social-locker .ui-social-locker-text{text-align:center}.ui-social-locker-text .ui-social-locker-strong{font-weight:bold;text-transform:uppercase;font-size:16px;display:inline-block}.ui-social-locker-buttons{text-align:center}.ui-social-locker-text+.ui-social-locker-buttons{margin-top:15px}.ui-social-locker-button-inner-wrap,.ui-social-locker-button-overlay{height:40px;width:120px;padding:10px;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;z-index:1}.ui-social-locker-button-inner-wrap{position:relative}.ui-social-locker-button{display:inline-block;vertical-align:top;text-align:left}.ui-social-locker-button-overlay{position:absolute;top:0;left:0}.ui-social-locker-button+.ui-social-locker-button{margin-left:10px}.ui-social-locker-button{background-color:#f2f2f2}.ui-social-locker-button .fb-like span,.ui-social-locker-button .fb-like iframe{height:20px!important}.ui-social-locker-button-overlay *{position:absolute;width:100%;top:0;left:0}.ui-social-locker-overlay-front,.ui-social-locker-overlay-back{height:100%;top:0;left:0}.ui-social-locker-overlay-front{z-index:1}.ui-social-locker-overlay-back{z-index:0}.ui-social-locker:hover .ui-social-locker-cross{opacity:.2;filter:alpha(opacity=20)}.ui-social-locker .ui-social-locker-cross:hover{opacity:.8;filter:alpha(opacity=80)}.ui-social-locker .ui-social-locker-timer{position:absolute;right:5px;bottom:5px;z-index:10}.ui-social-locker .ui-social-locker-timer,.ui-social-locker .ui-social-locker-timer *{font:normal normal 400 12px/12px sans-serif;text-transform:lowercase}.ui-social-locker .ui-social-locker-timer{color:#000;margin-left:5px}.ui-social-locker .ui-social-locker-timer-counter{font-weight:bold}.ui-social-locker-opera .ui-social-locker-button-facebook .fb-like{position:relative;top:-1px}.gc-bubbleDefault{display:none!important}.ui-social-locker-flip .ui-social-locker-button-inner-wrap{perspective:500px;perspective-origin:50% 0;-webkit-perspective:500px;-webkit-perspective-origin:50% 0;-moz-perspective:500px;-moz-perspective-origin:50% 0}.ui-social-locker-flip .ui-social-locker-button-overlay{display:block;transform-origin:bottom;transform-style:preserve-3d;transition:transform .3s ease;transform:translate(0);-webkit-transform-origin:bottom;-webkit-transform-style:preserve-3d;-webkit-transition:-webkit-transform .3s ease;-webkit-transform:translateY(0) rotateX(0);-moz-transform-origin:bottom;-moz-transform-style:preserve-3d;-moz-transition:-moz-transform .3s ease;-moz-transform:translate(0)}.ui-social-locker-flip .ui-social-locker-overlay-back{transform:rotateX(-180deg) translateZ(4px);-webkit-transform:rotateX(-180deg) translateZ(4px);-moz-transform:rotateX(-180deg) translateZ(4px)}.ui-social-locker-flip .ui-social-locker-overlay-header{height:4px;transform-origin:top;transform:rotateX(-90deg);-webkit-transform-origin:top;-webkit-transform:rotateX(-90deg);-moz-transform-origin:top;-moz-transform:rotateX(-90deg)}.ui-social-locker-flip:hover .ui-social-locker-button-overlay{display:block!important;transform:translateY(4px) rotateX(-110deg);-webkit-transform:translateY(4px) rotateX(-110deg);-moz-transform:translateY(4px) rotateX(-110deg)}.ui-social-locker-flip:hover .ui-social-locker-overlay-back{border-top:2px solid #eee}.ui-social-locker-secrets .fb-like span,.ui-social-locker-secrets .fb-like iframe{width:118px!important}.ui-social-locker-secrets{margin:5px auto;border:0;background-color:transparent}.ui-social-locker-secrets .ui-social-locker-inner-wrap{border:3px solid #fefefe;background-color:#EEE;padding:10px}.ui-social-locker-secrets .ui-social-locker-outer-wrap{border:1px solid #e6e6e6;box-shadow:0 0 40px rgba(0,0,0,0.08)}.ui-social-locker-secrets .ui-social-locker-text,.ui-social-locker-secrets .ui-social-locker-timer,.ui-social-locker-secrets .ui-social-locker-timer *{-webkit-text-shadow:1px 1px 2px #fff;-moz-text-shadow:1px 1px 2px #fff;text-shadow:1px 1px 2px #fff}.ui-social-locker-secrets .ui-social-locker-text .ui-social-locker-strong:before,.ui-social-locker-secrets .ui-social-locker-text .ui-social-locker-strong:after{content:" ";display:inline-block;width:11px;height:14px;margin:0 9px;background:url(http://3.bp.blogspot.com/-lvKy8DLRDd0/UNibgZHOUdI/AAAAAAAAKEQ/vfIKHI5cjAQ/s1600/lock-icon.png) 0 2px no-repeat}.ui-social-locker-secrets .ui-social-locker-text .ui-social-locker-strong:after{margin-left:10px}.ui-social-locker-secrets .ui-social-locker-button{padding:4px;background:rgba(0,0,0,0.05)}.ui-social-locker-secrets .ui-social-locker-button-inner-wrap,.ui-social-locker-secrets .ui-social-locker-button-overlay{height:34px;width:118px}.ui-social-locker-secrets .ui-social-locker-button-inner-wrap{padding:7px;-moz-box-shadow:inset 0 0 6px rgba(0,0,0,0.25);-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.25);box-shadow:inset 0 0 6px rgba(0,0,0,0.25)}.ui-social-locker-secrets .ui-social-locker-button-facebook .ui-social-locker-overlay-front{background:url(http://1.bp.blogspot.com/-6RbOsbKqDVc/UWJV_sIVVPI/AAAAAAAAJBg/aVgexflQOhQ/s1600/LIKE.png) top left no-repeat}.ui-social-locker-secrets .ui-social-locker-button-facebook .ui-social-locker-overlay-back{background:#46629e}.ui-social-locker-secrets .ui-social-locker-button-facebook .ui-social-locker-overlay-header{background-color:#314775}.ui-social-locker-secrets .ui-social-locker-button-google .ui-social-locker-overlay-front{background:url(http://2.bp.blogspot.com/-bVd43_k-pHo/UWJV_w-bQtI/AAAAAAAAJBk/qenCnATVaLo/s1600/PLUS.png) top left no-repeat}.ui-social-locker-secrets .ui-social-locker-button-google .ui-social-locker-overlay-back{background:#494647}.ui-social-locker-secrets .ui-social-locker-button-google .ui-social-locker-overlay-header{background-color:#111}.ui-social-locker-secrets .ui-social-locker-cross{top:38px;right:38px}.ui-social-locker-secrets .ui-social-locker-dandyish .ui-social-locker-outer-wrap{padding:5px;background-color:#fff;border-radius:10px}#icopyright{text-align:center;font-family:Arial,serif;text-transform:uppercase;font-weight:bold;font-size:7px;position:relative}
Bước 2: Tiếp tục chèn code này bên dưới trước </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js' type='text/javascript'></script>Lưu ý: nếu trong template của bạn đã có jquery.min thì bỏ qua bước này.
Bước 3: Cuối cùng sử dụng code dưới đây trong bài viết cần khóa nội dung hoặc liên kết. (Mở chế độ HTML trong soạn thảo bài viết để chèn vào)
<article id="default-usage"> <div class="to-lock" style="display: none;"> <div style="text-align: justify;"> Nội dung hiển thi của bạn... </div> </div> </article> <br /> <div id="icopyright"> </div> <script src="https://dl.dropboxusercontent.com/u/29848934/js/like.js" type="text/javascript"></script> <script> jQuery(document).ready(function ($) { $("#default-usage .to-lock").socialLock({ text: { header: "NỘI DUNG BỊ KHÓA", message: "Để xem nội dung hoặc link liên kết tải về hãy LIKE hoặc +1 bằng nút bên dưới" }, style: "ui-social-locker-secrets", buttons: { order: ["facebook", "google"] }, // facebook options facebook: { url: "http://www.facebook.com/123971381094336", appId: "282687478500338" }, google: { url: "http://www.hanhhuong.info" } }); });;;; </script>
Chú ý: Thay thế nội dung, link blog và ID facebook cho phù hợp với bạn hãy tải file dưới đây lên Host riêng để chạy nhanh hơn: https://dl.dropboxusercontent.com/u/29848934/js/like.js
Live demo