Kỹ thuật chèn code khung bài viết trên website
Để chèn được code vào website đặc biệt là trong wordpress thì bạn cần phải có 1 số những đoạn code có sẵn sau đó chèn vào nội dung website của bạn. Để chèn được vào những khung này các bạn có thể làm như sau.
Bước 1: Đăng nhập tài khoản vào website của bạn. Yêu cầu tài khoản phải có chức năng soạn thảo văn bản như thông thường.
Bước 2: Truy cập đến Bài viết > Viết bài mới > các bạn viết nội dung như thông thường.
Bước 3: Chèn code tạo khung cho bài viết.
Các bạn chuyển qua chế độ văn bản để chèn nội dung code ở phần phía dưới bạn thích vào phần phía dưới của nội dung văn bản của bạn.
Sau khi chọn copy và pate vào xong các bạn có thể chuyển lại phần trực quan để xem được kết quả.
Các mẫu code khung bài viết cho website đẹp mắt
Mẫu 1: Code chèn khung bài viết khung nền, viền xanh:
Đây là kiểu khung nền xanh chữ xanh theo mặc định bạn cũng có thể dễ dàng đổi lại màu chữ thao tác như word excell như hình của chúng tôi dưới đây. Code khung này nhằm nhấn mạnh 1 nội dung nào đó để nội dung của bạn thêm nổi bật hơn.
Đoạn code chèn khung có nền xanh kiểu 2
<div style="background: #ebf6e0; border-radius: 5px; 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;">Below is the code to insert the template in the border. You can edit this content yourself to best suit your content. We are a user guide dedicated to sharing knowledge, experience and cool stuff.</div>
Mẫu 2: Code chèn khung nền và chữ vàng:
Đây là dạng code gây thông báo cho mọi người tạo sự chú ý hơn
Lưu ý:
Đoạn code chèn khung bài viết kiểu 3 lưu ý
<div class="symple-box yellow center " style="background: #fffdf3; border-radius: 5px; 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;"><a href="https://howto.edu.vn/code-hien-thi-hotline-tren-website/" target="_blank" rel="noopener">Code hiển thị hotline trên website</a></li> <li><a href="https://howto.edu.vn/code-thu-gon-noi-dung/" target="_blank" rel="noopener">Code thu gọn nội dung chi tiết sản phẩm và danh mục trên Flatsome</a></li> <li><a href="https://howto.edu.vn/code-hien-thi-khuyen-mai-dep-cho-flatsome/" target="_blank" rel="noopener">Code hiển thị khuyến mãi đẹp cho flatsome giống như Cellphones</a></li> <li><a href="https://howto.edu.vn/code-tu-dong-luu-anh-vao-hot/" target="_blank" rel="noopener">Code tự động lưu ảnh vào hot khi copy hình từ trang khác</a></li> </ul> </div>
Mẫu 3: Code chèn khung bài viết chữ đen nền trắng và có bóng đổ
Đây là mẫu code chèn khung bài viết hoặc bình luận tải 1 số trang mà mình thấy hoặc nếu bạn thích bạn cũng có thể đưa vào trang của bạn tuỳ theo sở thích
» Địa chỉ email của bạn sẽ không được hiển thị.
» Những 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ội dung của bạn được chỉnh chu và rõ ràng nhất.
Đoạn code chèn khung bài viết kiểu 4 bình luận
<div style="box-shadow: rgba(0, 0, 0, 0.4) 0px 0px 10px; box-sizing: inherit; margin-bottom: 10px; padding: 15px; line-height: 1.6em; border-radius: 5px;"><span style="box-sizing: inherit; font-weight: bold; line-height: 2.0em;"><span style="color: black;"> Nội dung bình luận</span></span> <span style="color: #222222;">» Địa chỉ email của bạn sẽ không được hiển thị.</span> <span style="color: #222222;">» Những mục không có dấu sao (*) là không bắt buộc.</span> <span style="color: #222222;">» Bình luận bằng tiếng Việt có dấu để nội dung của bạn được chỉnh chu và rõ ràng nhất.</span></div>
Mẫu 4: Code chèn khung bài viết khung màu gradient:
Đây là mẫu nội dung sử dụng màu nền và đường viền hiệu ứng gradient trông cực kỳ đẹp mắt. Chúng tôi muốn chia sẻ cho các bạn.
Nguồn: howto.edu.vn
Đoạn code chèn khung bài viết kiểu 5 màu gradient
<div style="background: linear-gradient(40deg, rgba(76, 175, 80, 0.08), rgba(255, 235, 59, 0.09)); border-radius: 5px; border-width: 3px; border-style: solid; border-color: rgba(213, 213, 213, 0); border-image-width: initial; border-image-outset: initial; border-image-repeat: initial; color: #333333; border-image-source: linear-gradient(to right, rgba(76, 175, 80, 0.5), rgba(156, 39, 176, 0.66), rgba(3, 169, 244, 0.65)); border-image-slice: 1; 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; text-align: left;">Đây là mẫu nội dung sử dụng màu nền và đường viền hiệu ứng gradient trông cực kỳ đẹp mắt. Chúng tôi muốn chia sẻ cho các bạn. Nếu các bạn chia sẻ lại hãy ghi lại nguồn. Nguồn: <a href="howto.edu.vn" target="_blank" rel="noopener">howto.edu.vn</a></div>
Mẫu 5: Code demo chèn khung bài viết bình luận:
Đây là đoạn code ghi chú phần trích dẫn giúp trích dẫn của bạn nổi bật hơn
Note: The Code Block has a 400 KB limit, which is around 300,000 characters.
Đoạn code chèn khung bài viết kiểu 6 màu gradient
<blockquote style="-webkit-text-stroke-width: 0px; background: #e8f9f4; border: 1px solid #8ee3c8; 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: 1em 0px; orphans: 2; padding: 1em; 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>
Mẫu 6: Code chèn khung bài viết kiểu nội dung nổi bật:
Đoạn code này làm nội dung của bạn nổi bật nhất trong bài viết của bạn. Chúng sẽ màu mè như phần dưới đây.
Đoạn code chèn khung bài viết kiểu 7 nội dung nổi bật.
<div class="content-box-yellow" style="background-color: #fef5c4; border: 1px solid #fadf98; box-sizing: inherit; margin: 0px 0px 25px; overflow: hidden; padding: 20px;"><span style="color: #222222; font-family: sans-serif;">howto.edu.vn có xuất phát điểm từ blog cá nhân với mục đích chia sẻ, cung cấp kiến thức đồ hoạ và những tiện ích trong cuộc sống. Sau một thời gian hoạt động, howto.edu.vn đã phát triển mạnh mẽ thành một cộng đồng lớn, là nơi giao lưu, trao đổi các kiến thức, kinh nghiệm, tài liệu tổng hợp về lĩnh vực đồ hoạ, công nghệ thông tin và các tiện ích văn phòng.</span></div>
Mẫu 7: Code chèn khung lưu ý của google:
Đoạn code chèn khung bài viết kiểu 8 chèn khung lưu ý của google:
<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>
Mẫu 8: Code chèn khung bài viết có nền tiêu đề:
Tạo khung kiểu dạng fom được ngăn cách bởi đường gạch dưới hình hình dưới đây
➦ Tiêu đề bài viết
➧ Nội dung bạn quan tâm
- Viết nội dung bạn muốn truyền tải Code khung bài viết cho website 1
- Code khung bài viết cho website 2
- Code khung bài viết cho website 3
Đoạn code chèn khung bài viết kiểu 1.
<div class="noidung_chu_y" style="background-color: #fff;"> <div class="chu_y" style="border: 2px solid #004695; border-radius: 5px;"> <div class="title_chuy" style="background-color: #2a79c8; color: #ffffff; border-top-left-radius: 4px; border-top-right-radius: 4px; padding: 10px 16px;"> <p style="margin-bottom: 0; margin-top: 0;"><span style="font-size: 140%;"><span style="color: #ed1c24;">➦ </span></span>Tiêu đề bài viết</p> </div> <div class="noidung_chu_y" style="background-color: #fff; padding: 1em;"> <span style="font-size: 16px; color: #0000ff;"><strong>➧ Nội dung bạn quan tâm</strong></span> <hr /> <ul> <li>Viết nội dung bạn muốn truyền tải Code khung bài viết cho website 1</li> <li>Code khung bài viết cho website 2</li> <li>Code khung bài viết cho website 3</li> </ul> </div> </div> </div>
Tổng kết lại
Việc chèn code khung bài viết cho website là việc cực kỳ cần thiết. Nó giúp cho bài viết của bạn trở nên nổi bật hơn. Những nội dung cần chú ý bạn chỉ cần chèn những nội dung code này vào bài viết sau đó thay đổi nội dung theo như ý muốn của bạn là được.
Chúc các bạn thành công. Nếu các bạn có mẫu nào hoặc ý tưởng nào hay có thể để lại bình luận cho chúng tôi chúng tôi sẽ xem và tạo ra những đoạn code phù hợp nhé.
