Blogger Theme — Bài 1
Tự viết Theme Blogger chuẩn XML từ con số 0 (có thể chạy ngay)
Hướng dẫn từng bước để tạo một theme tối thiểu nhưng hợp lệ: có b:skin, ít nhất một b:section, và widget Blog1.
1) Xương sống của theme Blogger
Một file XML hợp lệ luôn gồm <head>, <body> và các namespace của Blogger.
Quan trọng
Thiếu <b:skin> → báo lỗi “There should be one and only one skin…”.
Thiếu <b:section> → báo lỗi “A theme must have at least one b:section tag.”
2) Thêm b:skin trong <head>
<![CDATA[ ... ]]> giúp nhúng CSS an toàn trong XML.
<b:skin><![CDATA[
body { font-family: Arial; background:#f8f8f8; }
header, footer { background:#333; color:#fff; text-align:center; padding:10px; }
]]></b:skin>3) Tạo ít nhất một b:section chứa widget
<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) Mã theme tối thiểu (chạy được ngay)
Dán toàn bộ đoạn dưới vào Giao diện → Chỉnh sửa HTML. Có sẵn
Blog1, Profile1 và Attribution1.
<?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>❓ Lỗi thường gặp & cách sửa nhanh
- There should be one and only one skin… → Bạn có 0 hoặc >1
b:skin. Để đúng 1 thẻ, đặt trong<head>. - A theme must have at least one b:section tag → Thêm
<b:section>và ít nhất một widget, ví dụBlog1. - CSS không ăn → Quên bọc trong
<![CDATA[ ... ]]>hoặc selector bị theme khác ghi đè.
📌 Danh sách bình luận