1BANNER 123
4.9/5 - (171 bình chọn)

Dạo gần đây thấy anh em SEO thích sử dụng các button hiển thị số giây đếm ngược nên mình quyết định share cho anh em 1 đoạn code nho nhỏ có để có thể thực hiện được việc này nhé.

Để xem được DEMO thì các bạn xem tại đây nhé: https://pttuan410.com/demo/

Comp 1
Comp 1

Các bạn copy và dán đoạn code sau vào file functions.php giúp mình nhé.

Copy function vào đây.
function btn_dowload(){
	ob_start();?>
	<div class="box-get">
		<div class="box-get-coupon btn-red-pt box-coupon text-center" post-id="<?php echo get_the_ID();?>">
			<span>Bấm vào đây để lấy mã giảm giá</span>
		</div>
	</div>
<script type="text/javascript">
	jQuery(document).ready(function(){
		jQuery('.box-get-coupon.box-coupon').click(function(){
			jQuery('.box-get-coupon').removeClass('btn-red-pt');
			jQuery('.box-get-coupon').off('click');
			var n=5; //thời gian 5s
			setInterval(function(){
				n--; if(n>0){
					jQuery('.box-get-coupon').html('Mã sẽ hiển thị sau: ' + n + ' giây ');
				}
				if(n==0){
					jQuery('.box-get-coupon').html('<div>Mã của bạn là 123</div>');
				}
			},1000);
		});
	}); </script>
<?php
	$content = ob_get_contents();
	ob_end_clean();
	return $content;
}
add_shortcode('btn_dowload','btn_dowload');

Sau đó các bạn dán đoạn shortcode vào chỗ mún hiển thị là được

[btn_dowload]

Các bạn thêm 1 đoạn mã css này nữa cho đẹp mắt nhé.

/*download*/
body .btn-red-pt{
	background: #fa5656;
	color: #FFF;
	display: inline-flex;
}
.box-get{
	text-align:center;
}
.box-get-coupon:hover {
    background: #fa5656;
    color: #FFF;
}
.box-get-coupon{
	background: #FFF;
    padding: 12px 20px;
    cursor: pointer;
    font-weight: bold;
    font-size: 15px;
    border: 2px dashed #fa5656;
    border-radius: 5px;
    -webkit-transition: ease all .4s;
    -o-transition: ease all .4s;
    transition: ease all .4s;
}
/*download*/

Chúc các bạn thành công.

Nhân tiện đây mình xin giới thiệu 1 plugin mà mình đã phát triển dựa trên đoạn code trên nhé.

Demo các bạn có thể xem tại đây: https://pttuan410.com/demo/

Plugin Dem Nguoc Lay Ma
Plugin đếm ngược lấy mã

Plugin này sẽ giúp các bạn có thể đặt pass cho từng bài viết cụ thể, tùy biến nội dung hiển thị, số giây hiển thị 1 cách trực quan.

Ngoài ra thì các đoạn mã trong plugin này chỉ hiển thị khi thời gian đếm kết thúc, chứ không thể viewsource để lấy mã trước được.

Bạn nào quan tâm thì inbox mình nhé. facebook mình: https://www.facebook.com/pttuan410/

One thought on “Cách hiển thị đếm ngược cho 1 button wordpress

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *