Thủ thuật ẩn nội dung buộc người dùng phải Like mới được xem

Bạn có biết rất nhiều blogger đang sử dụng các trang mạng xã hội để làm tăng lượng truy cập vào Website của họ không? Có rất nhiều cách mà các blogger áp dụng để liên kết blog của họ với các mạng xã hội. Tuy nhiên, để có thể liên kết và tăng sự liên kết tương tác giữa người dùng và các mạng xã hội là rất khó, vì đa số các cách chỉ là chèn dạng liên kết aherfbình thường, mặc dù có một số tiện ích giúp tăng lượng truy cập theo xã hội như popup, nhưng nó là không đủ. Nếu chúng ta muốn thống trị các trang web xã hội, thì mỗi chúng ta phải sử dụng mọi cơ hội mà chúng ta có. Vì lý do đó, hôm nay mình sẽ giới thiệu một tiện ích của mybloggerlab để khóa nội dung dựa trên các like của độc giả.
Bạn có sử dụng nhiều tiện ích để chia sẻ trang của trang web của bạn trên các mạng xã hội? Tuy nhiên, sự tương tác của độc giả với blog/web của bạn thông qua hệ thống mạng xã hội là còn tương đối thấp nếu không muốn nói là rất thấp. Trên thực tế, vấn đề là, mặc dù mọi người thích nội dung của bạn, nhưng họ không bấm vào các nút button xã hội và thay vào đó đã đọc và rời khỏi trang web của bạn bởi vì họ không quan tâm đến trafic của bạn hoặc trang web của bạn. Yêu cầu mọi người like, +1 hoặc tweet để có được quyền truy cập vào nội dung của bạn thực sự là một cách lý tưởng buộc người dùng phải chia sẻ nó trên các trang web xã hội.

Khóa nội dung qua mạng xã hội bao gồm ba nút của 3 mạng xã hội và hiển thị theo chiều ngang. Các nút xã hội bao gồm Facebook, Twitter và Google +. Bất cứ khi nào, một người hoặc là sẽ nhấn Like, Tweet hay +1 với một nút nó sẽ hiển thị nội dung ẩn. Điều này cho phép một người để nhận được theo xã hội thực tế hơn. Tất nhiên ta chỉ nên ẩn những nội dung "cần ẩn" ví dụ như "Like để hiện link download" chẳng hạn. Đừng nên lạm dụng chức năng này quá sẽ gây phiền hà cho độc giả của mình để rồi chịu hậu quả ngược lại.

Cách thực hiện

Bước 1. Đăng nhập Blogger ➔ Mẫu (Chủ đề) ➔ Chỉnh sửa HTML.
Bước 2. Copy và paste đoạn CSS bên dưới vào trước thẻ ]]></b:skin> trong template.

.to-lock{background-color:#f6f6f6;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:#f9f9f9;padding:25px;margin:20px auto;max-width:700px}
.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 .ui-social-locker-cross{background:url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiBB6FrQBL4yHjr6wXW4vKEPRvNU_uOZRRLQ1zJqxBRpduS1oO_DuKcOZCnrxYa3TVpP_kKoaPF9oJQ0EXnYzBoslCIzngVVin4ewpq1DfkOofmqelS8Wxf8Au9MK0tlV27UABhqxj1so/s1600/close+(1).png") 50% 50% no-repeat;width:16px;height:16px;opacity:.1;filter:alpha(opacity=10);cursor:pointer;position:absolute;top:4px;right:4px;z-index:2}
.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{padding:30px;margin:10px auto 15px auto;border:0;background-color:transparent}
.ui-social-locker-secrets .ui-social-locker-inner-wrap{border:3px solid #fefefe;background-color:#f7f7f7;padding:30px}
.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/AVvXsEidphRqIEU2kXxDguiIRuNh3HzHpr2id5vQA8twlPtANzg4ggl9vjTgPAgkHrpw6Kl6Bq57QUSOubyq29yWI5uS4LibsuWW-HVz2gtuBAQRuHp1kA4pKDrKBZQIaMXbofo5oHUfkusFyz0/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-twitter .ui-social-locker-overlay-front{background:#399ff0 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiAdvffstE_Pzl98Dg8_g0LDG3P3cGV2y6sqZ_ie4nobzZ6xPpATm0HTxNC4w8yJyC7oSK-EuSHf6rxgUTAtd24YKewkMjTitvpbQQR_33S8LH7EfcBTi48zpdEb6vMlAf0fzCdUq61cmk/s1600/tweet-btn.png") top left no-repeat}
.ui-social-locker-secrets .ui-social-locker-button-twitter .ui-social-locker-overlay-back{background:#24b1e5}
.ui-social-locker-secrets .ui-social-locker-button-twitter .ui-social-locker-overlay-header{background-color:#368acd}
.ui-social-locker-secrets .ui-social-locker-button-facebook .ui-social-locker-overlay-front{background:#46629e url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiIOWOhurCvM9HXelzrxVQQbrjDGhhI52GhuRQplDnK30A7i1Vqm4DR28QXg6bM9D3boG9TDCGPHPA-RWvETbulemYKJ7mQGikPWB_P7vjvcZDpZCEVanY4snOnFA1OosjhKY2GAkRyFaE/s1600/like-btn.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:#494647 url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgiYp7qL0a2JStUqL-twDwbUnEPhy_tGL0ot80Lw3Wnlb41HIMzfPYtmaO7xJ2VatXuGCaCHa_1qB3HCCXgWaYi_EVNay4LavqndXI77AOzsexdsZABJVcMS_VKAx2MwOMhncbtLCw6sTc/s1600/plus-one-btn.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}
.ui-social-locker-dandyish .ui-social-locker-inner-wrap{padding:10px;border-radius:10px;background-color:f8f8f8;background:linear-gradient(top,#f9f9f9,#F5F5F5);background:-o-linear-gradient(top,#f9f9f9,#F5F5F5);background:-moz-linear-gradient(top,#f9f9f9,#F5F5F5);background:-webkit-linear-gradient(top,#f9f9f9,#F5F5F5);filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#f9f9f9',endColorstr='#F5F5F5',GradientType=0);background:-ms-linear-gradient(top,#FFF,#F5F5F5);-moz-box-shadow:inset 0 1px 6px rgba(0,0,0,0.20);-webkit-box-shadow:inset 0 1px 6px rgba(0,0,0,0.20);box-shadow:inset 0 1px 6px rgba(0,0,0,0.20)}
.ui-social-locker-dandyish .ui-social-locker-text{padding:10px}
.ui-social-locker-dandyish .ui-social-locker-text,.ui-social-locker-dandyish .ui-social-locker-timer,.ui-social-locker-dandyish .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-dandyish .ui-social-locker-text .ui-social-locker-strong:before,.ui-social-locker-dandyish .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/AVvXsEidphRqIEU2kXxDguiIRuNh3HzHpr2id5vQA8twlPtANzg4ggl9vjTgPAgkHrpw6Kl6Bq57QUSOubyq29yWI5uS4LibsuWW-HVz2gtuBAQRuHp1kA4pKDrKBZQIaMXbofo5oHUfkusFyz0/s1600/lock-icon.png") 0 2px no-repeat}
.ui-social-locker-dandyish .ui-social-locker-text .ui-social-locker-strong:after{margin-left:10px}
.ui-social-locker-dandyish .ui-social-locker-buttons{margin:0;padding:5px}
.ui-social-locker-dandyish .ui-social-locker-button{border-radius:7px;background-color:rgba(255,255,255,1);-moz-box-shadow:0 1px 3px rgba(0,0,0,0.15);-webkit-box-shadow:0 3px 1px rgba(0,0,0,0.15);box-shadow:0 1px 3px rgba(0,0,0,0.15)}
.ui-social-locker-dandyish .ui-social-locker-button .fb-like iframe{height:61px!important}
.ui-social-locker-dandyish .ui-social-locker-button+.ui-social-locker-button{margin-left:15px}
.ui-social-locker-dandyish .ui-social-locker-button-inner-wrap{width:85px;height:84px;padding:10px;text-align:center}
.ui-social-locker-dandyish .ui-social-locker-cross{top:20px;right:20px}
.ui-social-locker-dandyish .ui-social-locker-timer{right:20px;bottom:20px}
.ui-social-locker-glass{padding:15px;border:0;-moz-box-shadow:0 1px 1px rgba(255,255,255,0.7),inset 0 1px 1px rgba(0,0,0,0.1);-webkit-box-shadow:0 1px 1px rgba(255,255,255,0.7),inset 0 1px 1px rgba(0,0,0,0.1);box-shadow:0 1px 1px rgba(255,255,255,0.7),inset 0 1px 1px rgba(0,0,0,0.1);-webkit-border-radius:15px;-moz-border-radius:15px;border-radius:15px;text-shadow:0 1px 1px #fff;background:rgba(0,0,0,0.03)}
.ui-social-locker-glass .ui-social-locker-outer-wrap{padding:30px;-webkit-border-radius:11px;-moz-border-radius:11px;border-radius:11px;-webkit-shadow:0 1px 5px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.7);-moz-box-shadow:0 1px 5px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.7);box-shadow:0 1px 5px rgba(0,0,0,0.25),inset 0 1px 1px rgba(255,255,255,0.7);background:#f7f7f7;background:-moz-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,0.5)),color-stop(100%,rgba(240,240,240,0.5)));background:-webkit-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:-o-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:-ms-linear-gradient(top,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%);background:linear-gradient(to bottom,rgba(255,255,255,0.5) 0,rgba(240,240,240,0.5) 100%)}
.ui-social-locker-glass .ui-social-locker-text .ui-social-locker-strong:before,.ui-social-locker-glass .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/AVvXsEidphRqIEU2kXxDguiIRuNh3HzHpr2id5vQA8twlPtANzg4ggl9vjTgPAgkHrpw6Kl6Bq57QUSOubyq29yWI5uS4LibsuWW-HVz2gtuBAQRuHp1kA4pKDrKBZQIaMXbofo5oHUfkusFyz0/s1600/lock-icon.png") 0 2px no-repeat}
.ui-social-locker-glass .ui-social-locker-button{-moz-border-radius:7px;-webkit-border-radius:7px;border-radius:7px;-webkit-box-shadow:inset 0 0 4px rgba(0,0,0,0.12),0px 1px 1px rgba(255,255,255,0.7);-moz-box-shadow:inset 0 0 4px rgba(0,0,0,0.12),0px 1px 1px rgba(255,255,255,0.7);box-shadow:inset 0 0 4px rgba(0,0,0,0.12),0px 1px 1px rgba(255,255,255,0.7)}
.ui-social-locker-glass .ui-social-locker-cross{top:20px;right:20px}
.ui-social-locker-glass .ui-social-locker-timer{right:23px;bottom:21px}
#built-in-themes .title{font-style:normal;padding-bottom:0;margin-bottom:0;margin-top:25px}
#built-in-themes .title:first-child{margin-top:0}
#built-in-themes .example{padding:0 0 0 16px}
#built-in-themes .pattern-background{background:url("http://onepress-media.com/storage/demo/social-locker-for-wordpress/img/preview-bg.png");padding:25px 25px 10px 25px;box-shadow:inset 0 0 30px #fff}
.my-custom-style{padding:30px 20px 20px 220px;height:200px;background:#f8f8f8 url("http://onepress-media.com/storage/demo/social-locker-for-wordpress/img/lock-example.png") 20px 20px no-repeat}
.my-custom-style .ui-social-locker-text{text-align:left}
.my-custom-style .ui-social-locker-buttons{padding:0;text-align:left}
.my-custom-style .ui-social-locker-button{width:100px}
#mblunlocker{text-align:center;font-family:Arial,serif;text-transform:uppercase;font-weight:bold;font-size:12px;position:relative}

Bước 3. Lưu mẫu (lưu chủ đề).
Cách sử dụng khi đăng bài

<article id="default-usage">
<div class="to-lock" style="display: none;">
<div style="text-align: center; margin-bottom: 20px;">
NỘI DUNG ẨN CÁC BẠN VIẾT TẠI ĐÂY
</div>
</div></article><div id="mblunlocker"> </div>
<script type="text/javascript" src="https://dl.dropboxusercontent.com/u/66256041/JQuery/namkna-blogspot-com/Locklike.js"></script>
<script>
jQuery(document).ready(function ($) {
$("#default-usage .to-lock").socialLock({
text: {
header: "Nội Dung Đã Được Khóa",
message: "Hãy like - theo dõi - +1 để xem nội dung khóa."
},
style: "ui-social-locker-secrets",
buttons: {
order: ["twitter", "facebook", "google"]
},
// twitter options
twitter: {
url: "http://twitter.com/bacsiwindows",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/bacsiwindowsdotcom",
appId: "131761626979828"
},
google: {
url: "http://www.bacsiwindows.com/"
}
});
});;;;
</script>

Chỉnh sửa

Thay http://twitter.com/bacsiwindows thành URL trang Twitter của bạn.
Thay https://www.facebook.com/bacsiwindowsdotcom thành URL trang Facebook của bạn.
Thay http://www.bacsiwindows.com/ thành URL trang chủ của bạn.
Thay 131761626979828 thành ID App Facebook của bạn.

Theo Terocket.com

Thủ thuật ẩn nội dung buộc người dùng phải Like mới được xem

Cách thực hiện

Chỉnh sửa

0 nhận xét trong bài "Thủ thuật ẩn nội dung buộc người dùng phải Like mới được xem"

Đăng nhận xét