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 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ị
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">
Nằm trong <b:section> bắt buộc phải là thẻ <b:widget>, những thẻ khác sẽ không được chấp nhận
Thẻ <b:widget>
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
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.Hết phần 1
Phần 2 sẽ nói về các biên tập một widget với thẻ <b:includable>
3 comments:
Gman có bài viết rất hay và sinh động. Anh xin phép đăng nó trên TQVN nhé, có biên tập lại chút xíu :)
Tìm hiểu mã nguồn của Blogspot
anh cứ tự nhiên, :), chia sẻ là mục đích của em mà :D
Hi Gman ! cậu trao đổi liên kết với tớ đc không ? Tìm hoài mới ra blog cậu đấy , bữa thấy cái link gì mà Gman.undo.it , lên google search mới đc đấy ^^
Post a Comment