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)

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

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>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.js'/>
<link href="https://googledrive.com/host/0B04m_ldP5JJzcHh5LW9iQ2Y5RDA/sociallocker.css" rel="stylesheet" type="text/css"></link>
<script type="text/javascript" src="https://googledrive.com/host/0B04m_ldP5JJzcHh5LW9iQ2Y5RDA/sociallocker.js"></script>
nếu blog đã có mã nhúng jQuery rồi thì bỏ dòng đầu tiên đi nhé.

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>
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://kslzone.blogspot.com"
}
});
});;;;
</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
https://drive.google.com/#folders/0B04m_ldP5JJzcHh5LW9iQ2Y5RDA
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.

Lời kết

Đối với cái plugins bằng jQuery này thì có thể là bạn có thể kiểm được thêm nhiều Like, +1, Tweet cho trang website của bạn, và có thể chúng sẻ giúp bạn có thêm lưu lượng truy cập tại các mạng xã hội đó. Đối với mình, riêng ý kiến cá nhân của mình nhé thì mình luôn muốn những thứ đó đến một cách tự nhiên. Nếu nội dung của mình thực sự tốt hãy Like, +1, Tweet để ủng hộ còn nếu không thì mọi người có thể bỏ qua.

P/S: Chúc các bạn ngày càng kiếm được nhiều khách truy cập từ tiện ích này nhé.

17 bình luận

  1. avatar says

    lúc 19:20 23 tháng 8, 2014

    Lưu trên host google drive có vẻ không ổn lắm. Mình đã từng đọc ở đâu đó rằng drive có thể không load trong 1 số trường hợp. K biết có đúng k nhi!?

  2. avatar says

    lúc 19:26 23 tháng 8, 2014

    Cá nhân mình xài thì trước giờ trong khoảng thời gian mà mình lưu trữ trên drive tới giờ thì chưa gặp tình trang không load được bao giở cả.

    Hiện dịch vụ nào cũng có lúc bị lỗi cả, từ hosting domain, nhưng khoảng thời gian khắc phục sự có với Google thì mình nghĩ khá là nhanh nên cũng chẳng phải lo lắng.

  3. avatar says

    lúc 16:36 26 tháng 8, 2014

    Vậy chắc mình cũng chuyển qua dùng drive xem sao. Trước giờ hay dùng dropbox, nếu bạn đã trải nghiệm rồi thì mình cũng an tâm chút! Thanks.

  4. avatar says

    lúc 11:51 13 tháng 11, 2014

    Cái này ngon hơn cái trước và nhìn chuyên nghiệp không thua gì sử dụng Plugin bên WP. Lâm giỏi hé.

  5. avatar says

    lúc 12:23 13 tháng 11, 2014

    Cái script này người ta bán mà, chỉ tận dụng mang về Blogger thôi kaka :D

  6. avatar says

    lúc 15:50 13 tháng 2, 2015

    admin ơi ẩn nội dung theo thời gian thì làm cách nào vậy giúp mình nha.thanks!

  7. avatar says

    lúc 21:40 20 tháng 2, 2015

    Mình nhớ là có để lục lại mần thử xem sao chứ giờ không chắc nữa :D

  8. avatar says

    lúc 21:48 26 tháng 5, 2015

    Lâm ơi, sao anh áp dụng mà nó chẳng hiện ra gì cả.

  9. avatar says

    lúc 10:40 27 tháng 5, 2015

    Code này có vấn đề rồi, tớ cũng từng thử nhưng không được, hay bị lỗi và xung đột với code sẵn có trong template của mình.

  10. avatar says

    lúc 12:40 27 tháng 5, 2015

    Để em kiểm tra lại xem sao.

  11. avatar says

    lúc 12:40 27 tháng 5, 2015

    Để kiểm tra lại cho chắc :D

  12. avatar says

    lúc 12:44 27 tháng 5, 2015

    Test thử lại nha anh mang cái script lên trên thẻ head là nó chạy =.=, à mà nhớ blog phải có jquery nhé http://kslhoidap.blogspot.com/2015/05/bai-viet-voi-noi-dung-an.html

  13. avatar says

    lúc 12:47 27 tháng 5, 2015

    Cám ơn em nhé. Tối về anh thử lại xem sao.

  14. avatar says

    lúc 12:26 6 tháng 1, 2016

    Lâm Kiều ơi giúp mình với, mình đang cần code ẩn nội dung này mà làm theo bài hướng dẫn của bạn vẫn không hiện được nút like facebook. Bạn giúp mình được không? Thanks bạn nhiều

  15. avatar says

    lúc 18:58 9 tháng 1, 2016

    thank bạn, làm mãi giờ mới được... cam ơn bạn rất nhiều

  16. avatar says

    lúc 11:36 11 tháng 1, 2016

    Bạn để lại cho mình link demo nhé.

  17. avatar says

    lúc 18:55 14 tháng 1, 2016

    không còn hoạt động được bác nhé đã test trên 2 web xài template khác nhau đều ko dk

Mọi nhận xét trên blog KslZone.NET sẽ được kiểm duyệt trước khi được xuất bản trên blog. Lưu ý: Nếu bạn để lại backlink về website của bạn, miễn là kèm theo nhận xét hợp lý thì nhận xét đó vẫn sẽ được chấp nhận. Nếu bạn muốn hiện mã HTML thì bạn cần chuyển đổi trước bằng công cụ phía dưới.