Code like mạng xã hội để xem nội dung được ẩn cho blogspot

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 đó, namkna 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

Và để xem nội dung của bài viết bạn hãy click một trong số các button ở demo bên dưới nhé.

☼ Bước 1: Cài đặt  Social Content Locker trong Template của BlogSpot:

1.1- Đăng nhập vào Blog

1.2- Vào Mẫu (Template) => Chỉnh sửa HTML

1.3. Dán đoạn code bên dưới vào trước thẻ ]]></b:skin>:

/* --- Social Content Locker For Blogger http://blogchubang.blogspot.com/ --- */
.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/AVvXsEheQWAtP9QxipvkQmc0BaQZMOesUdvlZ5A-dQra7cb59l7FwCi5ZmWbr0cxz7aJS_c-U1J6ca1oBGIypakEem83orZqw5z-fA-1ihoH2C43TEF_maEuGJt1w8nxT6DyfkNs4riuxSE2-8g/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/AVvXsEjEFnkplI8GTsSQQUCdQXnPh6RqkOXxK5XiCcwWqRhNyZ2xNlDZoIJ-i58BnKhFVhPfv8cStzhuxBGylxQY3knVp80CsvawkpyefQnMc3lrPSubO24OyKhpS75OCs7xwwOH_XwHPXK8qwo/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/AVvXsEjSbsMKSUw1su0_DCAIbhb0wDp94958GoD2EoJ_Y5x1sn3RnOv_7uBpLauMuEo7xVq07Yu3Sftzbfy7JU6lCJFVWTLrv9H7ltaf-LepLekup4YZbo10qdVZmlW6Lez3kh1NIBY8LxNUtBg/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/AVvXsEh6hd5hrOtXG1rkng-hzTNCBgYqrQx0UsN3hB65JrYlRg7Lj9_RQA1Q_NyreSo3LPZkgFJC92sftqa0GyZ7WpwYzy_RvZivRzJNiXcS-YcT-5oZBjoSKpNVsui1CPll1gynnNKYCgkfWxU/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/AVvXsEif1RFCS1EoF2AdzDbdZLrmKJbzwILA9VaaOxmVWqp0ePYE5B6q9aL1H8WGPcl3GJByWct4b1afVuEJnwjt6seozrmAXMti9XBit0aCvMM2fCN8XiLm8xSbapkvEgVKktJAUcdOpZd21n8/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/AVvXsEjEFnkplI8GTsSQQUCdQXnPh6RqkOXxK5XiCcwWqRhNyZ2xNlDZoIJ-i58BnKhFVhPfv8cStzhuxBGylxQY3knVp80CsvawkpyefQnMc3lrPSubO24OyKhpS75OCs7xwwOH_XwHPXK8qwo/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/AVvXsEjEFnkplI8GTsSQQUCdQXnPh6RqkOXxK5XiCcwWqRhNyZ2xNlDZoIJ-i58BnKhFVhPfv8cStzhuxBGylxQY3knVp80CsvawkpyefQnMc3lrPSubO24OyKhpS75OCs7xwwOH_XwHPXK8qwo/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}

1.4- Lưu lại là xong bước này:

☼ Bước 2: Sử dụng khi viết bài.

Bây giờ bất cứ khi nào muốn một người xem một nội dung trong bài viết cụ thể của bạn thông qua mạng xã hội, bạn có thể làm theo các hướng dẫn sau đây. (Ghi nhớ: các bước tương tự cũng có thể được sử dụng trên khu vực tiện ích và thậm chí trong một mẫu).

2.1- Về Blogger.com

2.2- Chọn đăng bài mới.

2.3- Chọn Tab HTML từ trình biên tập bài blogger và dán mã sau đây. 

<article id="default-usage">
<div class="to-lock" style="display: none;">
<div style="text-align: center; margin-bottom: 20px;">
<!--Hidden Content Starts (You can Use HTML BELOW)-->
NỘI DUNG ẨN CÁC BẠN VIẾT TẠI ĐÂY
<!--Hidden Content Ends (You can Use HTML ABOVE)-->
</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/chubangmonkey",
text: "Upgrade your social buttons to get more social traffic!"
},
// facebook options
facebook: {
url: "https://www.facebook.com/chubangaiti",
appId: "1139112609479322"
},
google: {
url: "http://chubangaiti.blogspot.com/"
}
});
});;;;
</script>

☼ Tùy chỉnh:

• Thay http://twitter.com/chubangmonkey thành URL trang twitter của bạn.
• Thay https://www.facebook.com/chubangaiti thành URL trang cá nhân hoặc fanpage của bạn.
• Thay http://chubangaiti.blogspot.com/ thành URL trang web hoặc bài viết của bạn. Lưu ý là nếu để URL trang web thì nó sẽ hiển thị tổng số lần +1 của trang. Còn URL bài viết thì chỉ hiện số lần +1 của bài viết.
• Thay NỘI DUNG ẨN CÁC BẠN VIẾT TẠI ĐÂY thành nội dung bạn muốn ẩn.
• Thay 1139112609479322 thành App ID facebook của bạn. 

Chúc Các Bạn Thành Công !