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, ...
- 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
I. 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. Nhìn chung là các mẫu đều có cấu trúc tương tự nhau nên bạn không phải băn khoăn về vấn đề các mẫu tham khảo.
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.
II. 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.
III. 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" ?>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 ý.
<!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 definitions
phầ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ị
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">
Widget là những phần add-on có thể quản lý được trong trang Edit Layout. Nó có các thuộc tính sau:
- 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.
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
, 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.
Không có nhận xét nào:
Đăng nhận xét