[WPtips] Code đường viền và cách viết một số kiểu khung viền trang trí cho blog WordPress (bản cập nhật)

Trang:123456

---

VII. Một vài code khung viền lặt vặt

Dưới đây là một vài code khung viền lặt vặt mà mình đã viết, nếu các bạn thích thì có thể mang về dùng nhé Cách tuỳ chỉnh với một số thuộc tính trong code như đổi kiểu đường viền, đổi hình nền,… mình đã viết trong các phần trước của bài này rồi nên sẽ không nhắc lại ở đây nữa, mình chỉ cung cấp code cho các bạn mà thôi. Các bạn chỉ cần đọc một lèo từ trang 1 đến trang 4 của bài này là biết tuỳ chỉnh code ngay ấy mà

Trước khi chia sẻ code, Sera xin nhắc lại một lần nữa:

Vui lòng không ăn cắp, không đạo nhái, không đem các bài hướng dẫn của tôi ra khỏi blog Gió Xanh (wptutbyserahwang.wordpress.com) dưới mọi hình thức! Xin hãy tôn trọng chất xám và công sức của tôi! Ăn cắp là *beep*

Các bạn thấy mình ghim dòng ở trên từ trang 1 đến tận trang này là đủ biết mình ức chế với đám ăn cắp bài viết của mình như nào rồi đấy nên hãy tôn trọng công sức của mình nha Rồi, khẩu nghiệp xong thì đến lúc chia sẻ code nào

Kiểu 1:

CODE NỘI DUNG BÀI VIẾT

Bấm vào đây để xem code

<div style="font-family: Arial; font-size: 14px; font-weight: 400; color: black; line-height: 1.5; text-align: justify; word-break: break-word; background: #e6ffe6; border-left: #00b359 4px solid; padding: 13px;">CODE NỘI DUNG BÀI VIẾT</div>

Kiểu 2:

CODE NỘI DUNG BÀI VIẾT

Bấm vào đây để xem code

<div style="font-family: Arial; font-size: 14px; font-weight: 400; color: black; line-height: 1.5; text-align: justify; word-break: break-word; background: white; border-right: solid 1px #b3b3b3; border-top: solid 1px #b3b3b3; border-bottom: solid 1px #b3b3b3; border-left: blue 4px solid; padding: 13px;">CODE NỘI DUNG BÀI VIẾT</div>

Kiểu 3 (Credit):

VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! XIN CẢM ƠN!

Bấm vào đây để xem code

<div style="font-family: Arial; font-size: 18px; color: white; line-height: 1.5; text-align: center; word-break: break-word; background: red; padding: 10px; border-radius: 25px;"><strong>VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! XIN CẢM ƠN!</strong></div>

Kiểu 4:

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Bấm vào đây để xem code

<div style="border: 3px outset #FFDD6D; background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/red-bg.jpg'); background-size: 100%; font-family: Arial; font-size: 16px; font-weight: 400; color: yellow; line-height: 1.5; text-align: justify; word-break: break-word; text-shadow: red 0 0 0.4em, red 0 0 0.4em, red 0 0 .4em;">

<div style="border: 3px groove #FFCC00;">

<div style="border: 3px inset #FFD340; padding: 3%;">

CODE NỘI DUNG BÀI VIẾT

</div>

</div>

</div>

Kiểu 5:

Quý ngài định kiến – Khưu Trì

Quan Lan: “Tuy không biết tại sao em lại yêu tôi, nhưng nếu tôi cũng yêu em, thì hi vọng sau này em vẫn mãi yêu tôi.”

Khoảnh khắc ấy, Trang Lân như bị người ngoài hành tinh điều khiển đầu óc, tự dưng thốt ra một câu: “Em cũng chưa nói em yêu anh bao giờ mà?”

Sau đó cậu tốn mất một giờ để xin lỗi.

Trang Lân: “Em thích anh! Em cực kì thích anh! Thích anh chết đi được! Không có anh em không sống nổi! Tại em thấy anh căng thẳng quá nên muốn đùa chút thôi! Là em thiểu năng! Là em vui đến mức ngớ ngẩn! Tha thứ cho em được không! Quan Lan! Quan Lan ơi! Thầy Quan! Chúng ta đi Paris nhé? Vé máy bay lẫn khách sạn em đã đặt xong hết rồi!”

Quan Lan: “Im ngay, đang ở sân bay đừng làm mất mặt!”

– Trích từ truyện “Quý ngài định kiến” của tác giả Khưu Trì (bản xuất bản), dịch bởi Red de Ed.

Bấm vào đây để xem code

<div style="box-sizing: border-box; padding-top: 60px; line-height: 1.5; font-weight: 400; color: black; word-break: break-word; font-family: Arial;">

<div id="DUONG-VIEN" style="border: dotted black 1px; border-radius: 5px;">

<div id="TIEU-DE" style="margin: 0 40px; font-size: 26px; margin-top: -25px; text-align: center;"><span style="display: inline-block; background: white; padding: 4px;">TIÊU ĐỀ</span></div>

<div style="text-align: justify; padding: 15px; font-size: 16px;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

</div>

 Lưu ý: Code khung viền thứ 5 được mình viết dựa trên font Arial với cỡ chữ tiêu đề là 26px, nếu các bạn thay đổi cỡ chữ của tiêu đề trong code thì các bạn phải điều chỉnh lại giá trị của thuộc tính margin-top trong thẻ div có id là TIEU-DE, đây là thuộc tính dùng để căn chỉnh vị trí của tiêu đề với đường viền. Nếu các bạn muốn tuỳ chỉnh với đường viền bao quanh, các bạn hãy tìm đến thẻ div có id là DUONG-VIEN để tuỳ chỉnh nhé

Xong rồi Bài hướng dẫn viết code khung viền siêu dài (cuối cùng cũng) kết thúc tại đây Hi vọng với bài hướng dẫn này, các bạn sẽ có thể tự viết cho mình những code khung viền xinh đẹp và lung linh nhé

VUI LÒNG KHÔNG SAO CHÉP BÀI VIẾT NÀY! CẢM ƠN CÁC BẠN!

Nguồn bài viết: https://wptutbyserahwang.wordpress.com/

---

Trang:123456

---

Pages: 1 2 3 4 5 6