Hiện nội dung ẩn sau thời gian chờ với Javascript và Cookies

Đây là thủ thuật sử dụng Javascript bắt người ta chờ một khoảng thời gian kể từ sau khi người dùng bấm vào nút "Hiện". Thế thủ thuật này giúp ích được gì? Mình cũng tiện giới thiệu thêm luôn nếu những ai biết về SEO rồi thì bỏ qua nhé, thời gian mà người dùng có trên site của chúng ta có ảnh hướng đến SEO. Chính vì thế mà hiện tại bạn có thể thấy rất nhiều những trang web đặc biệt là báo mạng như gian thưởng để những clip với chủ đề cực hot trên trang của họ, theo mình mục đích chính của họ là ăn tiền quảng cáo và đương nhiên là câu được cả thời gian on-site của người dùng nữa.

Và hiện tại có khá nhiều tool trên mạng hỗ trợ các SEO mũ đen trao đổi view và thời gian trên trang với nhau nhằm giúp gia tăng thứ hạng từ khóa có trên trang đó. Theo kinh nghiệm của mình việc sử dụng tool hoặc những hình thức SEO mũ đen thường làm gia tăng thứ hạng từ khóa khá nhanh, nhưng nó cũng chịu khá nhiều rủi ro với bác Google, đặc biệt là sau những đợt cập nhật thuật toán. Đối với thủ thuật này của mình thì chắc mình cũng tạm có thể nói là mũ hơi đen một tý, mình bắt người ta chờ một khoảng thời gian ngắn để hiện nội dung ẩn. Nhưng mình sử dụng cookie để người dùng chỉ phải chờ một lần đầu tiên theo chu kì sống của cookie đó thôi, như vậy thì nó vừa giúp tăng thời gian on-site và vừa không gây khó chịu cho những khách truy cập đã chờ rồi. Chắc cho các bạn xem demo một cái thử nhỉ.

Thủ thuật hiện nội dung ẩn sau thời gian chờ

Đầu tiên thì vào chỉnh sửa HTML template trên blog của bạn, thêm 1 dòng css nhỏ này lên trên thẻ ]]></b:skin>

#hide { display:none; }

Xong tiếp tục chèn đoạn mã sau đây lên trên thẻ </head>

<script>//<![CDATA[
var count = 10;
var daterm = 30;
function countDown(){
var timer = document.getElementById("timer");
if(count > 0){
count--;
timer.innerHTML = count;
setTimeout("countDown()", 1000);
}else{
document.getElementById("hide").style.display = "block";
}
}
function setCookie(cname,cvalue,exdays) {
var d = new Date();
d.setTime(d.getTime() + (exdays*24*60*60*1000));
var expires = "expires=" + d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname) {
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i];
while (c.charAt(0)==' ') c = c.substring(1);
if (c.indexOf(name) == 0) {
return c.substring(name.length, c.length);
}
}
return "";
}
function checkCookie() {
var temp=getCookie("kslshowhide");
if (temp != "") {
document.getElementById("hide").style.display = "block";
document.getElementById("timer").style.display = "none";
} else {
temp = "yes";
if (temp != "" && temp != null) {
countDown();
setCookie("kslshowhide", temp, daterm);
}
}
}
//]]></script>

trong đó count là thời gian người dùng phải chờ, và daterm là số ngày cookie lưu trữ trong trình duyệt của khách truy cập, xong rồi thì lưu lại. Bước tiếp theo là trong khi viết bài, bạn chuyển sang soạn thảo bằng HTML và sử dụng đoạn mã sau

<button id="timer" onclick="checkCookie()">Hiện</button>
<div id="hide">
NỘI DUNG ẨN
</div>

trong đoạn mã trên rất đơn giản "Hiện" là tên hiển thị của nút và "NỘI DUNG ẨN" là nội dung bạn muốn ẩn với người dùng cho tới khi bấm nút.
Như vậy là đơn giản mình đã hướng dẫn các bạn xong về thủ thuật ép người dùng chờ một khoảng thời gian để xem được nội dung ẩn. Với thủ thuật này thì mình mong rằng nó sẽ giúp được mọi người tăng thêm thời gian người dùng có trên blog của bạn, và có thể một phần nào đó cải thiện SEO trên website giúp tăng lưu lượng truy cập. Mọi thắc mắc về thủ thuật hoặc ý kiến đóng góp thêm cho thủ thuật bạn có thể để lại nhận xét ở dưới.

See the Pen hide content by ducnguyen (@ducrat) on CodePen.

http://www.kslzone.net/2015/03/hien-noi-dung-sau-thoi-gian-cho-Blogger.html