Một số đoạn mã HTML CSS tạo khung đẹp cho WordPress

Một số đoạn mã HTML CSS tạo khung đẹp cho WordPress, Việc sử dụng mã HTML CSS có sẵn sẽ giúp bạn giải quyết được vấn đề khi tạo một khung đơn giản trong bài viết hoặc ở một vị trí nào đó một cách nhanh chóng và đơn giản? bạn chỉ cần sao chép những đoạn mã HTML CSS và tùy biến thêm một chút theo ý thích của mình là bạn sẽ có ngay một khung text đẹp.

[icon name=”plus” prefix=”fas”] Tại sao phải dùng HTML CSS tạo khung có sẵn?

Việc sử dụng các đoạn mã HTML1HTML viết tắt của Hypertext Markup Language là ngôn ngữ lập trình dùng để xây dựng và cấu trúc lại các thành phần có trong Website CSS2CSS là chữ viết tắt của Cascading Style Sheets, nó là một ngôn ngữ được sử dụng để tìm và định dạng lại các phần tử được tạo ra bởi các ngôn ngữ đánh dấu (HTML). Nói ngắn gọn hơn là ngôn ngữ tạo phong cách cho trang web. Bạn có thể hiểu đơn giản rằng, nếu HTML đóng vai trò định dạng các phần tử trên website như việc tạo ra các đoạn văn bản, các tiêu đề, bảng,…thì CSS sẽ giúp chúng ta có thể thêm style vào các phần tử HTML đó như đổi bố cục, màu sắc trang, đổi màu chữ, font chữ, thay đổi cấu trúc… có sẵn sẽ giúp bạn tiết kiệm được thời gian đồng thời nó giúp bạn có thể dễ dàng tùy biến theo ý thích của mình? và bạn đang tìm kiếm một số mẫu HTML CSS khung viền cho WordPress? hãy tham khảo một số mẫu HTML CSS mà mình tổng hợp từ các nguồn khác nhau?

[icon name=”plus” prefix=”fas”] Mã HTML CSS tạo khung đẹp

Một số đoạn mã HTML CSS tạo khung đẹp dưới đây được sử dụng cho mã nguồn WordPress, tùy theo mã nguồn bạn cũng có thể tùy biến lại đoạn mã cho phù hợp với mục đích của bạn.

ma code html css khung dep

[icon name=”check” prefix=”fas”] Mẫu HTML CSS 01

Đây là mẫu rất thích hợp để bạn có thể hiển thị các thông báo, chương trình, khuyến mãi…. chỉ cần bạn sao chép đoạn mã bên dưới và dán vào vị trí thích hợp là bạn sẽ có ngay một khung Text tuyệt đẹp.

[icon name=”eye” prefix=”fas”] Demo HTML CSS 01

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Mẫu HTML CSS 02

Với mẫu này cũng tương tự mẫu trên, tuy nhiên mẫu này hơi màu mè hơn xíu… nó phù hợp cho những ai thích mơ mộng á nha.

[icon name=”eye” prefix=”fas”] Demo HTML CSS 02

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Mẫu HTML CSS 03

Mẫu này dành cho những ai muốn tùy biến lại khung thông báo bình luận trên trang Web của mình.

[icon name=”eye” prefix=”fas”] Demo HTML CSS 03

Lưu ý:
  • Không dùng từ khóa đặt tên khi bình luận.
  • Bình luận phải có dấu.
  • Bình luận sai nội quy sẽ bị xóa.

[icon name=”check” prefix=”fas”] Mẫu HTML CSS 04

Một mẫu tạo khung bình luận khác, với mẫu này khá thích hợp với phong cách cổ điển cùng sự đơn giản.

[icon name=”eye” prefix=”fas”] Demo HTML CSS 04

 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ể.

[icon name=”heart” prefix=”fas”] Có thể bạn sẽ thích?

[icon name=”check” prefix=”fas”] Mẫu HTML CSS 05

Đây là một mẫu khung viền khá bắt mắt, nó là sự kết hợp pha trộn giữa các màu sắc tạo nên sự độc đáo riêng biệt.

[icon name=”eye” prefix=”fas”] Demo HTML CSS 05

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Mẫu HTML CSS 06

Đây là một mẫu HTML CSS – Blockquote khung với thiết kế vô cùng đơn giản nhưng nó lại làm nổi bật được nội dung đáng để bạn lôi nó về vọc vạch.

[icon name=”eye” prefix=”fas”] Demo HTML CSS 06

[icon name=”check” prefix=”fas”] Mẫu HTML CSS 07

Một mẫu HTML CSS khung khá nhẹ nhàng và đẹp, bạn có thể sử dụng ở các vị trí trong bài viết khác nhau.

[icon name=”eye” prefix=”fas”] Demo HTML CSS 07

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Một số khung viền HTML CSS đẹp khác

Dưới đây là code các loại đường viền cơ bản thường gặp, các bạn chỉ việc coppy về dùng và tuỳ chỉnh với một số thuộc tính trong code như: đổi kiểu đường viền, đổi màu nền,… và sử dụng.

[icon name=”check” prefix=”fas”] Dạng nét liền (solid)

[icon name=”eye” prefix=”fas”] Demo dạng nét liền

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng nét liền (solid) có background

[icon name=”eye” prefix=”fas”] Demo nét liền (solid) có background

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng nét liền (solid) có background, border trái đậm

[icon name=”eye” prefix=”fas”] Demo nét liền (solid) có background, border trái đậm

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng dấu chấm (dotted)

[icon name=”eye” prefix=”fas”] Demo dấu chấm (dotted)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng nét đứt (dashed)

[icon name=”eye” prefix=”fas”] Demo nét đứt (dashed)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng nét đứt có shadow và radius

[icon name=”eye” prefix=”fas”] Demo nét đứt có shadow và radius

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng nét đôi (double)

[icon name=”eye” prefix=”fas”] Demo nét đôi (double)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng đường rãnh (groove)

[icon name=”eye” prefix=”fas”] Demo đường rãnh (groove)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng chóp (ridge)

[icon name=”eye” prefix=”fas”] Demo chóp (ridge)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng đổ bóng bên trong (inset)

[icon name=”eye” prefix=”fas”] Demo đổ bóng bên trong (inset)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

[icon name=”check” prefix=”fas”] Dạng đổ bóng bên ngoài (outset)

[icon name=”eye” prefix=”fas”] Demo đổ bóng bên ngoài (outset)

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Ngoài ra các bạn có thể thêm thuộc tính border-radius để bo tròn 4 góc, ví dụ đoạn mã bên dưới.

Kết quả như bên dưới.

Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Nếu nội dung trong khung quá dài, các bạn có thể dùng thuộc tính overflow kết hợp với max-height (hoặc height) để thu gọn lại (và sẽ xuất hiện thanh cuộn), ví dụ đoan mã như sau.

Kết quả như bên dưới.

Mình là Nguyễn Hữu Thuần đã từng làm một số website nhỏ mang tính cá nhân (nhưng không đâu vào đâu cả) và tôi đã bỏ một thời gian khá dài – tuy nhiên sau một cú sốc khá nhẹ tôi lại lập ra blog thủ thuật (tháng 11/2014) mục đích chính để làm cho vơi đi những nỗi buồn và từ đó phát triển đến bây giờ (lúc đầu huuthuan.net có tên là it60s.org). Hiện tại blog đã có được “một chút” tàn dư trên Google nhưng mình cảm thấy rất hạnh phúc khi có những bài hướng dẫn được ngợi khen và đó cũng là động lực để mình có thể viết nhiều bài hơn và duy trì blog! Với phương châm là chia sẻ vì thế blog rất muốn được sự chia sẻ của cộng đồng để mình có thể hoàn thiện blog ngày càng đáp ứng nhu cầu tốt hơn và cũng rất cảm ơn sự quan tâm và ủng hộ của các độc giả!

Nếu bạn muốn tiêu đề ở giữa kiểu một đoạn chú thích thì sử dụng đoạn code bên dưới.

Kết quả như bên dưới.

TIÊU ĐỀ
Huuthuan.net là Website chuyên sâu các thủ thuật máy tính, thủ thuật tin học, thủ thuật Internet, thủ thuật Website, thủ thuật WordPress, Công nghệ … và kiếm tiền hay nhất, chi tiết nhất…

Ngoài ra, bạn có thể sử dụng Plugin SiteOrigin CSS để có thể tùy biến giao diện trang Web theo ý muốn một cách đơn giản hơn.

[icon name=”plus” prefix=”fas”] Kết luận

Với những đoạn Code HTML CSS khung viền bên trên hy vọng sẽ giúp ích cho bạn trong việc tạo khung cho trang Web của mình. Để sử dụng bạn chỉ cần Copy đoạn mã tương ứng rồi dán vào trang Web với trình HTML là bạn sẽ có ngay kết quả mong muốn.

Trong quá trình sử dụng bạn có thể thay đổi màu sắt theo mục đích cũng như nhu cầu của mình, hy vọng với những đoạn Code HTML CSS tạo khung viền bên trên bạn sẽ thích.

Đánh giá và chia sẻ để nâng cao chất lượng bài viết?

Tỉ lệ / 5. Phiếu:

Cảm ơn bạn đã đánh giá ...

Hãy theo dõi chúng tôi trên xã hội!

Chúng tôi rất tiếc vì bài đăng này không hữu ích cho bạn!

Hãy để chúng tôi cải thiện bài đăng này!

Hãy cho chúng tôi biết làm thế nào chúng tôi có thể cải thiện bài đăng này?

Chia sẻ: - Theo dõi Máy tính & Wordpress trên: Theo dõi Máy tính & Wordpress trên Google News

10 thoughts on “Một số đoạn mã HTML CSS tạo khung đẹp cho WordPress”

  1. Bạn ơi cho mình hỏi vấn đề ngoài lề này được ko ạ?
    Mình đang muốn tìm cách chống click chuột phải vào quảng cáo Adsense trên site mình. Vậy có cách nào để làm được điều này ko nhỉ?
    Mình đã thử vài plugin trên mạng nó chỉ giúp chống click chuột phải vào nội dung bài viết, còn khi click chuột phải vào quảng cáo Adsense thì vẫn click chuột phải được.
    B có đoạn mã code nào để chống hay có cách nào giúp mình với. Nếu thành công mình trả tiền phí cho b ạ. Mong nhận được sự giúp đỡ của b ạ

      1. Ko b ơi, mình đang muốn hỏi cách chống click chuột phải vào quảng cáo Adsense. Nghĩa là khi khách vào đọc bài viết của mình, thì ko cho họ click chuột phải vào quảng cáo Adsense. Mình có thử vài cách thì chỉ có thể chống click chuột phải vào nội dung bài viết và các vị trí khác thuộc site mình, còn quảng cáo Adsense vẫn có thể click chuột phải. Cảm ơn b

        1. Hữu Thuần

          Mình nghĩ bạn cũng không cần phải vô hiệu hóa nó đâu bởi vì Việc tắt nhấp chuột phải sẽ làm cho trải nghiệm người dùng kém và trải nghiệm người dùng là một phần của chính sách Adsense, cho nên theo mình bạn nên quy định số lần nhấp chuột vào quảng cáo Adsense, chừng một ngày 1 IP 5 Click là được, không ai đâu mà click vào quảng cáo nhiều lần đâu bạn 😛

          1. Cảm ơn b, mà cho mình hỏi thêm câu này nữa ạ.
            Web mình bình thường “Thời lượng phiên” là 1p20s. Nhưng từ khi bị người ta dùng Tool để khiến web mất doanh thu thì “Thời lượng phiên” còn 28s.
            Vậy cho mình hỏi b có biết nguyên nhân vì sao lại bị giảm thời lượng phiên vậy ko? Traffic web thì vẫn giữ ở mức ổn định b ạ.

          2. Phiên nó giống như một phiên chợ hay ca làm việc, hay hiểu đơn giản hơn là người dùng truy cập vào trang Web và thực hiện các tương tác như xem video, xem ảnh, ấn internal link, ấn like,… nếu người ta dùng công cụ để truy cập vào Web tức là nó không có sự tương tác lâu dài, do đó dẫn đến thời lượng phiên của bạn thấp… thời lượng phiên thấp ảnh hưởng đến tỷ lệ thoát và không có lợi cho SEO.

          3. Vậy có cách nào để chặn những traffic ảo đó ko b?
            Web mình từ khi bị chơi xấu tỉ lệ thoát lên tới 92%. Giờ đang đau đầu ko biết làm sao để chặn đây

Leave a Comment

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

Scroll to Top