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)
Như đã giới thiệu ở bài trước thì có 2 đoạn jQuery giúp giải quyết vấn đề này được bán trên themeforest đó là Like 2 Unlock với giá 8$ và Social Locker với giá 18$. Theo mình thì nếu có điều kiện thì nên mua vì nó có nhiều tính năng hơn bạn có thể xem qua ở đây, và cái mà mình chia sẻ ở bài viết này là một phiên bản cũ của cái Social Locker đó.
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.
Hiện nội dung ẩn khi Like +1 và Tweet cho Blogger
Đầu tiên thì hãy chèn đoạn mã nhúng css sau lên trên thẻ </head>
<link href="https://googledrive.com/host/0B04m_ldP5JJzcHh5LW9iQ2Y5RDA/sociallocker.css" rel="stylesheet" type="text/css"></link>
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="text-align: center; margin-bottom: 20px;">
<!--Khu vực nội dung ẩn-->
NỘI DUNG CẦN ẨN
<!--Kết thúc khu vực ẩn-->
</div></div>
</article>
<div id="kslunlocker"> </div>
<script type="text/javascript" src="https://googledrive.com/host/0B04m_ldP5JJzcHh5LW9iQ2Y5RDA/sociallocker.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/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>
thì 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
sau đó bạn có thể up lại lên Google Drive của bạn qua hướng dẫn tại bài viết sau đây
và đặt lại vào thay thể link của ở 2 đoạn mã trên.
0 nhận xét:
Đăng nhận xét