Hướng dẫn cách tạo nút bấm chèn mã coupon giống như canhme

Chào mừng các bạn trở lại langthangweb chấm com! Là 1 blogger, hẳn các bạn đã quá quen thuộc với canhme.com đúng không nào? Và Vũ chắc 1 điều là không ít bạn rất thích thú với cái nút bấm có chèn mã coupon của trang này. Đại loại như vầy:

giao dien nut bam canhme

bang pop up chen coupon cua canh me

Rất chi là chuyên nghiệp và rất kích thích đúng không nào? Đừng lo lắng, bạn sẽ làm được y như vậy sau khi  đọc xong bài hướng dẫn này. Đến với langthangweb thì không có gì là bí mật cả!

Đã có 1 số bài viết hướng dẫn về cách làm cái nút này trên mạng, Vũ đã làm  theo y như vậy và kết quả là không thành công. Có lẽ do những  bài hướng dẫn này đã lâu và wordpress đã có 1 số cập nhât mới, do đó plug in trong hướng dẫn không tương thích.

Tuy nhiên với bản tính cứng đầu cố hữu, tôi đã cố gắng mài mò cộng với chút may mắn thì cuối cùng lại ra được bài viết này:)

Vũ sẽ làm trực tiếp cái nút trên bài hướng dẫn này luôn để làm ví dụ minh họa. Nó bao gồm 2  bước chính: cài plug in và cài đặt nút bấm.

Cài plug in Shortcodes Ultimate

Bạn chỉ cần gõ đúng tên plug in Shortcodes Ultimate này rồi cài đặt. Việc cài đặt khá đơn giản nên tôi sẽ không nói chi tiết ở đây.

Cũng nói thêm, đây là 1 plug in rất đa dụng, không chỉ chèn cái nút bấm có coupon code như hướng dẫn này mà nó còn làm được nhiều thứ hay ho khác nữa. Vũ nghĩ đây là 1 plug in nên được cài đặt cho 1 blogger chuyên nghiệp, các bạn có thể từ từ tìm hiểu những tính năng khác của nó nếu có thời gian. Rất hay ho đấy.

Cũng xin được nói thêm là plug in này được đánh giá 5 sao, và tương thích với phiên bản wordpress hiện tại.

danh gia plug in shortcode ultimate

Đối với 1 số hướng dẫn trên mạng khác,  có yêu cầu cài plugin My shortcode. Tuy nhiên, plug in này đã không được cập nhật cách đây hơn 2 năm, và nó có thể gây lỗi do không tương thích. Do đó, Vũ khuyên các bạn không nên cài những plug in như vậy. Chỉ cài những cái nào được cập nhật gần đây, được đánh giá cao và tương thích với WordPress mà thôi.

plugin my shortcode da hon 2 nam khong update

Ok, bạn đã cài xong rồi chưa? Tiếp nhé.

Cấu hình nút bấm có chèn coupon code

Bạn tạo post mới, xong bấm vào “Insert shortcode”. Ở đây sẽ có rất nhiều option cho bạn chọn.

Để tìm nút, các bạn gõ “button” vào thanh search.

chen tạo nut bam vào postcách tìm nút bấm

Bấm vào nút button, nó sẽ hiện ra khung cài đăt thông số cho nút. Tôi sẽ liệt kê ý nghĩa từng thông số một.

hướng dẫn cấu hình nút bấm

  • Link: là cái link affiliate của bạn (trong trường hợp này của tôi là Namesilo)
  • Target: bạn muốn nó mở ra tab mới hay không.
  • Style: kiểu nút bấm. Có rất nhiều kiểu ở đây, tôi chọn flat là dạng đơn giản nhất

hướng dẫn cấu hình nút bấm

  • Background: màu nền của nút. Tôi chọn màu xanh sao cho giống giống canhme
  • Text color: màu văn bản chữ trong nút, chọn chữ màu trắng
  • Size: kích cỡ nút, tạm thời để vậy, mình có thể điều chỉnh sau cũng được
  • Fluid: bạn có muốn chiều ngang của nút hết màn hình không? Nếu không, chọn No

hướng dẫn cấu hình nút bấm

  • Centered:  bạn muốn nút nằm ở giữa màn hình không? Nếu không, chọn No
  • Radius: đây là nút chỉnh bo cạnh 4 góc của nút. Để đơn giản, tôi chọn Square
  • Icon: bạn muốn hiển thị icon gì trước văn bản trong nút? (thường được chèn với biểu tượng download). Tôi không chọn icon.
  • Icon color: do không chọn icon nên bỏ qua

hướng dẫn cấu hình nút bấm

  • Text Shadow: chọn hiệu ứng cho văn bản. Không cần màu mè nên bỏ qua
  • Description: bạn muốn mô tả gì cho nút bấm? Tôi không chọn vì tiêu đề nó khá rõ rồi.
  • onClick: mấu chốt của bài toán là đây! Tôi đã từng rất đau đầu với 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. Nôm na nó là một mã Javascript yêu cầu hành động khi bấm nút.

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

Trong trường hợp của tôi, tôi nhập: s=prompt(‘Copy và sử dụng coupon bên dưới khi thanh toán: ‘,’CHEAPMORE’)

hướng dẫn cấu hình nút bấm

  • Rel attribute: do là link affiliate, nên tôi chọn nofollow. Chọn như vậy để thằng google nó không mò tới, tốt cho SEO 🙂
  • 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.
  • Class: đây là phần tùy chỉnh nâng cao trang trí. Tôi để trống, tại chưa biết css nó cụ thể như thế nào, nên không cho vào

hướng dẫn cấu hình nút bấm

  • Content: đây là nội dung văn bản hiển thị trong nút
  • Preview: sau cùng là xem lại mặt mũi cái nút nó như thế nào. Nếu thấy đẹp trai rồi thì bạn nhấn insert shortcode.

Thế là xong! Và sau là thành quả của tôi. Các bạn có thể bấm vào thử xem thế nào:)

Tên miền .COM chỉ 4.99$/năm

Lời kết

Tôi hy vọng sau bài hướng dẫn chi tiết này, có bạn có thể dễ dàng làm được nút bấm y hệt như canhme (và y như tôi hoặc đẹp hơn tôi, vì khiếu thẩm mỹ của tôi không tốt lắm).

Làm 1 bài hướng dẫn quá chi tiết và hữu ích nên…sẵn tiện đây nói luôn là hiện Namsilo đang có chương trình khuyến mãi giảm giá tên miền .com chỉ còn 4.99$/năm. Đây là cơ hội rất tốt để các bạn sở hữu một tên miền giá rẻ ở 1 dịch vụ tốt như vậy. Bạn nào mà bấm vào nút test Vũ làm ở trên nếu thấy OK thì mua dùm Vũ nhé:) it’s up to you.

Bạn được giảm giá, bạn không mất gì, Vũ lại được có 1 khoản hoa hồng nho nhỏ để duy trì blog, win-win solution.

Nếu bạn thấy bài viết hữu ích thì hãy bấm LikeShare để chia sẻ kiến thức hữu ích này đến với mọi người nhé! Cảm ơn các bạn đã dành thời gian đọc hết bài viết.

3 bình luận

  1. vnchiase 13/07/2017
  2. Lê Huy 11/08/2017
    • Vũ Trần 11/08/2017

Bình luận của bạn