+ + + Social Locker for Blogger

Social Locker for Blogger

Social Locker for Blogger

Social Locker for Blogger cho phép bạn khóa một phần của nội dung trên một trang web cho đến khi người dùng nhấp vào một trong các nút Like...
11 Comment 4/11/2013
Social Locker for Blogger cho phép bạn khóa một phần của nội dung trên một trang web cho đến khi người dùng nhấp vào một trong các nút Like (Facebook Like, Google +1) và  Bạn vẫn còn đặt các nút xã Like hay 1+ trên trang của trang web của bạn? Tuy nhiên, mọi người dều không nhấp vào sợ web người ta hơn mình!
đây là thủ thuật của Wordpress : http://onepress-media.com/plugin/social-locker-for-wordpress

DEMO

Chèn code này trước ]]></b:skin>

/* --- Lock--- */
.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/AVvXsEgddBtvu2iT3hu2Jz-YViiWVZ1VHkKHwD6se5p1XVrmlrKu7L9j-cUTUtamdDVnso2Kl3mmZrpUkG2IhyBbdzKn9KiEHzIf2Ijlvz_rsm0z4ppWOAYT5y1TERQRudzE3cuMRAkyDHkDH8k/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/AVvXsEgYxAixTG14KGKRrm096MlltPrERK6MW0PHapqh3NiuYHihnbYvaThPsdhNwwhmLVZ5FNBqBYBCbAtf21kui5nExswDAUIzRyQ2w6CaiSSGGG0M7pRl5p53BP-GIctkSm5igJf7AdP1B78/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/AVvXsEgTUW0CZiu7sldDciT6yNlpbXd3Lm9OzcAXYvYXqkvRyzy5veUg7l-OAKtuF413cn6UPMIjcN9YRDRJbztN9jzQ32FT8B4Sa7Ns6XdFZcloXuMvhOPMRToaems5RJwwqse21cUCvfLtnbA/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}

Tiếp tục chèn code này 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.

Cuối cùng sử dụng code này trong bài viết cần khóa nội dung hoặc liên kết.


<article id="default-usage">
<div class="to-lock" style="display: none;"> 

<div style="text-align: justify">
Nội dung sẽ ẩn ở đây, link, hình ảnh...
</div>
</article> 
</div><div id="icopyright"> </div>
<script type="text/javascript" src="https://bloggerviet.googlecode.com/svn/trunk/Locklike.js"></script>
  
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({

text: {
header: "Nội dung đã bị khóa",
message: "LIKE hoặc +1 để xem nội dung"
},

style: "ui-social-locker-secrets",
buttons: {
order: ["facebook", "google"]
},

// facebook options
facebook: {
url: "http://www.facebook.com/abc",
appId: "0123456789"
},

google: {
url: "http://www.yourblogger.com"
}
});
});;;;
        
</script>

thay thế link và ID cho phù hợp với bạn
hày tải file này lên Host riêng để chạy nhanh hơn: https://bloggerviet.googlecode.com/svn/trunk/Locklike.js

Một số tính năng khác
Dưới đây là một số tính năng thú vị nhất:

Plugin này hoạt động với các plugin bộ nhớ đệm và không thêm phụ tải trên blog của bạn. 
Locker hỗ trợ thiết bị di động .
Plugin này là thân thiện với SEO . Đã khóa nội dung vẫn là có sẵn cho chương trình tìm kiếm (Google, Bing, vv). 
+

Bình luận