Bài 1: Tự viết Theme Blogger chuẩn XML từ con số 0
Mục tiêu bài học:
- Hiểu được cấu trúc cơ bản của theme Blogger (XML, thẻ
b:skinvàb:section). - Biết cách khắc phục các lỗi phổ biến khi tạo theme thủ công.
- Tự tạo được một theme Blogger hoạt động đầy đủ.
1. Khởi động
💡 Gợi ý: Bạn có biết Blogger không chấp nhận theme thiếu
b:section hoặc b:skin không?
2. Kiến thức mới
2.1. Cấu trúc cơ bản của theme Blogger
Mọi theme Blogger đều bắt đầu bằng khai báo XML và gồm hai phần chính: <head> và <body>.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'>
<head>...</head>
<body>...</body>
</html>
⚠️ Lưu ý: Blogger sẽ báo lỗi nếu thiếu các thẻ đặc biệt:
<b:skin>: chứa CSS nội bộ, chỉ được có một.<b:section>: chứa các widget, bắt buộc phải có ít nhất một.
2.2. Thêm thẻ <b:skin>
Đặt trong phần <head>, đây là nơi viết CSS cho theme:
<b:skin><![CDATA[
body {font-family: Arial; background:#f8f8f8;}
header, footer {background:#333; color:#fff; text-align:center; padding:10px;}
]]></b:skin>
💡 Mẹo nhỏ: Hãy bọc CSS trong
<![CDATA[ ... ]]> để tránh lỗi cú pháp XML.
2.3. Tạo ít nhất một b:section
Đây là nơi chứa các widget, ví dụ widget bài đăng Blog1:
<b:section id='main' class='content' showaddelement='yes' maxwidgets='10'>
<b:widget id='Blog1' type='Blog' title='Bài đăng' locked='true'/>
</b:section>
2.4. Hoàn chỉnh theme Blogger
Sao chép đoạn mã đầy đủ dưới đây và dán vào phần Chỉnh sửa HTML trong Blogger:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' expr:dir='data:blog.languageDirection'
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>
<title><data:blog.pageTitle/></title>
<b:include data='blog' name='all-head-content'/>
<b:skin><![CDATA[
body {font-family: Arial, sans-serif; background:#f8f8f8; margin:0;}
header, footer {background:#333; color:#fff; text-align:center; padding:10px;}
nav {background:#666; color:#fff; padding:8px;}
main {display:flex; gap:16px; padding:16px;}
.content {flex:1; background:#fff; padding:12px; border-radius:8px;}
.right {width:300px; background:#fff; padding:12px; border-radius:8px;}
]]></b:skin>
</head>
<body>
<header>Phần đầu trang</header>
<nav>Menu điều hướng</nav>
<main>
<b:section id='main' class='content' showaddelement='yes' maxwidgets='10'>
<b:widget id='Blog1' type='Blog' title='Bài đăng' locked='true'/>
</b:section>
<b:section id='sidebar' class='right' showaddelement='yes' maxwidgets='20'>
<b:widget id='Profile1' type='Profile' title='Giới thiệu'/>
</b:section>
</main>
<b:section id='footer-sec' class='footer' showaddelement='yes' maxwidgets='5'>
<b:widget id='Attribution1' type='Attribution' title='' />
</b:section>
<footer>Phần cuối trang</footer>
<b:include data='blog' name='all-body-content'/>
</body>
</html>
3. Thực hành nhanh
4. Bảng tóm tắt
| Thẻ | Chức năng | Lưu ý |
|---|---|---|
<b:skin> | Chứa CSS nội bộ | Chỉ 1 thẻ duy nhất |
<b:section> | Vùng chứa widget | Tối thiểu 1 |
<b:widget> | Hiển thị module (bài đăng, hồ sơ...) | Phải nằm trong section |
5. Kết luận
🌿 Bạn đã nắm được cấu trúc cơ bản của theme Blogger. Hãy lưu theme, xem kết quả và bắt đầu thử thêm phần menu động, breadcrumb, hoặc giao diện responsive cho bài học tiếp theo!
📌 Danh sách bình luận