How to Use VS Code + Live Server + XML Tools for Blogger Template
🔧 Step 1: Setup VS Code
1. Download VS Code: https://code.visualstudio.com
2. Install Extensions:
- Live Server (Ritwick Dey)
- XML Tools (Josh Johnson)
- Auto Rename Tag
- Prettier
📁 Step 2: Create Project Folder & File
1. បង្កើត Folder: "my-blogger-template"
2. VS Code → File → Open Folder
3. បង្កើត File ថ្មី 2:
📄 template.xml ← Blogger XML Code
📄 preview.html ← HTML Preview
📋 Step 3: Copy Blogger Template
Blogger Dashboard
→ Theme
→ Customize → Edit HTML
→ Ctrl+A (Select All)
→ Ctrl+C (Copy)
→ Paste នៅក្នុង template.xml
→ Ctrl+S (Save)
🎨 Step 4: Use XML Tools
Format XML Code:
Ctrl+Shift+P
→ Type: "XML Format"
→ Enter ✅
Code នឹង Format សំអាតស្អាត
XML Tools Features:
| Feature | របៀបប្រើ |
|---|---|
| Format XML | Ctrl+Shift+P → XML Format |
| Find Closing Tag | Ctrl+Shift+P → XML Tag |
| XPath Evaluation | Ctrl+Shift+P → XML XPath |
| Validate XML | Auto — highlight error ក្រហម |
👁️ Step 5: Setup preview.html for Live Server
បង្កើត preview.html ដូចខាងក្រោម៖
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Blogger Template Preview</title>
<style>
/* បិទ CSS របស់អ្នកនៅទីនេះ */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: Arial, sans-serif; }
/* Header */
#header { background: #4285f4; color: white; padding: 20px; }
/* Layout */
#content-wrapper { display: flex; max-width: 1200px; margin: 0 auto; }
/* Main Content */
#main { flex: 1; padding: 20px; }
/* Sidebar */
#sidebar { width: 300px; padding: 20px; background: #f1f1f1; }
/* Footer */
#footer { background: #333; color: white; padding: 20px; text-align: center; }
/* Post Card */
.post { background: white; margin-bottom: 20px; padding: 20px;
border-radius: 8px; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.post h2 { color: #4285f4; margin-bottom: 10px; }
.post-meta { color: #999; font-size: 12px; margin-bottom: 10px; }
.post-body { line-height: 1.6; }
</style>
</head>
<body>
<!-- HEADER -->
<div id="header">
<h1>Blog Title</h1>
<p>Blog Description</p>
</div>
<!-- CONTENT WRAPPER -->
<div id="content-wrapper">
<!-- MAIN POSTS -->
<div id="main">
<!-- Post 1 -->
<div class="post">
<h2>Post Title 1</h2>
<div class="post-meta">📅 January 1, 2025 | ✍️ Author Name</div>
<div class="post-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</div>
</div>
<!-- Post 2 -->
<div class="post">
<h2>Post Title 2</h2>
<div class="post-meta">📅 January 2, 2025 | ✍️ Author Name</div>
<div class="post-body">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</div>
</div>
</div>
<!-- SIDEBAR -->
<div id="sidebar">
<h3>About</h3>
<p>Sidebar content here...</p>
<br>
<h3>Categories</h3>
<ul>
<li>Category 1</li>
<li>Category 2</li>
<li>Category 3</li>
</ul>
</div>
</div>
<!-- FOOTER -->
<div id="footer">
<p>© 2025 My Blog. All rights reserved.</p>
</div>
</body>
</html>
🚀 Step 6: Start Live Server
1. គ្លីច preview.html
2. Right-click → "Open with Live Server"
3. Browser បើក ហើយ Preview ភ្លាម ✅
🔄 Step 7: Workflow ប្រចាំថ្ងៃ
┌─────────────────────────────────────────┐
│ │
│ template.xml ←→ preview.html │
│ (Blogger Code) (HTML Preview) │
│ ↓ ↓ │
│ XML Tools Live Server │
│ (Format/Check) (Auto Refresh) │
│ ↓ ↓ │
│ └──── VS Code ─────┘ │
│ ↓ │
│ Blogger Dashboard │
│ (Final Upload) │
│ │
└─────────────────────────────────────────┘
⌨️ Shortcut Keys សំខាន់
| Shortcut | មុខងារ |
|---|---|
Ctrl+S |
Save + Auto Refresh |
Ctrl+Shift+P |
Command Palette |
Ctrl+/ |
Comment/Uncomment |
Alt+Shift+F |
Format Document |
Ctrl+F |
Find in File |
Ctrl+H |
Find & Replace |
Ctrl+Z |
Undo |
⚠️ សំណួរញឹកញាប់
Q: Blogger tags មិន render នៅ Live Server? A: ត្រឹមត្រូវ — Live Server Preview CSS/Layout ប៉ុណ្ណោះ។ Blogger tags ដូចជា
data:post.titleត្រូវ Test នៅ Blogger ផ្ទាល់។
Q: XML Tools ប្រើសម្រាប់អ្វី? A: Format Code ឲ្យស្អាត, Highlight Errors, និង Navigate Tags បានលឿន។