Paid-by-themewiki.top
zonyone1 code

Bí mật 100+ đoạn code html giúp bạn trình bày bài viết trên website đẹp hơn

Đăng nhận xét

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

Bí mật 100+ đoạn code html giúp bạn trình bày bài viết trên website đẹp hơn

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:
<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

Code:
<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: &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>

8. Code khung nền vàng

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="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;">&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>

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é
ZONY NGUYỄN
Tôi yêu thích công nghệ thông tin, và tôi muốn hỗ trợ bạn trong những lĩnh vực tôi biết, đồng hành cùng zony là chương trình kết nối giữa tôi và những người bạn

Related Posts

Đăng nhận xét