Đây là một số code trong các mẫu mặc định của blogger mà có thể nhiều người chưa biết. Các code này được blogger sử dụng để trang trí phần chân mỗi bài viết trong blog của bạn.

Với tất cả các mẫu Simple của blogger cuối mỗi bài đăng sẽ có một hệ thống các thành phần phụ như: tên tác giả, tên nhãn, nút chia sẻ, nút đánh giá bài viết,... bạn có thể xem chúng ở hình dưới.

Trước đây mình đã từng viết 1 bài viết hướng dẫn thiết kế template blogger. Sau 1 thời gian trôi đi, bài viết được copy ra rất nhiều nơi nhưng dường như hiệu quả mà nó đem lại vẫn chưa như mình mong đợi nên hôm nay mình viết bài viết này vẫn với mục đích giúp bạn "Tự tạo nên website mang phong cách riêng của mình" nhưng sẽ ở mức độ chi tiết hơn rất nhiều.

Cấu trúc 1 trang web

1. Một số lưu ý trước khi bắt đầu

» Để có thể tự thiết kế ra giao diện mang phong cách riêng của chính mình thì đòi hỏi bạn phải hiểu về css. Nếu không biết gì về css thì bạn hãy đọc hết bài viết TỰ HỌC CSS TOÀN TẬP để có thể hình dung ra CSS là gì. Và mình khẳng định lại 1 lần nữa. Chỉ khi bạn biết CSS bạn mới có thể thiết kế ra được 1 website mang phong cách riêng của mình.

» TUYỆT ĐỐI KHÔNG THIẾT KẾ NGAY TRÊN TRANG BLOG CHÍNH CỦA MÌNH. Hãy tạo 1 trang blog mới và thiết kế trên đó. Sau khi hoàn thành hãy đem giao diện đó về sử dụng ngay trên blog chính của mình.

» Trên bài viết này mình sẽ không đề cập nhiều đến css. Mọi vấn đề liên quan đến trang trí blog bạn đọc qua bài viết TỰ HỌC CSS TOÀN TẬP và tùy biến theo ý của mình nha.

» Trước khi thiết kế bạn nên phát thảo ra giấy về hình dạng trang blog mình mong muốn sẽ như thế nào. Việc này giúp bạn định hình được việc chính mình cần phải làm là gì, tránh lang mang không biết phải làm gì.

» KIÊN NHẪN LÀM TỪ TỪ. Không thể làm xong 1 website chỉ trong vài tiếng được đâu bạn àh. Với khả năng hiện tại của mình thì nhanh lắm mình cũng phải mất 2 - 3 ngày mới xong được 1 trang web, nên đòi hỏi bạn phải kiên nhẫn 1 tí. 

 2. Chuẩn bị:

Bạn cần phải trả lời hết các câu hỏi sau: 

» Bạn đã phát thảo giao diện web mình mong muốn ra giấy chưa? Nếu chưa thì lấy giấy viết ra phát thảo sơ bộ đi. Mình đảm bảo chỉ với trí tưởng tượng thì bạn không thể thiết kế được như ý đâu.

» Phát thảo xong rồi đúng không? Vậy blog của bạn có bao nhiêu module chính tất cả? Module chính là module sẽ chứa các module nhỏ bên trong. Header (phần đầu blog), 2 Sidebar (2 thanh công cụ trái phải), Main (module chứa bài viết), Footer (Chân blog)... còn gì nữa không? Xem hình bên dưới bạn sẽ hiểu module chính là gì. 

Theo hình bên trên thì mình muốn blog của mình bao gồm 3 phần chính: 

» Ở đầu trang là header.
» Ở giữa gồm 3 phần là 1 sidebar bên trái (sidebar1) 1 sidebar bên phải (sidebar2) và phần nội dung bài viết ở giữa.(post)
» Ở cuối trang là footer.

Tất nhiên đây chỉ là những module lớn. Bên trong mỗi module lớn này sẽ còn được chia thành nhiều module nhỏ nữa.

3. Tiến trình thiết kế template blogger: mỗi thành phần bên dưới mình sẽ đưa vào 1 bài viết và hướng dẫn chi tiết hơn. Bạn nên làm từng bước từ trên xuống dưới đừng đốt giai đoạn, xảy ra lỗi mình không chịu trách nhiệm đâu àh.

1. Cấu trúc cơ bản của template blogger.
2. Tạo thẻ meta description và title cho website.
3. Xây dựng cấu trúc website của bạn.
4. Sidebar toàn tập.
5. Header toàn tập.
6. Main toàn tập. (Bài quan trọng nhất)
7. Footer toàn tập.

4. Túm lại:
Về cơ bản template blogspot chỉ có bao nhiêu đó thôi. Ngoài ra cũng chẳng còn gì nữa.
Tiếp theo là bạn áp dụng những thủ thuật khác để tạo ra những nét đặc trưng riêng cho blog của mình là được rồi.

Xem qua chắc chắn bạn sẽ nghĩ trong đầu "blog gì mà thấy gê" :D nhưng thật sự thì không gê đâu bạn. Blog hiện tại mình đang dùng cũng từng trãi qua những lúc ghê như zậy đó.

Nguyên nhân nhìn thấy gê là do trong bài hướng dẫn này mình chưa xài nhiều những thuộc tính css. Bài viết này mình chỉ đề cập đến việc tạo ra và nắm bắt được cấu trúc template của mình thôi.

Việc trang trí là sao cho đẹp là ở chổ bạn có thật sự sáng tạo khi kết hợp các thuộc tính css lại với nhau hay không thôi.

 5. Bonus 1 số class và id mặc định blogger tạo ra.
Bằng cách chỉnh sửa css cho các class và id này bạn cũng sẽ tùy biến được khá nhiều thứ đó.

  h1 /* đây là thẻ chứa tiêu đề của blog */
.description /* đây là class chứa mô tả mặc định của blog */
.post /* đây là class post chỉ chứa nội dung của bài viết (không có comment) */
.post h3  /* đây là thẻ h3 của class post chứa tiêu đề bài viết */
.comments /* đây là class chứa nội dung toàn bộ comment */
.widget h2  /* đây là thẻ h2 của class widget chứa tiêu đề các tiện ích */
.widget-content /* đây là class chứa nội dung các widget (không có tiêu đề) */

Và vấn đề cuối cùng. Nếu quá trình thiết kế có vấn đề gì thì đừng ngại để lại comment bên dưới mình sẽ hồi âm trong thời gian sớm nhất có thể. Chúc bạn thành công và có được một ngôi nhà trực tuyến như mơ ước! 

Tác giả bài viết: Võ Quốc An