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.
Sau khi cài xong, bạn truy cập My Shortcodes và click New element.
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.
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.
Tiếp theo click sang tab HTML và dán đoạn code như hình dưới.
<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.
Ví dụ
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.
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.
Bước 2: Bạn click xuống tab Attributes và tạo 3 Attributes như hình dưới
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
Bước 4: Chèn html code cho button
Click sang tab HTML và chèn đoạn code sau vào
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!
. Thế nhưng, trước hết phải có lý do để các bác làm như vậy. ![[IMG]](https://lh3.googleusercontent.com/blogger_img_proxy/AEn0k_svRShl4YBphfBZ0rKeIehGVvLaiY0TYeuyu7XPpBuIPT4BLYXFgvLAT5OBeJbkelW5qL5lAlOsR0zSErbw6azJNIevArG_YEqspe-KQoadTaf3OlToT5qnNvWMnyF7QzqkxGk9=s0-d)