Cách tạo nút bấm chèn mã giảm giá giống kênh WP

Like và share giúp mình phát triển website nhé.
  •  
  •  
Trong các bài viết về mã giảm giá của mình như:  Mã giảm giá StableHost hay Mã giảm giá Hawk Host hay trong một số blog nổi tiếng về chia sẻ mã giảm giá khác các bạn có thể thấy nút lấy mã giảm giá rất đơn giản nhưng chuyên nghiệp, khi nhấn vào nút coupon này thì có một lời nhắc hiện ra trên một cửa sổ nhỏ ” Copy và sử dụng coupon bên dưới khi thanh toán” cùng với mã giảm giá bên dưới đã được bôi đen bạn chỉ cần nhấn Ctrl + C để sao chép sau đó nhấn OK để vào trang mua hàng, khi yêu cầu nhập coupon bạn chỉ cần nhấn Ctrl + V để dán coupon vào.
Bài viết này sẽ hướng dẫn các bạn làm những nút bấm chèn mã giảm giá giống hệt kênh WP như sau

[su_button url=”https://my.hawkhost.com/aff.php?aff=10606″ target=”blank” background=”#23794a” size=”4″ onclick=”s=prompt(‘Copy và sử dụng coupon bên dưới khi thanh toán: ‘,’bfshared2017r’)” rel=”nofollow” title=”Giảm giá 55% trọn đời”]Hawkhost giảm giá 55% trọn đời [/su_button]  – Dùng lâu dài rất có lợi

Sau khi người dùng bấm nút sẽ hiện ra như sau:

Những Plugin nào giúp ta làm được nút bấm có chèn mã giảm giá

Đó là những Plugin cho phép chèn shortcode và hỗ trợ Javascript, bạn có thể dễ dàng tìm những Plugin này bằng cách nhập từ khóa shortcode khi tìm Plugin. Tuy nhiên không phải Plugin nào cũng hỗ trợ chèn Javascript cả mình xin giới thiệu Plugin  shortcode ultimate một Plugin hết sức nổi tiếng hiện được 700.000+ người tin dùng

 Cài đặt shortcode ultimate

Bạn vào phần cài đặt Plugin nhập từ khóa: Shortcodes Ultimate sau đó cài đặt và kích hoạt

Theo mình thấy thì Plugin  shortcode ultimate luôn được cập nhật nên tương thích rất tốt với phiên bản WordPress hiện tại, có một số bài viết trên mạng được viết từ rất lâu nên hướng dẫn sử dụng các Plugin khác và hiện những Plugin này không còn được cập nhật nữa, bạn không nên cài chúng vì có thể sẽ không tương thích với phiên bản WordPress hiện tại và có thể gây ra lỗi.

Cách tạo nút chèn mã giảm giá với shortcode ultimate

Bước 1: Nhấn Insert shortcode trong màn hình soạn thảo bài viết

Bước 2: Chọn thẻ Content -> Button

Bước 3: Cài đặt cho Button

  • Link: là cái link affiliate của bạn (ở đây mình có link affiliate Hawkhost)
  • Target: Nên chọn là: Open in new tab (mở ra ở tab mới)
  • Style: kiểu nút bấm. Có rất nhiều kiểu, bạn có thể để Default (mặc định)

  • Background: Chọn màu nền cho nút nhấn.
  • Text color: màu văn bản chữ trong nút, bạn nên chọn màu tương phản với nút nhấn
  • Size: Kéo để chỉnh kích cỡ nút.
  • Fluid: Yes- chiều ngang của nút hết màn hình không còn  No – chiều ngang vừa đủ chữ

  • Centered:  Căn giữa màn hình
  • Radius:  chỉnh bo cạnh 4 góc của nút. Để đơn giản, tôi chọn Square
  • Icon: Chọn icon hiển thị trước văn bản trong nút – mình không chọn
  • Icon color: Màu của icon, nếu không chọn icon thì bỏ qua

  • Text Shadow: chọn hiệu ứng cho văn bản – mình thích đơn giản nên cho qua
  • Description: Mô tả gì cho nút bấm – có thể bỏ qua
  • onClick: Đây chính là nơi để chèn mã Javascript, lợi hại là ở đây nếu không có phần này thì nút bấm quá bình thường rồi phải không các bạn

Bạn muốn khi bấm vào cái nút thì nó hiển thị ở góc trên màn hình thông báo hãy copy mã coupon thì hãy nhập vào cái này.

Cú pháp mã này là: s=prompt(‘Văn bản yêu cầu hành động của bạn ‘,’Mã giảm giá’)

Ở đây mình nhập: s=prompt(‘Copy và sử dụng coupon bên dưới khi thanh toán: ‘,’Mã giảm giá’)

  • Rel attribute: do là link affiliate, nên tôi chọn nofollow.
  • Tittle attritute: đây là cái đoạn text sẽ hiện lên khi bạn rà chuột vào nút bấm – có thể bỏ qua
  • Class: không hiểu nên bỏ qua

  • Content: nội dung văn bản hiển thị trong nút
  • Preview: Xem trước kết quả

Nếu ưng ý bạn nhấn Insert shortcode để chèn vào bài viết ta sẽ có thành quả như sau:

[su_button url=”https://my.hawkhost.com/aff.php?aff=10606″ target=”blank” background=”#23794a” size=”4″ onclick=”s=prompt(‘Copy và sử dụng coupon bên dưới khi thanh toán: ‘,’bfshared2017r’)” rel=”nofollow” title=”Giảm giá 55% trọn đời”]Hawkhost giảm giá 55% trọn đời [/su_button]  – Mã giảm giá vẫn còn hiệu lực quá ngon rồi các bạn bấm vào để nhận mã giảm giá và mua ngay nào

Vậy là bạn đã biết cách chèn những nút bấm hết sức chuyên nghiệp mà không cần phải cài đặt các Plugin Coupon rồi nhé, chúc các bạn thành công!

 

 

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 *