• Home
  • Ẩn link download, nội dung chính trong bài viết blogspot để nhận like và +1

Ẩn link download, nội dung chính trong bài viết blogspot để nhận like và +1

Mạng xã hội
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.

 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)
Đâ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(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 dunglink blogID 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







Categories

Recent News

[latest][5][recentright]

Toggle Content

Anext Introduction
Anext is a super flexible Theme with a modern backend that makes it incredible easy to build unique layouts by simply dragging and dropping your content into place
Layout Builder with dozens of easy to use elements
Just change the contents and everything done in minutes
Content Importer, to easily setup your site
With one click you get a site very similar to the theme demo.
Many layout styles
Lots of beautiful interactive elements like slideshows, galleries, tabs, toggles that help you showcase your best work
Responsive Layout and High Resolution Display
Works beautiful on modern high resolution displays: Smarthpones, iPads, Retina MacBooks, etc