[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

---

V. Kiểu khung viền 1 lớp có viền bên trong

Gọi là khung viền 1 lớp nhưng thật ra là nó có 2 lớp: 1 lớp nền và 1 lớp đường viền. Nhưng vì nó chỉ có 1 lớp nền nên mình vẫn xếp nó vào kiểu khung viền 1 lớp nền

Trước khi bắt tay vào viết code khung viền, 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*

Tiếp theo là vài điều các bạn cần lưu ý trước khi viết code:

1.Trước khi học viết các kiểu khung viền (Kiểu 1, Kiểu 2, Kiểu 3, Kiểu 4), các bạn phải quay lại Trang 1 của bài hướng dẫn này hoặc bấm vào ĐÂY để đọc các lưu ý cần thiết khi viết và thay code. Đó là những chú ý quan trọng và các bạn BẮT BUỘC phải đọc để code khung viền có thể hoạt động như ý muốn.

2.Cách viết code đường viền và các lưu ý khi viết code đường viền cơ bản mình đã viết rất chi tiết ở Trang 1 của bài này rồi nên mình sẽ không giải thích lại trong phần này nữa. Nếu các bạn chưa đọc thì hãy bấm vào ĐÂY để đọc, và các bạn bắt buộc phải đọc hết toàn bộ nội dung có trong trang 1 để việc tuỳ chỉnh và thay code diễn ra suôn sẻ. Mình đã viết lưu ý rất đầy đủ ở trang 1 rồi mà bạn nào còn hỏi những cái mình viết rồi là mình cho ăn búa nhá

3.Các code khung viền sẽ luôn sử dụng thuộc tính padding (hoặc có cả margin nữa), chi tiết về padding mình đã viết ở trang 1 rồi nên cũng không nhắc lại ở phần này nữa.

4.Ở trang cuối cùng của bài này mình có tổng hợp một số hình ảnh dạng pattern (pattern hiểu đơn giản là dạng hoạ tiết lặp lại) và ảnh động làm nền cho bài viết, các bạn có thể bấm vào ĐÂY để xem nhé

Nào, giờ thì chúng ta sẽ bắt đầu với code định dạng bài viết cơ bản sau:

<div style="font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Như mình đã nói ở trên, thật ra kiểu khung viền này có 2 lớp, bao gồm 1 lớp nền và 1 lớp đường viền. Kiểu khung viền này khác với kiểu khung viền số 1 ở chỗ là lớp đường viền của nó không bao quanh lớp nền mà nằm ở bên trong lớp nền. Điều này đồng nghĩa với việc mình phải sử dụng 2 cặp thẻ định dạng để viết code khung viền kiểu này, 1 cặp thẻ dùng để viết code lớp nền, 1 cặp thẻ dùng để viết code lớp đường viền. Thông thường, nếu không thêm các thuộc tính đè lớp khác thì cặp thẻ định dạng viết sau sẽ hiển thị đè lên cặp thẻ định dạng viết trước. Do đó, mình sẽ viết cặp thẻ xác định lớp nền trước, rồi mới viết cặp thẻ xác định lớp đường viền sau. Bởi vì lớp đường viền nằm bên trong lớp nền, do đó mình sẽ phải lồng code đường viền vào bên trong code nền. Ở đây mình có sẵn 1 cặp thẻ định dạng của code định dạng bài viết cơ bản rồi nên mình sẽ dùng nó để viết code cho lớp nền. Đối với kiểu khung viền 2 lớp (kiểu có 1 lớp nền ở dưới và 1 lớp nền mờ đè lên) cũng vậy, mình sẽ luôn sử dụng code định dạng cơ bản để viết code cho lớp nền dưới cùng để tiết kiệm thời gian viết code, nếu có nhiều thẻ div quá thì nhìn cũng hoa mắt lắm

Cách viết code đường viền và code nền 1 lớp mình đã viết ở Trang 1 và Trang 2 rồi nên sẽ không nhắc lại ở phần này nữa. Nếu các bạn chưa đọc thì hãy bấm vào ĐÂY để đọc cách viết code đường viền, và bấm vào ĐÂY để đọc cách viết code nền 1 lớp nhé Nhớ là phải đọc kĩ và đọc hết toàn bộ nhé

Giờ thì mình sẽ giải thích cách thức viết kiểu khung viền này cho các bạn xem nhé

Mình sẽ bắt đầu viết code nền 1 lớp với code định dạng có sẵn ở trên. Lúc này, code của mình sẽ có dạng như sau:

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 20px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Rồi, bây giờ mình sẽ viết 1 code đường viền mới, vì mình đã viết các thuộc tính định dạng cơ bản như font, cỡ chữ, màu chữ,… ở code nền 1 lớp rồi nên mình sẽ không viết lại những thuộc tính đó trong code đường viền nữa. Do đó, sau khi xoá hết các thuộc tính định dạng cơ bản đi thì lúc này code đường viền của mình sẽ trở nên ngắn gọn như thế này:

<div style="padding: 14px; border: dashed 2px #6c008a;">CODE NỘI DUNG BÀI VIẾT</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Bây giờ mình sẽ lồng code đường viền vào trong code hình nền nhé Nếu là code khung viền 1 lớp cơ bản (chỉ có 1 cặp thẻ định dạng), các bạn sẽ dán đè code bài viết lên dòng chữ CODE NỘI DUNG BÀI VIẾT đúng không nào? Nhưng kiểu khung viền này lại có 2 lớp, thế nên chúng ta sẽ dán đè code đường viền lên dòng chữ CODE NỘI DUNG BÀI VIẾT ở code hình nền. Đó chính là cách lồng code đường viền vào trong code hình nền Tức là lúc này, code của mình sẽ có dạng như sau (mình sẽ tô màu nền để các bạn phân biệt code đường viền và code hình nền nhé):

<div style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 20px; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div style="padding: 14px; border: dashed 2px #6c008a;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Rồi, bây giờ mình sẽ viết mẫu code khung viền kiểu này cho các bạn xem nhé Mình sẽ viết mẫu với nền là hình ảnh nhé

<div id="HINH-NEN" style="background: url('link hình ảnh làm nền'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="DUONG-VIEN" style="padding: 2.5%; border: kiểu viền độ dày viền màu viền;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Với code mẫu ở trên, mình đã gán id cho các cặp thẻ định dạng để các bạn dễ tìm kiếm khi muốn tuỳ chỉnh. Nghĩa là khi các bạn muốn tuỳ chỉnh gì đó với hình nền, các bạn sẽ thêm bớt thuộc tính vào thẻ div có id là HINH-NEN, nếu các bạn muốn tuỳ chỉnh với đường viền, các bạn sẽ thêm bớt thuộc tính vào thẻ div có id là DUONG-VIEN.

Ở bài hướng dẫn viết code khung viền cũ, mình dùng cả thuộc tính margin lẫn padding cho lớp nền gần với nội dung bài viết nhất. Nhưng trong bài hướng dẫn mới này, mình chỉ dùng thuộc tính padding mà thôi, còn khi nào dùng margin thì các bạn có thể quay lại phần hướng dẫn viết kiểu khung viền số 1 hoặc bấm vào ĐÂY để đọc lại. Do mình dùng padding nên thuộc tính này sẽ xuất hiện ở cả lớp nền gần với nội dung văn bản nhất lẫn các lớp nền bị nó đè lên. Trong code mẫu, mình mặc định padding cho lớp nền (tức là thuộc tính padding nằm trong thẻ div có id là HINH-NEN) là 2% có nghĩa là khoảng cách tính từ mép hình nền vào đến mép đường viền là 2%. Còn nếu các bạn muốn tăng giảm khoảng cách tính từ mép đường viền vào đến bên trong nội dung bài viết thì các bạn sẽ điều chỉnh lại giá trị của thuộc tính padding nằm trong thẻ div có id là DUONG-VIEN, ở đây mình mặc định padding là 2.5%. Do mình ít khi thay đổi theme nên mình thường dùng đơn vị % để tính giá trị của thuộc tính padding để code khung viền có thể hiển thị đẹp trên cả thiết bị di động lẫn laptop hoặc máy tính để bàn. Thế nên các bạn không nhất thiết phải dùng đơn vị % như trong code mẫu mà có thể dùng đơn vị px. Nếu các bạn hay thay đổi theme thì các bạn nên tính theo đơn vị px (tốt nhất là nên để giá trị padding từ 15px trở xuống) thì khoảng cách giữa các lớp nền sẽ ít bị xê dịch hơn khi đổi theme mới.

Mình sẽ thực hiện tuỳ chỉnh với vài ví dụ cho các bạn xem nhé

Ví dụ 1: Từ code mẫu ở trên, mình sẽ thay hình nền và thiết lập đường viền cho code. Để thay hình nền, mình sẽ tìm đến thẻ div có id là HINH-NEN và thay link hình ảnh vào dòng chữ link hình ảnh làm nền trong code. Để thay đường viền, mình sẽ tìm đến thẻ div có id là DUONG-VIEN và thực hiện tuỳ chỉnh với thuộc tính border trong thẻ này. Mình có link hình ảnh làm nền và thuộc tính border như sau:

• Link ảnh:

https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg

• Thuộc tính border:

border: dashed 2px #6c008a;

Bây giờ mình sẽ thay link ảnh và thuộc tính border ở trên vào code mẫu nhé:

<div id="HINH-NEN" style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="DUONG-VIEN" style="padding: 2.5%; border: dashed 2px #6c008a;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Ví dụ 2: Tiếp tục với đoạn code hoàn chỉnh (đã có nền và đường viền) ở ví dụ 1, bây giờ mình muốn bo tròn 4 góc đường viền. Mình sẽ tìm thẻ div có id là DUONG-VIEN trong code và thêm thuộc tính border-radius vào thẻ này. Lúc này, code của mình sẽ như sau:

<div id="HINH-NEN" style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="DUONG-VIEN" style="padding: 2.5%; border: dashed 2px #6c008a; border-radius: 12px;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Ví dụ 3: Tiếp tục với đoạn code hoàn chỉnh (đã có nền và đường viền) ở ví dụ 1, bây giờ mình muốn thêm đường viền bao quanh hình nền. Mình sẽ tìm thẻ div có id là HINH-NEN trong code và thêm thuộc tính border vào thẻ này. Lúc này, code của mình sẽ như sau:

<div id="HINH-NEN" style="border: dotted 2px #6c008a; background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="DUONG-VIEN" style="padding: 2.5%; border: dashed 2px #6c008a;">CODE NỘI DUNG BÀI VIẾT</div>

</div>

Kết quả:

CODE NỘI DUNG BÀI VIẾT

Ví dụ 4: Tiếp tục với đoạn code hoàn chỉnh (đã có nền và đường viền) ở ví dụ 1, bây giờ mình muốn tạo thanh cuộn dọc. Mình sẽ tìm thẻ div có id là DUONG-VIEN trong code và thêm các thuộc tính border-radius, overflow, và max-height vào thẻ này. Lí do mình không tuỳ chỉnh với thẻ div có id là HINH-NEN là vì nếu mình thêm các thuộc tính tạo thanh cuộn dọc vào thẻ này, thanh cuộn sẽ xuất hiện ở bên ngoài đường viền, và như thế thì không đẹp cho lắm

Để ví dụ dễ quan sát thì mình sẽ thay dòng chữ CODE NỘI DUNG BÀI VIẾT bằng một đoạn code nội dung văn bản khác (đoạn code này sẽ được tô màu xanh nhạt để phân biệt với code khung viền). Lúc này code của mình sẽ có dạng như sau:

<div id="HINH-NEN" style="background: url('https://wptutbyserahwang.files.wordpress.com/2020/04/galaxy.jpg'); padding: 2%; font-family: Arial; font-size: 16px; font-weight: 400; color: black; text-align: justify; line-height: 1.5; word-break: break-word;">

<div id="DUONG-VIEN" style="padding: 2.5%; border: dashed 2px #6c008a; max-height: 180px; overflow: auto; border-radius: 1px;">

<p style="text-align: justify;">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."</p>

<p style="text-align: justify;">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à?"</p>

<p style="text-align: justify;">Sau đó cậu tốn mất một giờ để xin lỗi.</p>

<p style="text-align: justify;">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!"</p>

<p style="text-align: justify;">Quan Lan: "Im ngay, đang ở sân bay đừng làm mất mặt!"</p>

<div style="font-size: 14px; text-align: center; padding-left: 28%;"><span style="color: #808080;"><em>– 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.</em></span></div>

</div>

</div>

Kết quả:

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.

Xong rồi  Hướng dẫn viết kiểu khung viền số 2 kết thúc tại đây Các bạn có thể bấm sang Trang 4 của bài này để xem hướng dẫn viết kiểu khung viền số 3 (khung viền 2 lớp) 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