Social Locker for Blogger cho phép bạn khóa một phần của nội dung trong một bài viết cho đến khi người dùng nhấp vào một trong các nút Like hoặc +1 (Facebook Like, Google +1) thì nội dung đó mới hiện ra. Nó giống như là một phần thường dành cho sự chia sẻ của bạn.
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.
Đây là thủ thuật của Wordpress: http://onepress-media.com/plugin/social-locker-for-wordpress và được Blogger Việt chia sẻ tại blog của anh ấy. Trong bài viết này mình xin chia sẻ lại và code lại một chút cho nó được gọn gàng và mượt hơn một chút cũng như Việt hóa nó. Để xem code gốc bạn có thể đọc tại đây
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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhJHrKIU8szAhO1yJabaXGkVoEr_ALEj3J0OeQkeD4oEIqnzz8R77tPP32Q8Z9FnuDU-1oq9hsKlV37AAl8pNVdrDihWoNKsI2siLCwLjpu6jvogsV_xsRzK1uq3tgEdt6D_5mEGVEbIuA/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg948MBwEvoK9tp0RMqiXduv5Os3IRTTox0uwhsR9R3dBRP41s-VOP9nQSlm94c10Xy-pdTWAN6zOHjAasG3uEKPlUOdNRq7SNK1Xk7OSYXcscv7GZjPQXHwvclx1aeoS59sJL9sInCJbY/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgx70LW47alsaQ3WWLlDJ-isLK76tBPTAWFW14Am_a_oPOw-3MkOjmsVcZGnDsdcwNDTvevt66JLSWk2-IslosV34OfNilGJVoFefOuJByaaX-kmtz69fxnJLObAYeNfS7pb7b9U_I3NWI/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)
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
<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>
