[Tut] Tự thiết kế theme không cần biết HTML - P2

Bây giờ, chúng ta tìm hiểu về cơ cấu của mẫu Blogger:
Chúng ta xem hình ở dưới, một mẫu cơ bản container bao gồm các khối như dưới:
Chi tiết cụ thể bao gồm:

1. Body: là toàn bộ viền bao outer các khối mẫu blog của bạn (nói một cách đơn giản nó là toàn bộ những thứ mà bạn nhìn thấy hiển thị trên màn hình).
   
   
   
2. Outer-wrapper: nội dung này bao trùm toàn bộ mẫu blog (Body giống như là phần bên ngoài mẫu blog). Nói chung, bạn thiết kế một wrapper để chứa nhiều các block nhỏ trong đó. Các block chung hầu hết chứa trong Outer-wrapper là các Header, Content, và Footer.
3. Header: block này là phần trên cùng của hầu hết các blog (cái tên header đã nói lên điều này một cách rõ ràng). Nhưng bên trong Header bạn có thành phần phụ khác đó là Header Title, Header Descripaion và các thành phần khác giống như banners quảng cáo, thanh trình đơn menu bar,,,. Do vậy, để chửa toàn bộ các blocks phụ nói trên trong đó thì Header nhất thiết phải được thiết kế đủ rộng để chứa chúng.
4. Content: nằm dưới Header là Content-wrapper – đây là phần quan trọng hơn cả, chứa các thành phần quan trọng như Sidebar containers (1,2 hoặc nhiều sidebars) và phần nội dung chính (phần chứa các bài viết, nhận xét hoặc các quảng cáo).
5. Footer: là phần nằm ở phía dưới cùng của hầu hết các mẫu. Giống như Header section, bạn cũng cần phải thiết kế Footer-wrapper để chứa các nội dung phụ trong Footer section.
6. Main: Main-wrapper là thành phần chính nằm trong Content-wrapper. Bên trong Main-wrapper là phần bài viết, nhận xét, ngày tháng đăng bài và các tiện ích khác được tạo từ lựa chọn “Add Page Element”.
7. Sidebar: là thành phần bao gồm các tiện ích - About Me, Labels, Archive, Text, HTML, Adsense. Trong mẫu cơ bản của Blogger template, bạn thường thấy các mẫu có 1 sidebar - hoặc 2-column (Main and Sidebar). Nhưng bạn cũng có thể dễ dàng thêm các cột Sidebar vào mẫu Blogger. Bạn cần phải hiểu rõ về chúng, trước hết là về cơ cấu tổ chức của các mẫu Blog để có thể quyết định thêm vào bên trái hay bên phải Main container các Sidebar để tạo thành mẫu 2 sidebars – hoặc mẫu 3-column.
8. Blog Post: Đây là phần bài viết của bạn hiển thị bao gồm Tiêu đề bài viết, bài viết, tác giả, Labels, ...

Và code HTML cho theme cũng sẽ bao gồm các thành phần này. Thường thì các code cho từng phần sẽ có dạng:
/*------------BODY---------------*/

................................
Cũng vì có cấu trúc ấy mà ta có thể dễ dàng copy code của theme này sang theme khác, tức là ko có khả năng tự viết HTML thì ta cóp nhặt từ theme này theme kia (những theme sẵn có tìm được trên mạng thôi) cóp đoạn code dùng để tùy chỉnh cho từng phần, ví dụ bạn có mẫu A là mẫu gốc, bạn thích phần head của mẫu B thì bạn thay đoạn code
/*------------HEAD---------------*/

................................
của mẫu A bằng đoạn code của mẫu B.
Quan trọng là phải phối với nhau sao cho đẹp. Tùy vào code mà ta còn tùy chỉnh lại được cả các thông số khác vì mã HTML ngoài các ký hiệu còn có cả phần chữ và sử dụng TA nên ta có thể dễ dàng nhận biết và tùy chỉnh lại. Ví dụ như đoạn code này:
/* ---------------HEADER------------------*/
#header {
    background:url(http://lh5.ggpht.com/_TkFAArOawcE/TEhlFHj0pXI/AAAAAAAAAUM/j3OYxB2BY3A/header.jpg);
    width: 1017px;
    height: 283px;
    color: transparent;
    font-size: 11px;
    margin: 0;
    padding: 0;
    overflow: hidden;
}
Ta có thể dễ dàng nhận thấy link (được tô đỏ) là ảnh cho phần header, vậy thì, ta cũng có thể thay thế link này bằng 1 link khác tùy thích.
Vậy thôi, mặc dù ko hiểu về cấu trúc của từng code HTML nhưng ta hoàn toàn có thể kết hợp để tạo một theme cá tính cho riêng mình.
Chúc các bạn thành công!