Trước khi thiết kế một mẫu template, bạn cần hiểu biết về cơ bản cơ cấu tổ chức của mẫu Blogger template. Về cơ bản, cấu trúc của bất kỳ các mẫu là không hoàn toàn giống nhau. Nhưng, với những hiểu biết cơ bản bạn có thể hiểu rõ được các cơ chế của mẫu blog hiện có, thiết kế được mẫu blog và có thể làm thay đổi cơ cấu tổ chức của blog.
Một vài phần cấu trúc của mẫu blog mà bạn có thể thấy hầu hết trong các blog: headers, footers, và phần bài viết. Nhưng có một số phần tạm gọi là các sections blocks hoặc containers không hiển thị trên màn hình nhưng nó là các HTML-wise quan trọng được xây dựng để mẫu blog làm việc theo đúng chức năng.
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:
- 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).
- 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.
- 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.
- 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).
- 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.
- 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”.
- 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.
- Blog Post: Đây là phần bài viết của bạn hiển thị bào gồm Tiêu đề bài viết, bài viết, tác giả, Labels, ...
Một cách khác để hiểu rõ hơn về cấu trúc mẫu blog là xem biểu thị tree bắt đầu từ nội dung lớn cho tới các phần phụ nhìn giống như:
- 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 rõ cấu trúc cơ bản này, nó sẽ giúp bạn dễ dàng hơn để bắt đầu học tập về cấu trúc mã Blogger. Học mã cấu trúc không phải là học tập về HTML hay CSS, nhưng khi hiểu rõ mã mẫu Blogger được tổ chức ra sao sẽ giúp bạn thùy chỉnh mẫu một cách khá nhiều chỉ với những kiến thức cơ bản nhất.
Hướng dẫn tiếp theo: sẽ giúp bạn Tìm hiểu cấu trúc mã code của mẫu Blogger
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.
Tìm hiểu Bố cục blog của Blogger
Hiểu rõ hơn về bố cục của 1 blog của Blogger sẽ giúp bạn tự tay mình modify code CSS đơn giản hơn.
Bài viết này dành cho những người mới bắt đầu làm quen với blogspot, và nâng cao hơn nữa là hướng dẫn cách tiếp cận bố cục của blog theo phương pháp tiếp cận từ trên xuống để đơn giản mã CSS.
►Phương pháp tiếp cận top-down (từ trên xuống)
Cách tốt nhất để thiết kế một tập tin CSS là sử dụng phương pháp tiếp cận từ trên xuống, nói cách khác là xác định các phần tử chính của blog. Vì vậy, bạn có thể tiến hành để viết mã của bạn trong một cấu trúc chặt chẽ hơn theo cách không cần thiết tránh mã.
Trong thực tế, để xác định các thành phần chính trong bố cục của 1 blog cũng đơn giản. Sự xuất hiện các "mã không cần thiết" sẽ xảy ra khi bạn xác định các chi tiết của yếu tố đó. Để đơn giản hóa các mã CSS này, bạn cần tuân thủ 2 "quy tắc" sau:
1. Giảm thiểu số lượng các yếu tố CSS
2. Sử dụng các thẻ HTML chuẩn(P, H1, UL, LI ...) thay vì tạo các class mới.
- Ví dụ : trong blog của bạn, để thiết kế style cho tiêu đề bài viết, bạn có thể sử dụng thẻ <h1> thay vì dùng class mới ".post-title" .
►Bây giờ ta làm quen với các thành phần chính trong bố cục của blog:
Trước khi bắt đầu viết mã CSS của bạn, bạn phải có hình dung rõ ràng trong đầu bạn các mục chính trong bố cục của 1 blog. Lấy ví dụ 1 blog có 2 cột, bạn có thể xác định những phần chính như hình bên dưới:
Bố cục có 4 phần cơ bản như bên dưới:
1. Header (#header)
2. Main content (#main-content)
3. Sidebar (#sidebar)
4. Footer (#footer)
►Bước kế tiếp, là xác đinh các thành phần có trong từng mục chính đó.
1. Header :
- Phần Header gồm có 2 thành phần cơ bản là Logo và thanh Navbar.(xem hình bên dưới)
- Bạn có thể thay đổi lại logo theo cách bên dưới:
#header {
background:url(YOUR-LOGO.gif) no-repeat;
}
background:url(YOUR-LOGO.gif) no-repeat;
}
- Đối với thanh Navbar, bạn nên sử dụng các thẻ <ul> <li> để tạo .(xem hình bên dưới)
Làm thế nào ta có thể thấy chúng, bạn không nhất thiết phải tạo một class mới như là "#navigation-bar", bởi vì nó đã được xác định bằng cách sử dụng thẻ<ul> trong phần Header (#header ul, #header ul li). Bằng cách này đọan mã CSS của bạn sẽ gọn gàng hơn, đơn giản hơn, dễ quản lý hơn.
2. Main content :
- Ở trong phần main, chủ yếu là chứa nội dung bài viết, như : tựa đề, nội dung, các nhãn... , có thể xem minh họa bên dưới:
- Vì vậy cách tốt nhất để thiết kế các mã CSS là sử dụng các thẻ chuẩn (bên dưới) vào class #main-content :
+ Post section paragraph(nội dung bài viết) (<p>)
+ Post title (tựa đề bài viết) (<h1>)
+ Post date (ngày post)(<h2>)
+ Post tag (nhãn) (<small>)
+ Post title (tựa đề bài viết) (<h1>)
+ Post date (ngày post)(<h2>)
+ Post tag (nhãn) (<small>)
Và nó trông như thế này:
3. Thanh Sidebar:
- Sẽ rất đơn giản nếu dùng các thẻ <h1> , <p> (xem hình minh họa)
- Và code CSS sẽ trông như thế này:
4. Footer:
- Tùy bạn thiết kế. hòan tòan tương tự.
Như vậy mình đã giới thiệu xong, hy vọng với bài viết này các bạn sẽ nắm rõ hơn về bố cục của 1 blog, và tự tay mình modify code CSS cho nó đơn giản hơn.
Nguồn: Fandung Blog
Mã nguồn của Blogger
Blogger của Google là một dịch vụ blog mã nguồn mở. Bạn có thể biên tập khoảng 95% mã nguồn của nó để thay đổi theme cho nó. Không chỉ đổi màu, đổi background... mà hơn thế nữa, bạn có thể thay đổi Layout (bố cục) để có một giao diện 100% mới. Ngoài ra vì là mã nguồn mở lên bạn dễ dàng tìm được những thứ gọi là Widget (phụ tùng) - một kiểu Add-on cho blog - và nhưng đoạn script tạo các chức năng, hiệu ứng đặc biệt... Với Blogger, bạn có thể tạo một cái blog trên nền tảng Web 2.0 dễ dàng. Bài viết này sẽ hướng dẫn bạn chỉnh sửa mã nguồn của Blogger.
I.Chuẩn bị:Để bắt đầu, bạn phải đăng nhập vào blog của mình.
Trong trang Dashboard → chọn Layout (tại blog muốn chỉnh) Tại trang Blogger :: Edit Layout → nhấn vào link Edit HTML Ở trang này, bạn có thể bắt đầu việc chỉnh sửa của mình.II.Dạng cơ bản:Mã nguồn thường sẽ có dạng cơ bản như sau: <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns='http://www.w3.org/1999/xhtml' xmlns:b='http://www.google.com/2005/gml/b' xmlns:data='http://www.google.com/2005/gml/data' xmlns:expr='http://www.google.com/2005/gml/expr'><head><b:include data='blog' name='all-head-content'/><title><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*-----------------------------------------------Giới thiệu về skin và tác giả-----------------------------------------------*/
/* Variable definitionsphần đặt biến cho skin*/
Phần CSS có thể chỉnh sửa]]></b:skin>Phần chèn Javascript</head><body>
Nội dung trang...Phần này thay đổi theo trang. Thường được chia ra thành cái Section (nằm giữa thẻ <b:section> và </b:section>).Trong các section (vùng) còn có những Widget (nằm giữa thẻ <b:widget> và </b:widget>).
</body></html>Từ đoạn này trở đi không có giá trị
Những phần nằm trên thẻ <head> bạn không cần để ý, cũng đừng bao giờ thay đổi gì ở đây. Có thể hiểu đây là phần thủ tục thôi. Phần màu xanh lá cây có thể bỏ đi. Phần in nghiêng là các lưu ý.
Ngoài ra, những đoạn nằm trong /* và */ trong phần CSS và những đoạn nằm trong <!-- và --> trong những phần còn lại đều không có ý nghĩa. Đó chỉ là phần chú thích.
...
III.Section và Widget:Thẻ <b:section> Nó có các thuộc tính (attribute) như sau:
- id: (Bắt buộc) Nó có ý nghĩa như tên của section đó (chỉ dùng chữ và số).VD: <b:section id="MySection">.
- class: phân nhóm cho section của bạn. Bạn nên dùng những cái tên sau cho class của mình như "navbar," "header," "main," "sidebar," and "footer". Để sau này, khi thay đổi phần CSS, Blogger có thể chuyển Section của bạn đến đúng nơi.VD: <b:section class="sidebar" id="MySection">.
- maxwidgets: Quy định số lượng widget tối đa mà section có thể chứa. Nếu không đề cập có nghĩa là không giới hạn.VD: <b:section id="MySection" maxwidget="1">.
- showaddelement: Chỉ có 2 giá trị là "yes" hay "no" (mặc định là "yes". Nó quy định tại trang Edit Layout có hiển thị liên kết "Add a Page Element" cho section này không.VD: <b:section id="MySection" showaddelement="no">.
- growth: Cũng chỉ có 2 giá trị là "horizontal" (ngang) hay "vertical" (dọc) (mặc định là "vertical"). Nó quy định cách mà các widget xuất hiện (hàng dọc hay ngang).VD: <b:section id="MySection" growth="horizontal">
- id: (bắt buộc) có ý nghĩa như tên của widget đó. Không thể có 2 widget cùng tên. ID của widget sau khi tạo, không thể thay đổi được trừ khi bạn xóa vào tạo lại một widget khác.
- type: (bắt buộc) Nó xác định kiểu widget.
- locked: có 2 giá trị "yes" hoặc "no" (mặc định là "no"). Nếu bạn trong "yes" thì widget này không thể xóa hay di chuyển trong trang Edit Layout.
- title: Hiện tên của widget khi nó xuất hiện trên trang blog. Nếu bạn bỏ trống thì Blogger sẽ sử dụng một cái tên tự động kiểu HTML1, List2...
- pageType: Có thể là "all", "archive", "main", hay "item" (mặc định là "all"). Widget này sẽ chỉ hiển thị ở loại trang được xác định cho nó. Nhưng tất cả đều xuất hiện trong trang Edit Layout.
Các loại widget hiện có:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
Khi bạn bấm nút 
, tất cả các thẻ <b:section> và <b:widget> sẽ được chuyển thành <div> với ID tương ứng. ID này sẽ cùng với định dạng trong phần CSS của bạn để hiển thị đúng trên màn hình.
, tất cả các thẻ <b:section> và <b:widget> sẽ được chuyển thành <div> với ID tương ứng. ID này sẽ cùng với định dạng trong phần CSS của bạn để hiển thị đúng trên màn hình.Lần trước mình đã giới thiệu về mã nguồn của Blogger. Nhưng đó chỉ là dạng thu gọn, nội dung của các widget bị giấu đi. Ở bài này, mình sẽ nói chi tiết về nội dung của một Widget. Xét về bản chất thì nó khá giống những ngôn ngữ lập trình hướng cấu trúc (structured programming language), nó cũng cấu tạo bởi cái code block và có những hàm cơ bản như Loop và Condition.
I.Chuẩn bịTại trang Edit HTML (?) bạn nhấn vào checkbox Expand Widget Templates
Lúc này thì trang Edit HTML sẽ tự tải lại. Và dễ dàng nhận ra, phần mã nguồn đã thay đổi, các dòng
<b:widget [các thuộc tính] />
trở thành
<b:widget [các thuộc tính]><b:includable>...</b:includable></b:widget>
Lưu ý là giữa 2 thẻ <b:widget> và </b:widget> có thể chứa nhiều nhóm <b:includable> và </b:includable>
II.Sẵn sàng Thẻ <b:includable> Bạn có thể bất cứ thứ gì vào giữa 2 thẻ <b:includable> và </b:includable>. Thẻ này có 2 thuộc tính như sau. - id: (bắt buộc) Những chữ hay số có giá trị như tên của 1 includable. Hai includable trong cùng widget không được trùng tên.
- var: Một tham số có liên quan tối phần nội dung trong thẻ, có thể là chữ hoặc số.
- name: (bắt buộc) là tên của include này. Nó buộc phải trùng với ID của includable bạn muốn xuất hiện (với điều kiện, cả 2 nằm trong cùng một widget).
- data: có ý nghĩa như var trong includable.
<b:includable id='main'><b:loop var='i' values='posts'><b:include name='post' data='i'/></b:loop></b:includable>
<b:includable id='post' var='p'>Title: <data:p.title/></b:includable>
Chỉ cần một dòng
<b:include name='post' data='i'/>
sẽ thay thế cho cả đoạn
Tham số i được dùng trong thẻ include có ý nghĩa như p trong includable. Sở dĩ dùng i ở đây là vì trong thẻ b:loop có var='i'. Thẻ <b:include> rất có ý nghĩa nếu bạn phải lập đi lập lại một vùng includable nhiều lần trong một widget.Lưu ý: <b:include name='main'/> không cần viết vào vì nó sẽ xuất hiện tự động.Thẻ data: Thẻ data: có ý nghĩa quan trong nhất trong toàn bộ phần mã nguồn. Vì nó là đại diện cho nội dung thực sự của blog. Một vài ví dụ của thẻ này:<data:title/> đại diện cho tựa đề của widget<data:photo.url/> đại diện cho đường dẫn của ảnh ... Đây là những ví dụ đơn giản và thường gặp nhất. Vì hầu hết các widget đều có tựa đề. Thẻ data còn được dùng trong nhiều trường hợp phức tạp khác, thậm chí có tham số trong đó. Dấu "." ý chỉ là url ta cần là url của tấm hình đó, chứ không phải của bất cứ cái gì khác. Tới đây thì có vẻ nó đã giống như một ngôn ngữ lập trình rồi.Lưu ý: Còn rất nhiều thẻ data khác nhau và danh sách các thẻ data sẽ được viết trong bài sau.Thẻ <b:loop> Thẻ b:loop được dùng khá phổ biến. Nó dùng để lặp đi lặp lại một nhóm thông tin. Cú pháp cơ bản của b:loop là:<b:includable id='post' var='p'>Title: <data:p.title/></b:includable>
Với tham số chỉ định là tùy chọn, thường dùng nhất là 'i'. Và nhóm dữ liệu chính là các data: (chi tiết sẽ để cập ở bài sau). vd:<b:loop var='tham số chỉ định' values='nhóm dữ liệu'>[Nội dung cần lặp lại]</b:loop>
<b:loop var='i' values='data:posts'><h2><data:i.title/></h2></b:loop>
Trong ví dụ này, ta sẽ lặp đi lặp lại tựa đề của bài viết. Tham số là i, lặp lại sau mỗi bài viết (data:posts là danh sách tất cả các bài viết trong một trang). Nội dung cần lặp lại là tựa đề của từng bài. Tức là khi i sẽ chạy từ post[1] tới post[n], thì xuất hiện trên màn hình sẽ là tựa đề của post[1] tới post[n].
Thẻ <b:if> Bạn có thể dùng b:if và b:else để quy định thông tin chỉ hiển thị trên vùng này hay vùng khác. Cú pháp cơ bản là:
<b:if cond='điều kiện'>[nếu điều kiện đúng]<b:else/>[nếu điều kiện sai]</b:if>
Bạn có thể bỏ qua <b:else/> mà không ảnh hưởng tới <b:if>. Như vậy, chỉ có 2 trường hợp, một là nội dung nếu điều kiện đúng; hai là không có gì.
Điều kiện phải là những biểu thức có thể đánh giá đúng sai. vd:
<b:if cond='data:post.showBacklinks'> đúng nếu bài viết hiện tại cho phép hiển thị backlinks.
<b:if cond='data:blog.pageType == "item"'>
Đúng nếu trang hiện tại là dạng item (trang chứa bài viết).<b:if cond='data:displayname != "Gman"'> Đúng nếu tên hiển thị khác Gman.<b:if cond='data:post.numComments > 1'>Đúng nếu bài viết hiện tại có nhiều hơn một bài trả lời.Nguồn: Blog lô - Gman:
Để có một blog đẹp chúng ta phải chỉnh sửa mã nguồn cho các thành phần trở nên cân đối và hài hòa. Bài viết này sẽ hướng dẫn các bạn làm quen với margin và padding, canh lề và canh đệm. Những ai đã từng học qua CSS thì không lạ gì với hai tag này.
MARGIN
Margin được dùng để kiểm soát khoảng trống giữa các thành phần của trang, hay còn được gọi là lề. Hãy để ý các khoảng trống mà trình duyệt của bạn hiển thị khi bạn xem bất kỳ trang web hay blog. Nào, đăng nhập blogger.com bằng tài khoản Google của bạn, vào Template (Mẫu) ->Edit HTML (Chỉnh sửa HTML), kéo thanh trược xuống và bạn có thể nhìn thấy rất nhiều thành phần có margin với các giá trị khác nhau. Phụ thuộc vào số giá trị đứng phía sau mà khoảng trống khác nhau. Bạn có thể bắt gặp 4, 3, 2, thậm chí 1 giá trị đứng phía sau.
Bốn giá trị:margin 10px 5px 0 5px;Lề trên, phải, dưới, trái được canh lần lượt theo các khoảng cách 10px, 5px, 0px, 5px
(Các con số ở đây là ví dụ)
PADDING
Ví dụ:
padding: 15px 30px 25px 0;
Trên 15px, phải 30px, dưới 25px, trái 0px
Ngoài ra người ta có thể dùng:
padding-top: 15px;
padding-right: 30px;
padding-bottom: 0;
padding-left: 30px;
(Các con số ở đây là ví dụ)
Bạn đã nắm được chưa, bắt tay vào thay đổi margin và padding đi nào!
Nguồn: Thủ thuật blog
Tham khảo thêm:
Kỹ năng CSS liên quan đến text dành cho việc chỉnh sửa Template (Mẫu) Firebug - hổ trợ chỉnh sửa HTML blog 
