Text box HTML CSS template, khung mẫu cho bài viết

Dưới đây là một số mẫu text box template để anh em chèn vào bài viết cho nó nhí nhảnh tí :v Các mẫu mình tham khảo từ nhiều website trong và ngoài nước, thấy ưng cái bụng là hốt về để dành chơi :v

1. Khung ghi chú và thông báo trên Canhme.com

Đây là mẫu mình khá là thích khi truy cập canh me – blog thông tin, khuyến mại về các dịch vụ hosting, domain rất lớn tại Việt Nam hiện nay.

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.

Để sử dụng các bạn copy đoạn code dưới đây vào trình soạn thảo ở chế độ Text. Nhớ dán trong chế độ soạn thảo HTML nhé :v

<div style="background: #ebf6e0; border-radius: 2px; border: 1px solid #b3dc82; box-sizing: border-box; float: none; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline; color: #5f9025; font-family: arial, sans-serif; font-size: 15px;">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry’s standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</div>

Một mẫu khác cũng của Canhme.com, cái này màu hường cho thông báo đồ là hợp nè :v

Thông báo: Nội dung thông báo

Code để dán vào đây nhé anh em:

<div style="background: rgb(255, 233, 233); border-radius: 2px; border: 1px solid rgb(251, 196, 196); box-sizing: border-box; color: #de5959; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;">AAAAAAAAAAAAAAAAAAAAAA</div>

Khung lưu ý mới của Canhme.com

<div class="symple-box yellow center " style="background: #fffdf3; border-radius: 2px; border: 1px solid #f2dfa4; box-sizing: border-box; color: #c4690e; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 0px auto; outline: 0px; padding: 15px 20px; vertical-align: baseline;"><strong style="background: transparent; border: 0px; box-sizing: initial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Lưu ý</strong>:
<ul style="background: transparent; border: 0px; box-sizing: initial; margin: 0px 0px 20px 20px; outline: 0px; padding: 0px; vertical-align: baseline;">
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Mỗi khách hàng chỉ được sử dụng mỗi coupon 1 lần duy nhất.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Tối đa mỗi khuyến mại tên miền có thể đăng ký 20 domain/account/giao dịch.</li>
<li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Khuyến mại kết thúc vào 11h59 ngày 3/12/2019 theo giờ Việt Nam.</li>
</ul>
</div>

Demo:

Lưu ý:

  • Mỗi khách hàng chỉ được sử dụng mỗi coupon 1 lần duy nhất.
  • Tối đa mỗi khuyến mại tên miền có thể đăng ký 20 domain/account/giao dịch.
  • Khuyến mại kết thúc vào 11h59 ngày 3/12/2019 theo giờ Việt Nam.

2. Khung quy định bình luận trên ocuaso.com

Bạn nào thích qua bên ocuaso mà coi nhé, kéo xuống dưới khung comment sẽ thấy. Hôm nay mình vào và thấy khá thích.

 Lưu ý:
» Địa chỉ email của bạn được bảo mật.
» Mục không có dấu sao (*) là không bắt buộc.
» Bình luận bằng tiếng Việt có dấu nếu có thể.

Để thêm code này bạn dán vào như sau, thích thay thành văn bản nào thì tùy ý bạn nhé :v

<div style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; box-sizing: inherit; margin-bottom: 10px; padding: 20px; box-sizing: inherit; line-height: 1.6em; padding: 15px;">
<span style="box-sizing: inherit; font-weight: 700; line-height: 2.0em;"><span style="color: black;">&nbsp;Lưu ý:</span></span><br />
<span style="color: #222222;">» Địa chỉ email của bạn được bảo mật.</span><br />
<span style="color: #222222;">» Mục không có dấu sao (*) là không bắt buộc.</span><br />
<span style="color: #222222;">» Bình luận bằng tiếng Việt có dấu nếu có thể.</span></div>

Đang sưu tầm tiếp anh em ạ :v ai có mẫu nào cho mình xin một đường link.

3. Mẫu hiện tại đang dùng cho ghi chú trên Hocban.vn

Cái này mình tùy biến từ plugin Shortcodes Ultimate, cũng có một số mẫu khác nữa, tạm thời show cái này ra trước :v

Lưu ý là cái này không phải nói các anh em học bên web thì không cần học nhiều cũng làm được web, ở đây là đang so sánh về ưu điểm của việc sử dụng CMS cho dân không chuyên với việc phải bỏ thời gian dài đi học để làm được một sản phẩm tương tự.

Đây là code để anh em chèn vào

<div style="background-color: #fffde8; border-radius: 3px; border: 1px solid #d5d5d5; color: #333333; font-family: inherit; font-size: inherit; font-stretch: inherit; font-style: inherit; font-variant: inherit; font-weight: inherit; line-height: inherit; margin: 0px; padding: 1em; vertical-align: baseline;">
Lưu ý là cái này không phải nói các anh em học bên web thì không cần học nhiều cũng làm được web, ở đây là đang so sánh về ưu điểm của việc sử dụng CMS cho dân không chuyên với việc phải bỏ thời gian dài đi học để làm được một sản phẩm tương tự.</div>

4. Blockquote đang sử dụng trên square.com

Hôm nay đi dạo cũng vớ được một mẫu nữa, nhìn cũng ổn phết đó chứ nhỉ. Cũng không phải cái gì quá đặc sắc, chỉ là một cách phối màu mà mình cho là nhẹ nhàng, tinh tế, đáng để đưa vào thư viện của Hocban.vn

Note: The Code Block has a 400 KB limit, which is around 300,000 characters.

Đây là code để các bạn dán vào bài viết, page, widget,..hay vị trí nào đó trên website mà bạn muốn:

<blockquote style="-webkit-text-stroke-width: 0px; background: rgb(232, 249, 244); border: 1px solid rgb(142, 227, 200); box-sizing: border-box; clear: right; color: #181818; font-family: &quot;Gotham SSm A&quot;, &quot;Gotham SSm B&quot;, Gotham, sans-serif; font-size: 14px; font-style: normal; font-variant-caps: normal; font-variant-ligatures: normal; font-weight: 300; letter-spacing: normal; line-height: 1.6em; margin: 1.5em 0px; orphans: 2; padding: 1.6em; text-align: start; text-decoration-color: initial; text-decoration-style: initial; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px;">
<strong style="box-sizing: border-box; font-weight: 500;">Note:&nbsp;</strong>The&nbsp;Code Block has a 400 KB&nbsp;limit, which is around 300,000 characters.</blockquote>

5. Text box từ WP Căn Bản

Đây là demo để anh em tham khảo

Như vậy là chúng ta vừa thực hiện xong việc cài WordPress Trên Hostinger với tên miền tk rồi đấy. Nhìn chung quy trình cài đặt chỉ khác ở đoạn đầu thôi, còn lại các bạn cứ thực hiện tương tự như trên localhost. Bài 35 này cũng đã khép lại Series WordPress Cơ Bản. Trong tương lai có thể mình sẽ hướng dẫn thêm các bài cài đặt nhanh WordPress mà không cần đăng ký tên miền, cài trên các Hosting miễn phí khác nhé.

Đây là code để anh em dán vào, nhớ thay thế đoạn văn bản của mình bằng văn bản mà anh em muốn nhé !

<div class="content-box-yellow" style="background-color: #fef5c4; border: 1px solid rgb(250, 223, 152); box-sizing: inherit; margin: 0px 0px 25px; overflow: hidden; padding: 20px;">
<span style="color: #222222; font-family: sans-serif;">Như vậy là chúng ta vừa thực hiện xong việc cài WordPress Trên Hostinger với tên miền tk rồi đấy. Nhìn chung quy trình cài đặt chỉ khác ở đoạn đầu thôi, còn lại các bạn cứ thực hiện tương tự như trên localhost. Bài 35 này cũng đã khép lại Series WordPress Cơ Bản. Trong tương lai có thể mình sẽ hướng dẫn thêm các bài cài đặt nhanh WordPress mà không cần đăng ký tên miền, cài trên các Hosting miễn phí khác nhé.</span></div>

6. Text box từ Bác Sĩ Windows

Demo:

Như vậy là chúng ta vừa thực hiện xong việc cài WordPress Trên Hostinger với tên miền tk rồi đấy. Nhìn chung quy trình cài đặt chỉ khác ở đoạn đầu thôi, còn lại các bạn cứ thực hiện tương tự như trên localhost. Bài 35 này cũng đã khép lại Series WordPress Cơ Bản. Trong tương lai có thể mình sẽ hướng dẫn thêm các bài cài đặt nhanh WordPress mà không cần đăng ký tên miền, cài trên các Hosting miễn phí khác nhé.

Code để anh em dán vào:

<div class="box_luuy" style="background: #66689c; box-shadow: rgba(0, 0, 0, 0.1) 3px 4px 4px; clear: both; line-height: 1.7; color: white; font-family: Roboto; letter-spacing: -0.75px; margin: 5px 0px; padding: 20px 25px; transition: 0.5s;">Như vậy là chúng ta vừa thực hiện xong việc cài WordPress Trên Hostinger với tên miền tk rồi đấy. Nhìn chung quy trình cài đặt chỉ khác ở đoạn đầu thôi, còn lại các bạn cứ thực hiện tương tự như trên localhost. Bài 35 này cũng đã khép lại Series WordPress Cơ Bản. Trong tương lai có thể mình sẽ hướng dẫn thêm các bài cài đặt nhanh WordPress mà không cần đăng ký tên miền, cài trên các Hosting miễn phí khác nhé.</div>

7. Khung lưu ý của Google Help

Đây là demo:

Code để anh em cốp bi và dán vào.

<aside class="caution" style="background: rgb(255, 243, 224); box-sizing: inherit; color: #dd2c00; font-family: Roboto, sans-serif; font-size: 14px; margin: 16px 0px; padding: 12px 24px 12px 20px;"><strong style="box-sizing: inherit; margin-top: 0px;">Caution:</strong><span style="box-sizing: inherit; margin-bottom: 0px;">&nbsp;This number only tracks requests that have been logged since DevTools was opened. If other requests occurred before DevTools was opened, those requests aren't counted.</span></aside>

Tiếp tục sưu tầm, anh em có mẫu nào đẹp chia sẻ với Hocban.vn nhé ! Cảm ơn anh em 😊

Nếu bạn thấy bài viết này hữu ích thì có thể chia sẻ nó qua:

Bài viết bạn đang xem được viết bởi Tịnh Nguyễn, là người thường đăng bài và comment dạo trên Hocban.vn

Nội dung được đề xuất

avatar
14 Comment threads
27 Thread replies
0 Followers
 
Most reacted comment
Hottest comment thread
14 Comment authors
An Gia LâmheoẤm chén in logoThanhSabo Recent comment authors
An Gia Lâm <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>

bài viết rất hữu ích

heo <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>
heo (1)

hay

Ấm chén in logo <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>

Em hỏi chút, em muốn tạo box text cho toàn bộ bài viết thì vào đâu chèn đoạn code trên ạ.
Em dùng wordpress flatsome ạ

Thanh <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">5</span><span style="color: #e91e63;">) </span>

hi bạn
mình thử dùng code của canhme nhưng không biết xuống dòng làm sao cả , test thử xuống dòng nhưng xem lại thì thấy ghi liên tiếp ko thôi . Bạn cho hỏi có cách nào để có thể ghi chú tùy ý mình không , hoặc plugin nào đó hỗ trợ tạo box text mà có thể chèn link vào đó nữa ?? thank bạn rất nhiều

Sabo <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">28</span><span style="color: #e91e63;">) </span>

Thanks bác, e thấy bên Canhme dùng plugin Shortcode để tạo mấy cái box kia nhưng đã CSS lại cho với bản mặc định 😀

David Nguyen <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">1</span><span style="color: #e91e63;">) </span>

Rất hữu ích nhé bác, em vừa áp dụng cho web em xong.

Tín Châu <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">26</span><span style="color: #e91e63;">) </span>

Hay đó

Trường Đẹpzai <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">76</span><span style="color: #e91e63;">) </span>

Hihi

ThucLe Blog <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>

Cũng được đó

ThucLe Blog <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">39</span><span style="color: #e91e63;">) </span>

Không biết copy thôi cũng không khó đâu

Vu <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">53</span><span style="color: #e91e63;">) </span>

Rất có ý nghĩa tham khảo! Sẽ bookmark bài này tham khảo khi cần, thank ad nhé!

Vu <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">53</span><span style="color: #e91e63;">) </span>

Oh, không để ý. Rất thích, rất có giá trị tham khảo. Hy vọng bạn sẽ bổ sung ngày càng đồ sộ.

Lang thang Web <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">53</span><span style="color: #e91e63;">) </span>

Đang hóng siêu phẩm của bạn đây.

Lang thang Web <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">53</span><span style="color: #e91e63;">) </span>

Thì cũng là siêu phẩm của người ta!

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Có mấy đoạn class như “symple-box green center”, “symple-box red center” hay “comment-policy-box” thực chất ko cần thiết nên bác có thể xóa đi để code nhìn ngắn hơn chút 😀

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Do em cũng đang dùng mà nhớ là bác có share nên qua lấy đỡ phải ngồi viewsource 😀

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Lúc lấy em đã tự xóa bớt đi rùi bác ạ 😀 hihi

Vỹ Spirit <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">108</span><span style="color: #e91e63;">) </span>

Ko bác, mà cái khung màu xanh kia sao bác lại dán đoạn “Lorem Ipsum is simply…” mà ko đưa code cho người ta :v

JT Shopping <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">13</span><span style="color: #e91e63;">) </span>

Cần là có có lúc cần

Cao Hiếu <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">29</span><span style="color: #e91e63;">) </span>

copy gán vào đâu vậy bác, mò nảy giờ mà không ra 🙁

Cao Hiếu <span style="color: #e91e63;">(</span><span class="wpdiscuz-comment-count">29</span><span style="color: #e91e63;">) </span>

cái comment ý bác