Mục lục seri các bài viết hướng dẫn tự thiết kế blogspot:
- Xây dựng một trang blogspot như trang blogvuicuoilen [giới thiệu]
- Hướng dẫn tạo một trang blogspot [blogger]
- Tự thiết kế giao diện cho blogspot [dành cho người không biết code]
- Sắp xếp bố cục trong blogspot và thêm tiệních cho các layout
- Thiết kế phần header cho blogspot
- Thiết kế menu cho blogspot
- Tùy chỉnh phần hiển thị nội dung của blogspot
- Tùy chỉnh sidebar cho blogspot
- Tùy chỉnh footer cho blogspot
- Thêm nút Share mạng xã hội cho blog của bạn
- Xây dựng giao diện mobile cho blogspot
- Thêm nút cuộn trang bằng CSS cho Blogspot
- Tốiưu giao diệnđể blogspot chuẩn SEO
Thêm tiện ích cho các layout [thẻ div]
Nếu các bạn đã vọc vạch một chút về blogspot thì khi vào phần Bố cục các bạn sẽ thấy có khối giao diện và có phần Thêm tiện ích ở trên các khối đó. Khi click vào Thêm tiện ích các bạn sẽ thêm được một số phần mà Blogspot cung cấp sẵn. Nhưng đối với code mà chúng ta tự làm ban đầu sẽ không có phần Thêm tiện ích này. Để thêm được tiện ích vào các layout [thẻ div] rất đơn giản thôi.Đầu tiên các bạn vào Chỉnh sửa HTML, sau đó tìm các đoạn thẻ
Trong đó
Class='chan-trang' - đoạn div đó sẽ có lớp CSS là chan-trang
id='chan-trang' - tên của khối giao diện sẽ hiển thị trong phần Bố cục
Ví dụ:
Giờ vào bố cục và kiểm tra thử nhé.
Sắp xếp bố cục trong Blogspot
Phần Bố cục là phần rất trực quan để các bạn có thể thêm thành phần mới vào web mà không cần phải động tới code nhiều. Thế nhưng đôi khi phần Bố cục này nhìn rất rối mắt thậm chí bạn còn không biết phần nào với phần nào, vì thế bạn nên sắp xếp Bố cục cho giống với giao diện web để dễ nhìn, dễ nhớ, dễ chỉnh sửa. Để chỉnh Bố cục cho giống giao diện web trước hết chúng ta xem lại giao diện web mà ta định làm nhé.Vào Chỉnh sửa HTML, tìm đến thẻ Thêm đoạn code sau vào trước Thêm code sau vào dưới ]]>
]]>
Ở giữa đoạn và ]]>sẽ là code CSS của layout nhé
Code css của layout có cấu trúc như sau:
#layout .ID-class-div {Ví dụ mình để code như thế này:
width: 30%;
float: right;
}
#layout .dau-trang {Khi vào Bố cục nó sẽ hiển thị như sau:
width: 100%;
}
#layout .logo {
width: 300px;
float: left;
}
#layout .dau-trang-phai {
width: 400px;
float: right;
}
#layout .menu {
width: 97%;
padding-top: 150px;
}
#layout .than-web {
width:100%;
}
#layout .than-web-trai {
width: 400px;
float: left;
}
#layout .than-web-phai {
width: 300px;
float:right;
}
#layout .chan-trang {
width: 97%;
}
Các bạn chú ý là khi chỉnh sửa CSS phần Bố cục này sẽ không ảnh hưởng đến giao diện trên web nhé. Nó chỉ ảnh hưởng đến giao diện trong phần Bố cục thôi.
Mọi người tùy chỉnh sắp xếp layout theo ý thích nhé, không nhất thiết phải làm như mình đâu. Vậy là xong phầnsắp xếp bố cục trong blogspot và thêm tiện ích cho các layout.Các bạn có gì không hiểu để lại comment mình sẽ giải đáp nhé!