Tự tay viết Theme Blogger chuẩn XML từ con số 0 (có thể chạy được ngay)
Bạn muốn tự học code theme Blogger theo cách chuyên nghiệp? Bài giảng này sẽ hướng dẫn bạn viết một mẫu theme Blogger đơn giản nhất — nhưng đúng chuẩn XML để trình soạn thảo Blogger chấp nhận và chạy được ngay.
1️⃣ Cấu trúc cơ bản của một theme Blogger
Một file theme Blogger (đuôi .xml) luôn tuân thủ cấu trúc sau:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' ...>
<head> ... </head>
<body> ... </body>
</html>
Đây là khung cơ bản của mọi theme. Tuy nhiên, Blogger sẽ báo lỗi nếu thiếu hai phần sau:
<b:skin>– nơi chứa CSS nội bộ của theme (chỉ được có một).<b:section>– vùng chứa các widget (bắt buộc phải có ít nhất một).
2️⃣ Thêm thẻ <b:skin> để tránh lỗi “There should be one and only one skin...”
Thẻ này phải đặt trong phần <head>. Dưới đây là ví dụ:
<b:skin><![CDATA[
body {
font-family: Arial;
background: #f8f8f8;
}
header, footer {
background: #333;
color: #fff;
text-align: center;
padding: 10px;
}
]]></b:skin>
Dấu <![CDATA[ ... ]]> giúp bạn chèn CSS vào XML mà không bị lỗi cú pháp.
3️⃣ Thêm thẻ <b:section> để tránh lỗi “A theme must have at least one b:section tag”
Một theme hợp lệ phải có ít nhất một <b:section> để chứa các widget.
Thông thường, nó nằm ở vùng nội dung chính (<main>) và sidebar.
Ví dụ một section cơ bản:
<b:section id='main' class='content' showaddelement='yes' maxwidgets='10'>
<b:widget id='Blog1' type='Blog' title='Bài đăng' locked='true'/>
</b:section>
4️⃣ Toàn bộ mã theme Blogger tối thiểu (chạy được ngay)
<?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>
5️⃣ Kết luận
Sau khi dán đoạn mã này vào phần Sửa HTML trong Blogger, bạn đã có một theme hợp lệ. Từ đây, bạn có thể:
- Thêm CSS nâng cao (responsive, grid, animation...)
- Chèn thêm nhiều
<b:section>để tạo layout phức tạp - Nhúng JS hoặc thư viện ngoài như Bootstrap, FontAwesome
📌 Danh sách bình luận