Bất kỳ ai khi sở hữu blog, website đều mong muốn bài viết của mình trông đẹp và ấn tượng hơn trong mắt người đọc, vậy nếu bạn không giỏi lập trình, cũng không phải là người thiết kế website giỏi làm thế nào để vẫn có thể trình bay một bài viết xuất sắc trên website?
Tổng hợp những code html+css trình bày bài viết cho blogspot
Nguồn: https://pixabay.com
Dưới đây là 100+ những code html giúp bạn làm được điều đó một cách dễ dàng nhất mà zony đã tổng hợp lại cho bạn, và sẽ được cập nhật thường xuyên hen
1. Code tạo bảng trong bài viết
| ZONYWEB | Thiết kế, quản trị và bảo trì website doanh nghiệp |
| Giá | Từ 1.7 triệu vnđ ~7 triệu vnđ |
| Nền tảng | Wordpress và Bloger |
| Chi tiết | Những lý do bạn nên chọn dịch vụ website của zony（Chi tiết dịch vụ） |
| Hỗ trợ | 24/7 bảo hành và đồng hành cùng bạn |
| Đồng hành | Tham gia nhóm đồng hành cùng zony（Tại đây） |
| Chuyên đề | Xây dựng thương hiệu cá nhân trên internet, website, youtube và SNS marketting |
| Home page | https://www.zonyone.com |
<div class="table-responsive"><table class="table"><tbody><tr><td style="background-color: #fafafa; width: 117px;">ZONYWEB</td><td>Thiết kế, quản trị và bảo trì website doanh nghiệp</td></tr><tr><td style="background-color: #fafafa;">Giá</td><td>Từ 1.7 triệu vnđ ~7 triệu vnđ</td></tr><tr><td style="background-color: #fafafa;">Nền tảng</td><td>Wordpress và Bloger</td></tr><tr><td style="background-color: #fafafa;">Chi tiết</td><td>Những lý do bạn nên chọn dịch vụ website của zony（<a href="http://www.zonyofficial.com/2021/11/website-cua-tui.html" rel="nofollow" target="_blank">Chi tiết dịch vụ</a>）</td></tr><tr><td style="background-color: #fafafa;">Hỗ trợ</td><td><a href="https://zalo.me/g/rlnegj287" rel="nofollow">24/7 bảo hành và đồng hành cùng bạn</a></td></tr><tr><td style="background-color: #fafafa;">Đồng hành</td><td>Tham gia nhóm đồng hành cùng zony（<a href="https://zalo.me/g/rlnegj287" rel="nofollow" target="_blank">Tại đây</a>）</td></tr><tr><td style="background-color: #fafafa;">Chuyên đề</td><td>Xây dựng thương hiệu cá nhân trên internet, website, youtube và SNS marketting</td></tr><tr><td style="background-color: #fafafa;">Home page</td><td><a href="https://www.zonyone.com" rel="dofollow" target="_blank">https://www.zonyone.com</a></td></tr></tbody></table></div>
2. Code khung viền liệt kê đặc biệt
Có thể bạn quan tâm:
Code:- Cách tạo website miễn phí từ blogspot
- Cách tạo web với site google
- Cách tạo web site trên wordpress.com
- 2 cách thay đổi giao diện blogspot
- Cách đăng bài viết, sản phẩm trên blogspot
<div class="symple-box yellow left" style="background: transparent; border-radius: 2px; border: 1px dashed rgb(72, 101, 178); box-sizing: border-box; color: black; float: none; font-family: Arial, sans-serif; font-size: 15px; margin: 40px auto; outline: 0px; padding: 40px; vertical-align: baseline;"><strong style="background: transparent; border: 0px; box-sizing: initial; margin: 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Có thể bạn quan tâm</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;">Cách tạo website miễn phí từ blogspot</li><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://www.zonyone.com/2021/11/website-mien-phi-google-site.html">Cách tạo web với site google</a></li><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://www.zonyone.com/2021/11/cach-tao-website-mien-phi-voi-wordpress.html">Cách tạo web site trên wordpress.com</a></li><li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">2 cách thay đổi giao diện blogspot</li><li style="background: transparent; border: 0px; box-sizing: initial; list-style: disc; margin: 5px 0px; outline: 0px; padding: 0px; vertical-align: baseline;">Cách đăng bài viết, sản phẩm trên blogspot</li></ul></div>
3. Code 3 nút bấm đơn giản để trình bày bài viết blogspot
Demo Tác giả Tải vềCode
<a href="https://zonygarden-shopdemo.blogspot.com" rel="nofollow" style="background-color: white; border-radius: 2px; border: 1px solid rgb(59, 89, 152); box-sizing: border-box; color: #3b5998; display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; margin: 20px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s ease 0s;" target="_blank">Demo</a><span face="'arial' , sans-serif" style="background-color: white; color: #636363; font-size: 16px;"> </span><a href="https://linhchidatthep.blogspot.com" rel="nofollow" style="background-color: white; border-radius: 2px; border: 1px solid rgb(233, 89, 80); box-sizing: border-box; color: #e95950; display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s ease 0s;" target="_blank">Tác giả</a><span face="'arial' , sans-serif" style="background-color: white; color: #636363; font-size: 16px;"> </span><a href="https://drive.google.com/file/d/1jHpTZwKGkA11g9uIwP6ZwcL3jhP2XIoX/view?usp=sharing" rel="nofollow" style="background-color: white; border-radius: 2px; border: 1px solid rgb(0, 172, 237); box-sizing: border-box; color: #00aced; display: inline-block; font-family: Arial, sans-serif; font-size: 14px; line-height: 16.8px; margin: 0px 3px 10px; padding: 10px 14px; text-decoration-line: none; transition: all 0.2s ease 0s;" target="_blank">Tải về</a>
4. Code viền xanh
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.
Code
<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>
5. Code thông báo
Nội dung thông báo: Tôi là zony nguyễn đẹp trai siêng làm, chưa có người yêu
Code:
<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;">Nội dung thông báo: Tôi là zony nguyễn đẹp trai siêng làm, chưa có người yêu</div>
6. Code khung nhiều màu sắc
Không thể phủ nhận hiện tại có rất nhiều theme blogspot đẹp trên thị trường, và còn được chia sẻ rất rộng rãi. Tuy nhiên đây là một trong những theme blog chuyên về phòng khám mà zony rất ưng ý, mọi thứ đều rất ổn, chuyên nghiệp, load nhanh và đặc biệt là đã tối ưu chuẩn SEO
<div style="background: linear-gradient(40deg,#4caf5014,#ffeb3b17);
border-radius: 3px;
border: 3px solid #d5d5d500;
color: #333333;
border-image-source: linear-gradient(to right, #4caf5080, #9c27b0a8, #03a9f4a6);
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;">
Không thể phủ nhận hiện tại có rất nhiều theme blogspot đẹp trên thị trường, và còn được chia sẻ rất rộng rãi. Tuy nhiên đây là một trong những theme blog chuyên về phòng khám mà zony rất ưng ý, mọi thứ đều rất ổn, chuyên nghiệp, load nhanh và đặc biệt là đã tối ưu chuẩn SEO</div>
7. Code khung viền Note
Note: The Code Block has a 400 KB limit, which is around 300,000 characters.Code:
<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>
8. Code khung nền vàng
Code:<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>
9. Code khung viền tím
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:
<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>
10. Code caution đẹp
Code:<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>
OK tạm thời như vậy hen.
Zony sẽ cập nhật thêm khi có những đoạn code mới.
Nhớ theo dõi để cập nhật những code trình bày bài viết cho chuyên nghiệp nhé
Hay
Trả lờiXóa