Tạo khung viền trang trí cho bài viết trong Blog



Dưới đây là một vài dạng khung viền trang trí cho bài viết của bạn thêm sinh động

Chú ý: Các bạn  phải dán code vào chế độ Văn bản (hay chế độ HTML) của khung soạn thảo

Các code đường viền cơ bản cho Blogspot

Dạng nét liền (solid)
<div style="background-color: white; border: 2px solid #FF1493; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; margin-bottom: 1.25rem; overflow-wrap: break-word; padding: 8px;">
<span style="box-sizing: border-box; font-family: arial, helvetica, sans-serif; font-size: 16px;"><span style="box-sizing: border-box; font-weight: 700;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div>


Dạng dấu chấm (dotted)

<div style="background-color: white; border: 2px dotted #FF69B4; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;"><span style="box-sizing: border-box; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 16px;"><span style="box-sizing: border-box; font-weight: 700;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div




Dạng nét đứt (dashed)
<div style="background-color: white; border: 2px dashed #FF4500; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;">
<span style="box-sizing: border-box; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 16px;"><span style="box-sizing: border-box; font-weight: 700;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div>



Dạng nét đôi (double)
<div style="background-color: white; border: 6px double #8A2BE2; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;"><span style="box-sizing: border-box; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 16px;"><span style="box-sizing: border-box; font-weight: 700;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div>



Dạng đường rãnh (groove)
<div style="background-color: white; border: 10px groove salmon; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;">
<span style="box-sizing: border-box; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 16px;">CHÈN NỘI DUNG VÀO ĐÂY</span></div>


Dạng chóp (ridge)
<div style="background-color: white; border: 10px ridge salmon; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;"><span style="box-sizing: border-box; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 16px;"><span style="box-sizing: border-box; font-weight: 700;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div><div style="background-color: white; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; margin-bottom: 1.25rem;"><br /></div>


Dạng đổ bóng bên trong (inset)
<div style="background-color: white; border: 10px inset #8FBC8F; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;"><span style="box-sizing: border-box; font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif; font-size: 16px;"><span style="box-sizing: border-box; font-weight: 700;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div><div style="background-color: white; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; margin-bottom: 1.25rem;"><br /></div>


Dạng đổ bóng bên ngoài (outset)
<div style="background-color: white; border: 10px outset #8FBC8F; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;"><span style="box-sizing: border-box; font-family: arial, helvetica, sans-serif; font-size: 16px;"><span style="box-sizing: border-box;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div><div style="background-color: white; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; margin-bottom: 1.25rem;"><br /></div>


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ụ như thế này:

<div style="background-color: white; border-radius: 25pxborder: 2px solid #FF1493; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; overflow-wrap: break-word; padding: 8px;"><span style="box-sizing: border-box; font-family: arial, helvetica, sans-serif; font-size: 16px;"><span style="box-sizing: border-box;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div>



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

Code như sau :

<div style="background-color: white; border: 2px solid #FF1493; box-sizing: border-box; color: #1b1b1b; font-family: &quot;Open Sans&quot;, sans-serif; font-size: 14px; max-height: 100px; overflow-wrap: break-word; overflow: auto; padding: 8px;"><span style="box-sizing: border-box; color: black; font-family: &quot;arial&quot;; font-size: small;"><span style="font-family: &quot;arial&quot; , &quot;helvetica&quot; , sans-serif;">Chia Sẻ - Kết Nối, Phần mềm, Thủ thuật, Blogspot, Games, Máy tính, Seo website ketnoi89, Chia sẻ - Kết nối, Phần mềm, Thủ Thuật, Phần cứng, Thủ Thuật Blogspot, Hình ảnh, Game, Giải trí, Sức khỏe và đời sống,SEO website, SEO blogspot ,ketnoi89, Chia sẻ - Kết nối, Phần mềm, Thủ Thuật, Phần cứng, Thủ Thuật Blogspot, Hình ảnh, Game, Giải trí, Sức khỏe và đời sống,SEO website, SEO blogspot ,ketnoi89, Chia sẻ - Kết nối, Phần mềm, Thủ Thuật, Phần cứng, Thủ Thuật Blogspot, Hình ảnh, Game, Giải trí, Sức khỏe và đời sống,SEO website, SEO blogspot</span></span></div>


Kết quả:

Chia Sẻ - Kết Nối, Phần mềm, Thủ thuật, Blogspot, Games, Máy tính, Seo website ketnoi89, Chia sẻ - Kết nối, Phần mềm, Thủ Thuật, Phần cứng, Thủ Thuật Blogspot, Hình ảnh, Game, Giải trí, Sức khỏe và đời sống,SEO website, SEO blogspot ,ketnoi89, Chia sẻ - Kết nối, Phần mềm, Thủ Thuật, Phần cứng, Thủ Thuật Blogspot, Hình ảnh, Game, Giải trí, Sức khỏe và đời sống,SEO website, SEO blogspot ,ketnoi89, Chia sẻ - Kết nối, Phần mềm, Thủ Thuật, Phần cứng, Thủ Thuật Blogspot, Hình ảnh, Game, Giải trí, Sức khỏe và đời sống,SEO website, SEO blogspot


Chú ý :

Phần chữ màu đỏ là độ dày của đường viền

Phần chữ màu xanh lá cây là loại đường viền (solid, dotted, dashed,…)

Phần chữ màu hồng là màu đường viền, có thể sử dụng tên gọi của màu (red, black,…), mã màu hex (#ffffff, #ff0000,…) hoặc các loại mã màu khác để thay màu cho đường viền.

Phần chữ màu vàng là phông chữ của Nội dung (Arial , Open Sans , Times .......)

Chúc bạn thành công !
Nguồn: ketnoi89.com
Nguyễn Khoa Đăng

Kết nối, học hỏi, thành công

Đăng nhận xét

Cảm ơn bạn đã ghé thăm blog của mình, hi vọng nội dung bài viết làm bạn hài lòng!

Mới hơn Cũ hơn