[Blogspot] - Hiện nội dung ẩn khi Like +1 và Tweet cho Blogger

Về cái vụ ẩn nội dung sau đó bắt người dùng like +1 và Tweet để hiện nội nó lên, thì ở bài viết trước mình đã có một bài chia sẻ một đoạn code nho nhỏ được viết bằng jQuery để thực hiện vấn đề này nhưng tương đối là thô sơ, và mình cũng nói là minh sẽ chia sẻ một cái tốt hơn ở bài viết sau (bài này)

Cái này thì cũng được nhiều người chia sẻ rồi nên cái này gọi là chia sẻ lại thôi, do đó có thể có nhiều bạn cũng sẽ không quan tâm cho lắm.

Đầu tiên thì hãy chèn đoạn mã nhúng css sau lên trên thẻ </head>

<link href='https://sites.google.com/site/class12tn2/sociallocker.css' rel='stylesheet' type='text/css'/>

Bây giờ sau khi chèn xong thì khi đăng bài viết mới, hãy chuyển sang soạn thảo bằng HTML và đặt đoạn mã sau vào vị trí của nội dung bạn muốn ẩn để bắt người dùng Like, +1, Tweet.

<article id="default-usage">

<div class="to-lock" style="display: none;">

<div style="margin-bottom: 20px; text-align: center;">

<!--Khu vực nội dung ẩn-->

NỘI DUNG CẦN ẨN

<!--Kết thúc khu vực ẩn-->

</div>

</div>

</article>

<br />

<div id="kslunlocker">

</div>

<script src="https://sites.google.com/site/class12tn2/sociallocker.js" type="text/javascript"></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/kieusonlam",

text: "Upgrade your social buttons to get more social traffic!"

},

// facebook options

facebook: {

url: "https://www.facebook.com/KslZone",

appId: "131761626979828"

},

google: {

url: "http://www.kslzone.net"

}

});

});;;;

</script>

Bạn để ý thì mình để 2 file js và css tại Google Drive, để phòng trường hợp đôi khi mình không còn khả năng lưu trữ 2 bọn nó trên tài khoản của mình nữa thì bạn có thể tải bọn nó xuống tại địa chỉ này
Download:

https://sites.google.com/site/class12tn2/sociallocker.csshttps://sites.google.com/site/class12tn2/sociallocker.js