MARGIN
Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang, hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.
Bốn giá trị:
margin 10px 5px 0 5px;
Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 10px, 5px, 0px, 5px
Ba giá trị:
margin: 30px 20px 70px;
Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 30px, 20px, 70px, 20px
Hai giá trị:
margin: 30px 20px;
Lề trên và dưới: 30px
Lề trái và phải: 20px
Một giá trị:
margin: 100px;
Tất cả các lề đều được canh một khoảng cách 100px
Nếu bạn không nhớ các vị trí này, hãy sử dụng theo cú pháp sau cho từng vị trí một.
margin-top: 1px;
margin-right: 2px;
margin-bottom: 3px;
margin-left: 4px;
(Các con số ở đây là ví dụ)
PADDING
Padding dùng để kiểm soát khoảng trống giữa nội dung và đường viền của nó. Trong tiếng Anh, từ này có nghĩa là vật hay sự đệm, lót.
Tương tự như margin, padding cũng có thể có 4 giá trị đi phía sau, tương ứng trên, phải, dưới, trái (như chiều kim đồng hồ).
Ví dụ:
padding: 15px 30px 25px 0;
Trên 15px, phải 30px, dưới 25px, trái 0px
Ngoài ra người ta có thể dùng:
padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
(Các con số ở đây là ví dụ)
Bạn đã nắm được chưa, bắt tay vào thay đổi margin và padding đi nào!
Làm sao khi comments mình có thể để lại liên kết địa chỉ blog mình ,thí dụ http://www.trailernew.blogspot.com
ReplyDeletemà người ta chỉ việc click vào chứ không phải copy rồi dán
Khi bạn comment, bạn đã để lại liên kết đến hồ sơ của bạn. Tùy theo thiết lập của người chủ blog đó: có yêu cầu phải là thành viên của blogger.com mới được comment hay không. Nếu hồ sơ của bạn cho phép mọi người xem và bạn cho phép hiển thị danh sách các blog của bạn, thì mọi người chỉ cần click vào đó có thể xem được blog của bạn (một tài khoản có thề có rất nhiều blog). Ví dụ đường link đến hồ sơ của bạn đây. Nhưng bạn chưa cho phép chia sẻ nên tôi không xem được. Hãy xem bài Thiết lập hồ sơ cá nhân để biết!
ReplyDeletehttp://www.blogger.com/profile/14017898992455145085
padding hay margin mà đặt theo % thì tính toán dựa vào cái gì nhỉ? dựa vào height của trang hay dựa vào viewport của trình duyệt? bro nào có thể giải thích hộ vấn đề này không?
ReplyDeletexin cảm ơn!
Nếu đặt theo % thì dựa vào kích thước màn hình. Khi màn hình lớn nó tự động lớn. Nhưng cách này không hay bằng bạn xác định con số cụ thể. Vì màn hình có thể "co giản" khó thiết kế logo cho blog trong trường hợp bạn cần.
ReplyDeleteCám ơn Thủ Thuật Blog!
ReplyDeleteMình đọc bài này nhưng kiến thức về CSS của mình là 0 nên thật sự là không hiểu phải làm sao để sửa chữa :(
Tuy nhiên, mình đã làm cho 2 cột cách ra được rồi. Bằng cách rất thủ công là copy Page Source của một blog khác rồi so sánh con số margin/ padding khác nhau, rồi mò mẫm theo đó để sửa blog.
Cám ơn Thủ Thuật Blog rất nhiều đã chia xẻ những kiến thức làm blog rất hữu ích của anh.
Chúc năm mới 2008 sức khoẻ-hạnh phúc-phát tài!
Thời buổi này tất đất tất vàng, còn ở cỏi trên phải tính bằng milimet. Nhờ Nhân mình cũng nới nhà thêm đựơc tí đỉnh. Còn mở rộng như thuthuatblog đến gần mất chữ đành bó tay.com. Có lẽ do cái template? Còn học hỏi nhiều hè!
ReplyDeleteQuên nhắc thêm: Bạn nào chưa sử dụng cái phím Control + F hãy thử rồi cảm ơn bạn Nhân rối rít, "Biết dzầy em lấy chồng sớm". Mình đã từng mò dò muốn lòi con mắt để tìm vị trí chèn, chỉnh sửa HTML. Có nó -phẻ re!!!
ReplyDeleteBạn ơi, làm sao để cho chiều rộng của phần bài viết trong blog thêm rộng ra?
ReplyDeleteLàm sao để tạo được mục lục của blog theo kiểu phân chia thành các Chuyên mục (giống như các báo mạng), chứ không phải là theo thời gian như hiện giờ trên Blogger?
Cảm ơn bạn nhiều!
Hiện này đối với hầu hết các template của Blogger, chiều rộng của phần viết bài (post)rất hẹp. Mình muốn làm cho phần post này rộng thêm ra, để cột bài viết đỡ bị "gầy và dài dằng dặc", thì mình phải làm sao?
ReplyDeleteHơn nữa, mình rất muốn cải thiện phần Archive. Mình không thích Archive sắp xếp theo ngày tháng. Làm sao để tạo được Archive theo kiểu "Chuyên mục" như của bạn?
Mình rất mong nhận được trả lời hướng dẫn của bạn.
Cảm ơn bạn rất nhiều!
tuyệt vời, vậy làm blogspot có khác gì làm web đâu?
ReplyDeleteBài viết (kèm hình ảnh trực quan, ví dụ cụ thể ) rất dễ hiểu. Cám ơn sự chia sẻ này của bạn nha ! :)
ReplyDeleteHi, anh Nhân, anh Nhân cho em hỏi, em xài template mẫu của blgoger, khi em chèn hình vào wiget tiêu đề thì nó bị như thế này:
ReplyDeletehttp://i1199.photobucket.com/albums/aa470/dangthien1/Banerheader.jpg,
cho em hỏi có cách nào, để em có thể cho cái hình đó nó phủ kín phần header được không?
Trước tiên em bỏ hình nền hiện tại đi. Sau đó vào Layout, chọn cài đặt nâng cao, tìm cái này:
Delete.header-outer {
margin: 0 0 0 0;
background: transparent none repeat scroll 0 0;
}
(Có thể không giống hoàn toàn đoạn code ở trên)
Sau đó sửa lại như sau:
.header-outer {
margin: 0 0 0 0;
background: url(http://1.bp.blogspot.com/-GsIUcUiHXpc/UGVh5EZdgEI/AAAAAAAAAFo/WlME9RsMqC4/s1600/header.jpg) no-repeat center left;
}
Nếu chiều cao hình nền chị che khuất, em thêm height: 200px; thử xem sao, sau khi thêm sẽ như thế này:
.header-outer {
margin: 0 0 0 0;
background: url(http://1.bp.blogspot.com/-GsIUcUiHXpc/UGVh5EZdgEI/AAAAAAAAAFo/WlME9RsMqC4/s1600/header.jpg) no-repeat center left;
height: 200px;
}
Em làm được rồi, cảm ơn sư phụ nhiều, luôn ủng hộ thuthuatblog.com, cảm ơn anh nhiều nhiều
Deletecác bác chi em cach chinh sua phần baner bên cạnh logo với, em muốn baner che hết phần nền như mũi tên trong hình này https://lh6.googleusercontent.com/-9Ek8ANNYZIw/UPdDpWwJzlI/AAAAAAAAAL8/fkC99iTtxsc/w497-h373/hoi%2Bdap.png
ReplyDeleteThanks các bác nhiều