Đóng khung cho bài viết

Đóng khung cho bài viết Đối với template của blog mình thì việc đóng khung cho bài viết cũng như các đối tượng khác là cần thiết. Sau 1 thời...

Đóng khung cho bài viết

Đối với template của blog mình thì việc đóng khung cho bài viết cũng như các đối tượng khác là cần thiết. Sau 1 thời gian làm theo chỉ dẫn của tác giả YoboY trên blog southernspeakers.net (thanks YoboY, các thủ thuật của anh rất hay và cần thiết cho mình) cùng với làm quen với một số code css cơ bản, mình dịch và tổng hợp lại để tiện bề sử dụng.

Bước 1:
Tạo bài viết mới bằng cách vào Dashboard - Posting - New Post, chọn thẻ Edit HTMLvà dán code sau vào:
<div style="border: 1px solid red; padding: 10px;">
Bài viết
</div>
Bước 2:
Chuyển sang thẻ Compose: sẽ thấy có 1 khung bao quanh "Bài viết", lúc này đơn giản chỉ cần đưa nội dung cần thiết vào.
Ngược lại, ta cũng có thể soạn thảo bên thẻ Compose trước sau đó chuyển qua Edit HTML: thêm thẻ mở <div> ở trên và thẻ đóng </div> ở dưới bài viết là được.
Tùy biến:
Chúng ta có thể tùy biến các thuộc tính của dòng code này:
<div style="border: 1px solid redpadding: 10px;">
chẳng hạn như sau:

Color: có thể sử dụng các màu chuẩn như: white, red, black, lime, yellow, orange, aqua (như bài viết này)... hoặc sử dụng mã màu hex code (lựa màu tùy thích ở đây)

Width: độ dày đường khung, thường 1px là vừa.

Style: thường dùng là 'Solid', ta có thể thay đổi bằng các thược tính sau: dotted, dashed, double, groove, ridge, inset và outset

Padding: cần thiết để nội dung khỏi tràn đụng vào khung, có thể thay đổi các giá trị từ 0 đến 10px

Ngoài ra, ta có thể tùy biến thêm bằng cách đưa vào một số thuộc tính định dạng văn bản trong khung như:

Background-color: màu nền
Color: màu chữ, VD: color: orange; hoặc color: #6acfff;
Text-align: canh lề bài viết, có thể: left, center hay right.
Margin: tùy ý
Ví dụ:
<div style="border: 1px solid orange; color: aqua; margin: 10px 0; padding: 10px; text-align: center;">
Bài viết
</div>

COMMENTS

BLOGGER: 7
  1. Cảm ơn bài viết của bạn,mình sẽ thử

    ReplyDelete
  2. @Lê Tấn Thông: Không có chi bạn. Chúc bạn thành công.

    ReplyDelete
  3. Cảm ơn bác về cái khung này,em loay mãi với khung của thanh bên

    ReplyDelete
  4. http://hienonline.blogspot.com/
    Bạn cho mình lời khuyên về blog mình được không

    ReplyDelete
  5. cảm ơn bạn, m đã dùng và thấy ok ^^

    ReplyDelete

Name

Banner,2,Code,8,CSS,2,DNS cho Blogger,6,Favicon,1,HTML,6,JavaScript,2,Kiếm tiền với Youtube,1,Labels,1,Mật khẩu cho bài đăng,1,Nhãn,1,Search Google,1,Template Blogger,1,theme blogger,1,Thủ thuật Blogger,45,Thủ thuật Youtube,2,Tiệc ích Password,3,Tiện ích,9,Tiện ích bài viết liên quan,2,Trang,1,Wifi,1,Xóa bản quyền,1,
ltr
item
Khám Phá Blogger: Đóng khung cho bài viết
Đóng khung cho bài viết
Khám Phá Blogger
https://blogger.affimart.com/2012/04/ong-khung-cho-bai-viet.html
https://blogger.affimart.com/
http://blogger.affimart.com/
http://blogger.affimart.com/2012/04/ong-khung-cho-bai-viet.html
true
4203661997903332293
UTF-8
Loaded All Posts Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS PREMIUM CONTENT IS LOCKED STEP 1: Share to a social network STEP 2: Click the link on your social network Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy