Chủ Nhật, 29 tháng 3, 2015

Hướng dẫn tạo button cho site coupon giống AMCoupon

http://www.alowp.com/plugins/huong-dan-tao-button-cho-site-coupon-giong-amcoupon.html

Khi bạn soạn thảo bài viết, sẽ có những đoạn văn bản mà bạn muốn nó có màu riêng, đóng khung hay hình nền riêng để đưa ra nhận định của bạn, lời khuyên hay khuyến cáo,… Có nhiều plugin giúp bạn làm việc này nhưng mình sẽ khuyên dùng plugin My Shortcodes bởi dùng plugin này bạn sẽ còn dùng được nhiều chức năng khác với nó mà không cài nhiều plugin khác. Mình sẽ lần lượt hướng dẫn cách khai thác plugin này sau, đây là plugin cho phép bạn làm được rất nhiều điều.
Dưới đây là ví dụ của các hộp văn bản mà mình hay dùng để đưa ra đánh giá nên hay không nên hoặc cảnh bảo người đọc.
custom text box với plugin My Shortcodes
Để tạo được những text box như vậy, đầu tiên bạn cần cài plugin có tên My Shortcodes.
Sau khi cài xong, bạn truy cập My Shortcodes và click New element.
my shortcode tip
Tiếp theo, bạn đặt tên cho shortcodes, giả sử mình cần đặt text box màu xanh, mình đặt tên như dưới đây.
green text box tip
Sau đó bạn click xuống tab Attributes và đặt tên label và slug, bạn có thể đặt tên bất kì, ở đây mình đặt là text.
custom text box tips
Tiếp theo click sang tab HTML và dán đoạn code như hình dưới.
html text box green
<div class="greenbox" style="text-align:left; width:;">{{text}}</div>
Bạn lưu ý chỗ mình gạch chân “text” kia chính là tên của Attributes mà bạn đặt ở bước bên trên.
Như vậy mình đã đặt xong shortcode cho text box nhưng đó mới là bước tạo shortcode cho text box, bây giờ việc cần làm là trang trí cho text box màu mè thế nào là theo ý chúng ta.
Các bạn để ý mình đặt class cho green text box này là greenbox nên bây giờ mình cần trang trí cho text box này bằng CSS. Các bạn click sang tab CSS và dán đoạn code sau:
.greenbox { color: #5f9025; background: #ebf6e0; border: 1px solid #b3dc82; display: block; padding: 15px; margin: 10px 0; font-size: 1em; border-radius: 2px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
Sau đó bạn click Save nó lại và Activate nó lên là xong.
Bây giờ khi soạn thảo bạn có thể chèn text vào box bằng cách click bào nút My shortcode trong khung soạn thảo, chọn tên shortcode bạn vừa tạo và nhập đoạn text bạn muốn chèn vào box rồi click Insert shortcode.
myshortscode
Ví dụ
insert shortcode
Nhập text cần chèn vào đây....
Như vậy là xong rồi, để làm các box với màu khác nhau bạn chỉ cần thay đổi màu trong đoạn code CSS ở bên trên. Nhớ đổi cả class và tên từ greenbox sang redbox chẳng hạn nhé!

------------------------------------------------------------
Nếu bạn tạo site hoặc viết bài chia sẻ coupon nhưng lại yêu cầu người đọc phải click vào nút (button) có link affiliate mới lấy được coupon thì có thể sử dụng cách đơn giản sau với plugin My shortcodes. Thực ra không cần dùng plugin này cũng được nhưng nếu bạn đọc các bài viết trong serie về plugin này của mình thì thấy nó làm được rất nhiều việc 1 cách đơn giản, tại sao không dùng nó mà phải tìm 1 plugin khác chỉ làm đúng duy nhất việc ẩn coupon hoặc không dùng plugin thì code rất lằng nhằng.
amcoupon buttons
Dưới đây mình sẽ hướng dẫn cách ẩn coupon đơn giản với plugin My shortcodes (bạn xem bài viết trước đó để xem cách dùng plugin đó nhé).
Bước 1: Khi cài xong, bạn tạo mới 1 element và nhập tên kèm theo slug như hình dưới.
amcoupon button
Bước 2: Bạn click xuống tab Attributes và tạo 3 Attributes như hình dưới
nut an coupon
Trong đó:
  • Mã coupon/code là nơi bạn sẽ nhập coupon sau này
  • linkaff/link là nơi bạn sẽ chèn link affiliate
  • title/title là nơi bạn sẽ chèn text ở button tùy ý
Bước 3: Trang trí cho button
Nếu bạn dùng theme genesis thì không cần làm bước này vì button của genesis cũng khá đẹp rồi, hoặc với theme nào có button đẹp sẵn thì hãy bỏ qua bước này và làm sang bước 4. Mình khuyên bạn nên làm thử ngay bước 4 nếu button đẹp rồi thì thôi còn chưa đẹp hoặc theme chưa trang trí cho button thì bạn hãy làm bước 3 này.
Bạn click xuống tab Libraries và click sang tab Add CSS Library rồi chèn link sau vào:
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css
add css button
Bước 4: Chèn html code cho button
Click sang tab HTML và chèn đoạn code sau vào
html button wordpress
Bạn hãy nhìn lên bước 2 và để ý những đoạn {{link}}, {{code}}, {{title}} chính là slug của Attributes mà bạn đã tạo trước đó.
Nếu bạn làm bước 3 thì chèn code sau:
<input onclick=" window.open('{{link}}'); s=prompt('Sử dụng coupon giảm giá bên dưới khi thanh toán','{{code}}') " type="button" value="{{title}}" class="btn btn-success sourceindex=" 1"="" sourceindex="2">
Nếu bạn dùng theme genesis hoặc không làm bước 3 thì chèn code sau:
<input onclick=" window.open('{{link}}'); s=prompt('Sử dụng coupon giảm giá bên dưới khi thanh toán','{{code}}') " type="button" value="{{title}}">
Bước 5: Lưu lại và activate shortcode lên là xong.
Bây giờ mỗi khi soạn bài bạn có thể click nút My Shortcodes ở bên trên khung soạn thảo, chọn button mà bạn đã tạo vào chèn mã coupon cần thiết kèm theo link là xong!

2 nhận xét:

  1. Mình đã tìm thấy các thông tin cần thiết ở đây, cảm ơn bạn. Mình cũng muốn giới thiệu về một Công ty dịch thuật uy tín - Công ty dịch thuật miền trung - MIDtrans , trụ sở chính chính tại địa chỉ 02 Hoàng Diệu, TP Đồng Hới, tỉnh Quảng Bình có Giấy phép kinh doanh số 3101023866 cấp ngày 9/12/2016 là đơn vị chuyên cung cấp dịch vụ dịch thuật, phiên dịch dành các cá nhân. Hệ thống thương hiệu và các Công ty dịch thuật con trực thuộc: dịch thuật vũng tàu - dịch thuật miền trung tại địa chỉ 110 Trân Hưng Đạo TP Bà Rịa là địa chỉ chuyên cung cấp dịch vụ dịch thuật công chứng tại Bà Rịa, Vũng Tàu ; văn phòng dịch thuật sài gòn 247 , địa chỉ 47 Điện Biên Phủ, Phường Đakao, Quận 1 TP HCM, dịch thuật buôn đăk nông : địa chỉ 100 , Lê lợi, TP đăk nông là nhà cung ứng dịch vụ dịch thuật uy tín hàng đầu tại đăk nông; vietnamese translation : dịch vụ dịch thuật cho người nước ngoài có nhu cầu, giao diện tiếng Anh dễ sử dụng; dịch thuật công chứng bình tân: nhà cung ứng dịch vụ dịch vụ dịch thuật phiên dịch hàng đầu tại Quận bình tân, TP HCM; dịch thuật đà nẵng : Địa chỉ 54 Đinh Tiên Hoàng, Quận Hải Châu, TP Đà Nẵng chuyên cung cấp dịch vụ dịch thuật công chứng, dịch thuật chuyên ngành tại Đà Nẵng; dịch thuật hà nội midtrans : địa chỉ 101 Láng Hạ, Đống Đa, Hà Nội là nhà cung ứng dịch vụ biên dịch, phiên dịch chuyên nghiệp tại địa bàn Hà Nội. Chúng tôi chuyên cung cấp các dịch vụ biên dịch và phiên dịch, dịch thuật công chứng chất lượng cao hơn 50 ngôn ngữ khác nhau như tiếng Anh, Nhật, Hàn, Trung, Pháp, Đức, Nga, Tây Ban Nha, Bồ Đào Nha, Ý, Ba Lan, Phần Lan, Thái Lan, Hà Lan, Rumani, Lào, Campuchia, Philippin, Indonesia, La Tinh, Thụy Điển, Malaysia, Thổ Nhĩ Kỳ..vv... Dịch thuật MIDtrans tự hào với đội ngũ lãnh đạo với niềm đam mê, khát khao vươn tầm cao trong lĩnh vực dịch thuật, đội ngũ nhân sự cống hiến và luôn sẵn sàng cháy hết mình. Chúng tôi phục vụ từ sự tậm tâm và cố gắng từ trái tim những người dịch giả.Tự hào là công ty cung cấp dịch thuật chuyên ngành hàng đầu với các đối tác lớn tại Việt nam trong các chuyên ngành hẹp như: y dược (bao gồm bệnh lý), xây dựng (kiến trúc), hóa chất, thủy nhiệt điện, ngân hàng, tài chính, kế toán. Các dự án đã triển khai của Công ty dịch thuật chuyên nghiệp MIDtrans đều được Khách hàng đánh giá cao và đạt được sự tín nhiệm về chất lượng biên phiên dịch đặc biệt đối với dịch hồ sơ thầu , dịch thuật tài liệu tài chính ngân hàng, dịch thuật tài liệu y khoa đa ngữ chuyên sâu. Đó là kết quả của một hệ thống quản lý chất lượng dịch thuật chuyên nghiệp, những tâm huyết và kinh nghiệm biên phiên dịch nhiều năm của đội ngũ dịch giả của chúng tôi. Hotline: 0947688883. email: info@dichthuatmientrung.com.vn . Các bạn ghé thăm site ủng hộ nhé. Cám ơn nhiều

    Trả lờiXóa