Đố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>
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>
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>
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>
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>
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>
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>
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="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>
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 .
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>
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.
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>
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.
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.
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>
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.
Để đạ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.
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>
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.
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.
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>
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)
là màu sắc của nền mờ với độ mờ
opacity
từ
0
đến
1
(ở đây là
0.7)
-
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
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
