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)
Dạng dấu chấm (dotted)
Dạng nét đứt (dashed)
Dạng nét đôi (double)
Dạng nét liền (solid)
<div style="background-color: white; border: 2px solid #FF1493; box-sizing: border-box; color: #1b1b1b; font-family: "Open Sans", 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>
<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: "Open Sans", 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; 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: "Open Sans", 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; font-weight: 700;">CHÈN NỘI DUNG VÀO ĐÂY</span></span></div>
<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 nét đôi (double)
<div style="background-color: white; border: 6px double #8A2BE2; box-sizing: border-box; color: #1b1b1b; font-family: "Open Sans", 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; 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: "Open Sans", 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;">CHÈN NỘI DUNG VÀO ĐÂY</span></div>
<span style="box-sizing: border-box; font-family: "arial" , "helvetica" , 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: "Open Sans", 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; 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: "Open Sans", 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: "Open Sans", 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; 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: "Open Sans", 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: "Open Sans", 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: "Open Sans", 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: 25px; border: 2px solid #FF1493; box-sizing: border-box; color: #1b1b1b; font-family: "Open Sans", 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: "Open Sans", 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: "arial"; font-size: small;"><span style="font-family: "arial" , "helvetica" , 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