Minh Vũ's Blog

Just another WordPress.com weblog

Tìm hiểu cấu trúc mã code của mẫu Blogger

Posted by xpss on 08/11/2009

Thiết kế mẫu Blogger – Tutorial 2: Tìm hiểu cấu trúc mã code của mẫu Blogger

Đây là một cấu trúc mã (code) của mẫu Blogger theo một cách nhìn đơn giản nhất. Tôi sử dụng  Generic Blogger template làm ví dụ tham khảo, nhìn chung là các mẫu khác cũng có cấu trúc tương tự nên bạn không phải băn khoăn về vấn đề các mẫu tham khảo.

image

Theo hình vẽ tôi chia một mẫu Blogger ra thành 3 phần và chỉ các dòng đầu của các phần để các bạn tiện theo dõi và tránh  rắc rỗi nhầm lẫn.

Để thấy rõ, chi tiết  hơn về code, hãy  download Generic Blogger Template để tham khảo.

Section 1:

Là Tiêu đề ‘header‘ của code. Về cơ bản đó là các thông tin về mã code và title của Blog . Thực ra bạn không phải lo lắng gì nhiều về bất cứ điều gì trong phần này. Đó chỉ là Tiêu đề chuẩn của bất cứ mẫu Blog nào. Bạn chỉ thực sự quan tâm tới nó khi thêm các dòng code về  meta tags (thêm thông tin về blog của bạn để phục vụ công việc SEO).

Section 2:

Đây là phần CSS Styling Section. CSS là viết tắt của Cascading Style Sheets, một ngôn ngữ web dùng để điều khiển các style của HTML. Đây là mục mà bạn cần quan tâm nhất để phục vụ mục đích thay đổi, chỉnh sửa các mẫu Blogger hiện có hoặc thiết kế một mẫu mới.     Cho dù đây là một ngôn ngữ code của web nhưng bạn vẫn có thể làm được rất nhiều điều về thiết kế mẫu nếu bạn hiểu về cấu trúc của phần này mà không nhất thiết phải biết thông thạo về HTML and CSS. Chúng ta sẽ tìm hiểu kỹ hơn về phần này trong bài sau.

Section 3:

Đây là phần thân (Body )  hay còn gọi là phần Dữ liệu code – là phần quan trọng nhất nạp  các nội dung từ cơ sở dữ liệu Blogger và đặt chúng vào đúng vị trí trong blog như các bạn thấy ở bất cứ Blog nào. Đây cũng chính là phần mà để chỉ đinh để cho blog của bạn có sắp xếp phần tử nào trước – Header, Sidebars, Main, Post, Footer, vv… Nhưng thực ra nó không thiết lập sự ra đời, hình thành cúng như hình hài của blog như thế nào trên mạng internet (bởi vì phần tử điều khiển đó là CSS styling section).
Cũng giống như phần 1. Bạn cũng không cần lo lắng gì nhiều về phần này, bạn chỉ cần biết chút ít để thực hiện các việc  mở rộng, thêm các tiện ích mà không thể sử dụng nút Add Page Element, giống như việc thêm các nút bookmarking buttons – Digg, AddThis, RSS buttons; hoặc như việc đặt mã Google Analytics để theo dõi visitor tới blog của bạn và nhiều việc khác nữa. Đây là phần hướng dẫn đơn giản nhất để bạn có thể thêm các thức vào mẫu blog của bạn.

***************************************
Hướng dẫn tiếp theo: Sẽ giúp bạn hiểu rõ hơn về mẫu Blogger thông qua bài hướng dẫn về cấu trúc của CSS Styling Section.

Nguồn http://www.ourblogtemplates.com

Gửi phản hồi

Mời bạn điền thông tin vào ô dưới đây hoặc kích vào một biểu tượng để đăng nhập:

WordPress.com Logo

Bạn đang bình luận bằng tài khoản WordPress.com Log Out / Thay đổi )

Twitter picture

Bạn đang bình luận bằng tài khoản Twitter Log Out / Thay đổi )

Facebook photo

Bạn đang bình luận bằng tài khoản Facebook Log Out / Thay đổi )

Google+ photo

Bạn đang bình luận bằng tài khoản Google+ Log Out / Thay đổi )

Connecting to %s

 
%d bloggers like this: