HƯỚNG DẪN THIẾT KẾ TEMPLATE CHO BLOGGER (BLOGSPOT): PHẦN 1

Khả năng dịch và trình bày hơi kém, mong các bạn thông cảm. Và sau đây là Part 1

---

Trước khi thiết kế một template, bạn phải có ý tưởng, định hướng về cấu trúc của template mà mình định thiết kế. Nói chung, cấu trúc của các template không hoàn toàn giống nhau. Nhưng, với những hiểu biết về cấu trúc cơ bản bạn có thể dễ dàng tìm được ý tưởng để tạo template cho mình, thiết kế temp và biết cách để thay đổi nó thành một cấu trúc khác.

Một vài phần trong cấu trúc temp hiển nhiên bạn nhìn thấy ở hầu hết các blog: header, footer, và posts sections. Nhưng ngoài ra còn có một vài khu vực (gọi là ô hoặc khối ẩn) không hiện trên màn hình của máy tính, nhưng nó là phần cấu trúc html cần thiết để template có thể hoạt dộng

Bây giờ chúng ta sẽ bắt tay vào việc, cấu trúc cơ bản của 1 template bao gồm các khối của vùng giống như hình dưới:

Chúng ta sẽ đi từ khối lớn nhất đến khối nhỏ nhất:

1. Body: Các khối ngoài cùng chính là Body của template

2. Outer-wrapper: Vùng này bao trùm toàn bộ temp (phần Body được coi gần như là phần ngoài của temp). Nói chung, bạn xây dựng phần wrapper để làm nơi chứa các khối nhỏ hơn ở bên trong nó. Những khối phổ biến nhất nằm trong Outer-wrapper là Header, Content và Footer.

3. Header: Khối này là phần nằm trên cùng nhất của blog của bạn. Nhưng bên trong Header bạn sẽ có những block phụ (sub-block) khác nữa, ví dụ như Header Title, Header Description, và một vài khối khác ví dụ như Adsense banners, Menu bar,...vv. Vậy, để gộp toàn bộ những sub-block này vào bên trong khu vực lớn, khu vực lớn nhất ở phần Header thường xuyên là Header-wrapper sẽ gộp tất cả mọi thứ bên trong nó.

4. Content: Phía dưới Header là Content-wrapper, về cơ bản là khối quan trọng nhất trong tất cả các khối. Ngay phía trong nó là khối Sidebar (có thể có 1,2 hoặc vài khối sidebar) và Main (phần chính) bao gồm posts, comments hoặc một vài ads.

5. Footer: Là phần dưới cùng của temp. Cũng giống như phần Header, bạn cũng sẽ cần Footer-wrapper để chứa các sub-blocks trong phần Footer của temp.

6. Main: Main-wrapper là phần ngoài cùng trong Main section và ở phía trong của Content-wrapper. Phía trong  Main-wrapper là khu vực của post (Post block), khu vực comment (comment block), Date header và một vài widgets được tạo ra từ chức năng "thêm widget trong phần layout của Blogger"

7. Sidebar: là khối chứa toàn bộ các widget ví dụ như: About me, Labels, Archive, Text, HTML, Adsense,... Trong một temp tiêu chuẩn của Blogger, bạn sẽ thường thấy một sidebar duy nhất với loại temp 2 cột (gồm Main và Sidebar). Nhưng thực sự rất dễ dàng để add thêm nhiều sidebar nữa. Bạn sẽ nhìn thấy từ loạt bài hướng dẫn này một khi bạn hiểu cấu trúc của temp, nó thực sự dễ dàng để thêm hoặc cắt bỏ một sidebar vào bên trái hoặc bên phải của Main container.

8. Blog post: Khối này chứa những thứ quan trọng: posts titles, Post, Post Author, Labels,...

Một cách nữa để thấy cấu trúc là từ các điểm phân cấp. Bắt đầu từ phần lớn nhất đến những phần nhỏ bên trong, cấu trúc có thể giống như thế này:

Body

• Outer-wrapper

• Header-wrapper
• Blog Title
• Blog Description
• Other widgets
• Content-wrapper
• Sidebar-wrapper (1,2,3...)
• Main-wrapper
• Date Header
• Posts
• Post Title
• Post Content (or called Post Body)
• Post Footer (Author, Labels, etc)
• Comments
• Feed Link
• Other widgets (mostly ad units)
• Footer-wrapper
• Footer text (disclaimer, copyrights, etc)
• Other widgets

Một khi bạn đã hiểu cấu trúc cơ bản của 1 temp thì việc nghiên cứu về cấu trúc của template code của Blogger sẽ dễ dàng hơn. Nghiên cứu về cấu trúc của code không bao gồm nghiên cứu về HTML và CSS, nhưng sẽ cụ thể hơn về sự sắp xếp, trật tự của code. Sẽ thật kinh ngạc bởi chỉ với 1 chút hiểu biết về lập trình web, bạn có thể tùy biến rất tốt template của bạn chỉ dựa trên sự hiểu biết cấu trúc cơ bản của Blogger template và một ít CSS.

 

MỌI THÔNG TIN VUI LÒNG LIÊN HỆ :   

  

TRUNG TÂM GIẢI PHÁP MẠNG VIỆT NAM - NETWORK SOLUTIONS VIET NAM

Phụ trách thiết kế : Mr.Mika Nguyễn

Call me : 0919.08.3000 - 0927.927.000 - Email :  pro_mikanguyen@yahoo.com.vn 

Phụ trách kỹ thuật và kinh doanh : Mr.Nguyễn Sơn

Call me : 093.363.21.21 -   Email :   Setup247@Gmail.Com
Hỗ trợ yahoo 24/24 : pro_mikanguyen

Website : www.nsvina.com