Code khung viền trang trí cho Blogspot

Một số code khung viền trang trí cho Blogspot

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: 25px; border: 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 !







Đánh giá bài viết

Cảm ơn bạn đã đọc bài viết!

  • Mọi thắc mắc, gợi ý hoặc Báo link hỏng xin chia sẻ bên dưới hoặc Gửi Tin Nhắn
  • Không chèn liên kết quảng cáo, spam khi đăng nhận xét.
  • Không sử dụng những từ ngữ thô tục, vi phạm thuần phong mỹ tục.

Bình luận bài viết này!