Tổng hợp code khung viền trang trí cho Blogspot

Đối với một Blogger, họ luôn muốn blog/web của mình ngày càng đẹp và thân thiện với người đọc hơn. Việc thân thiên giúp người đọc họ tìm thấy thông tin mình mong muốn một cách nhanh nhất và dễ hiểu nhất.

Vậy để làm nổi bật nội dung hoặc một phần nào đó của bài viết bạn có thể sử dụng khung viền cho nội dung đặc biệt đó. THAYHIEUBUNGBU đã sưu tầm các bản hướng dẫn trên internet và thể hiện lại một cách ngắn gọn và dễ hiểu nhất cho các bạn. Các bạn hãy cùng góp ý để bài viết trở lên hoằn thiển nhé. Giờ hãy cùng THAYHIEUBUNGBU tìm hiểu code khung viền trang trí cho Blogspot nào.

1. Code khung viền cơ bản

Dạng nét liền (solid)

< div style="padding:  8px; border:  2px  solid  #FF1493; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Dạng nét đứt (dashed)

< div style="padding:  8px; border:  2px  dashed  #FF4500; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Dạng nét đôi (double)

< div style="padding:  8px; border:  6px  double  #FF69B4; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Dạng đường rãnh (groove)

< div style="padding:  8px; border:  10px  groove  salmon; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Dạng chóp (ridge)

< div style="padding:  8px; border:  10px  ridge  salmon; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Dạng đổ bóng bên trong (inset)

< div style="padding:  8px; border:  10px  inset  #8FBC8F; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Dạng đổ bóng bên ngoài (outset)

< div style="padding:  8px; border:  10px  outset  #8FBC8F; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

2. Code khung nâng cao

Padding

< div style="padding:  8px; border:  2px  solid  #FF1493; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

< div style=" border:  2px  solid  #FF1493; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Padding  là khoảng cách giữa đường viền và nội dung .

Margin

< div style="margin:  40px; padding:  8px; border:  2px  solid  #FF1493; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Margin  là khoảng cách giữa đường viền và phần tử tiếp theo.

Border Radius

< div style="border-radius:25px; padding:  8px; border:  2px  solid  #FF69B4; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Thuộc tính  Border Radius  chỉ độ bo góc của đường viền.

Background color

CHÈN NỘI DUNG VÀO ĐÂY

< div style="text-align:center; color:  #FFFFFF; background-color:  #ff3fa6;   border-radius:25px; padding:  8px; border:  2px  solid  #FF69B4; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Thuộc tính màu nền  Background Color.

Max Height

< div style="  max-height:150px;   overflow:auto; padding:  8px; border:  2px  solid  #FF1493; word-wrap:break-word; "> CHÈN NỘI DUNG VÀO ĐÂY< /div>

Mỗi ngày cố gắng thêm 1%, sau vài tháng bạn đã thấy mình rất khác Để đạt được những mục tiêu trong cuộc đời, mình buộc phải lựa chọn và bỏ bớt, ưu tiên cái gì cần thì làm trước, cái gì thích thì để làm sau. 

Và để có động lực tiến bộ hơn mỗi ngày, chẳng có cách nào đơn giản hơn là áp dụng công thức 1%. Theo đó, chỉ cần mỗi ngày bạn cố gắng thêm 1% thôi thì sau 365 này, bạn đã trở thành phiên bản tốt hơn 37,78 lần hiện tại. 

Chẳng hạn một ngày bạn chỉ cần tập thể dục thêm 1% thôi, sau 365 ngày bạn sẽ khỏe mạnh hơn 37,78 lần. Nếu một ngày bạn học hành chăm chỉ hơn một chút, 365 ngày sau bạn sẽ giỏi hơn 37,78 lần. 

Tuy nhiên, nếu bạn bớt cố gắng đi 1% mỗi ngày, thì sau 365 ngày bạn sẽ yếu kém hơn so với hiện tại 33 lần.

Nếu nội dung quá dài,ta có thể cố định chiều cao của khung bằng cách 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.

Kết hợp code

< div style="border-radius:25px; border:5px  outset  #D1ECFE; ">
< div style="border-radius:25px; border:5px  groove  #63C0FE; ">
< div style="border-radius:25px; border:5px  inset  #94D4FE; padding:10px; ">
CHÈN NỘI DUNG VÀO ĐÂY
< /div>
< /div>
< /div>

Kết hợp loại đường viền  outset,  groove  và  inset  cùng thuộc tính  border-radius.

< p style="padding:8px; border-width:5px; border-color:  #DC143C; border-style:  solid dashed dotted double; word-wrap:break-word; ">   CHÈN NỘI DUNG VÀO ĐÂY  < /p>

Sử dung thuộc tính  border-style  để định dạng loại đường viền trên,dưới,trái,phải.

Background image, nền mờ

< div style="border:  #0033CC  solid  2px; background-image:url('CHÈN LINK HÌNH NỀN VÀO ĐÂY'); word-wrap:break-word; line-height:20pt; text-align:justify; ">
< div style="background-color:  rgba(255,255,255,0.7); margin:  10px; padding:  10px; ">
CHÈN NỘI DUNG VÀO ĐÂY
< /div>
< /div>

rgba(255,255,255,0.7)  là màu sắc của nền mờ với độ mờ  opacity  từ  0  đến  1  (ở đây là  0.7)

GIẢI THÍCH

-  padding:  8px:khoảng cách nằm giữa đường viền và nội dung
-  border:  2px:độ dày của đường viền
-  solid:loại đường viền (phần chữ mầu xanh)
-  #FF1493:màu đường viền (phần chữ mầu hồng)
-  border-radius:25px:bo góc đường viền
-  max-height:150px:chiều cao tối đa của khung viền
-  rgba(255,255,255,0.7):màu sắc với độ mờ opacity  0.7
-  word-wrap:break-word:tự động xuống dòng
-  line-height:20pt:khoảng cách giữa các dòng
- Có thể sử dụng các thẻ  < div> ,  < p> ,  < span>   thay thế thẻ  < div>   tuỳ trường hợp.

-  padding,  border,  margin,  border-radius  đều có thể sử dụng dưới dạng:
+  padding:  10px  :các lề trên,lề dưới,lề trái,và lề phải là  10px
+  padding:  10px 20px  :lề trên và lề dưới là  10px,lề phải và lề trái là  20px
+  padding:  10px 20px 30px  :lề trên là  10px,lề phải và trái là  20px,lề dưới là  30px
+  padding:  10px 20px 30px 40px:lề trên là  10px,lề phải  20px,lề dưới là  30px,lề trái là  40px