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.
Để 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
|
1 |
<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
Code để dán vào đây nhé anh em:
|
1 |
<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> |
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.
» Đị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
|
1 2 3 4 5 |
<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;"> 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
Đây là code để anh em chèn vào
|
1 2 |
<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:
|
1 2 |
<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: "Gotham SSm A", "Gotham SSm B", 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: </strong>The Code Block has a 400 KB 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
Đâ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é !
|
1 2 |
<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:
Code để anh em dán vào:
|
1 |
<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.
|
1 |
<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;"> 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 😊
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 ạ
Nếu mà bài nào cũng chèn thì bác tham khảo bài viết : cách chèn quảng cáo ở giữa bài viết , trong chuyên mục thủ thuật WodPress nhé
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
Chỗ chèn link bạn cứ bôi đen rồi chèn link bằng công cụ soạn thảo bình thường thôi, còn về xuống hàng thì bạn tham khảo bài hướng dẫn này nhé :http://hocwebchuan.com/reference/tag/tag_br.php
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 😀
Cái này được cái là copy nhanh, tiện, không cần cài thêm plugin. Plugin tạo cái này Hocban.vn cũng đang xài nhưng mà cái này copy nhanh quá nên cóp cho lẹ :v
Rất hữu ích nhé bác, em vừa áp dụng cho web em xong.
Haha, anh em thấy hữu ích là dui rầu. Còn em thì hay xài mấy cái này lắm :p
Hay đó
Comment ngắn thường là comment SPAM nhá, phải thể hiện đẳng cấp bằng comment có đầu tư nào bác Tín 😬 😬 😬 😬 😬 😬
Hihi
Ờ, côm mềnh cứ như trên phây bút thế kia 🙁
Cũng được đó
Cái này bên Blogspot thì dễ rồi, copy dán vào là có ngay. Còn bên WordPress thì nó không giữ định dạng đã sao chép :v
Không biết copy thôi cũng không khó đâu
Cái này dành cho mấy anh em không chuyên thôi, còn anh em làm bên web thì thôi mấy cái này quá đơn giản ấy mà 🙂
Rất có ý nghĩa tham khảo! Sẽ bookmark bài này tham khảo khi cần, thank ad nhé!
Cũng ko cần đánh dấu đâu, vào Hocban.vn >> menu Công Cụ là thấy ngay.
Có điều đây là dạng sưu tập nên nó có thể bổ sung, sửa đổi hàng ngày. Anh em thích là zui rầu :p
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ộ.
A hê hê. Chắc chắn rồi, tớ sẽ sưu tập thêm các mẫu đẹp. Đang tính tìm thêm khung chèn code nữa đấy.
Đang hóng siêu phẩm của bạn đây.
Code của người ta mình đi copy về đó. Ko phải siêu phẩm đâu :v
Thì cũng là siêu phẩm của người ta!
Nếu vậy thì nó là chúa của các siêu phẩm rầu, con nào đẹp hốt hết cơ mà :v
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 😀
A hihi, đúng rồi đó bác code này là code copy paste nên em cũng chưa có chỉnh lại cái nào thừa cái nào thiếu luôn ấy. Nên nó dài loằn ngoằn vậy đó :v
Cảm ơn bác đã đóng góp ý kiến nhé ! Tổ quốc sẽ ghi nhớ điều này 😊
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ậy luôn đó hử, thế thì bác lấy lại code đi nghen. E mới lược bỏ một số thành phần không cần thiết rồi. Nãy giờ em thanh lọc hết code sưu tầm trong post này. Còn post dưới đây về nút Button cũng đang thanh lọc tiếp, có đoạn code tác giả trên web bác nữa.
https://hocban.vn/bo-suu-tap-nut-bam-html-css-button-styles
Lúc lấy em đã tự xóa bớt đi rùi bác ạ 😀 hihi
Ồ ồ, thế thì tốt rồi, bác bác xem lại giúp code trong post này em làm thế còn thừa nhiều lắm không ? Để e bỏ bớt đi 😀
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
Chếch… lúc nãy e sửa xong lại dán nhầm cái đoạn “Lorem Ipsum..” vào :v
Để em sửa lại, cảm ơn bác Vỹ nhé !
Cần là có có lúc cần
Vâng, có lúc sẽ cần đấy 😊
copy gán vào đâu vậy bác, mò nảy giờ mà không ra 🙁
cái comment ý bác
À, cái này là mẫu mình dùng để dán vào bài viết, chọn chết độ Text để hình dung. Còn dán vào trước khung bình luận thì tùy thuộc vào theme mà mình sẽ dán vào file single.php
Có thể dán trước hoặc sau đoạn code này:
< ?php comments_template(); ?>