Blogspot: Hướng Dẫn Làm Template Cơ Bản
Hôm nay Phúc giới thiệu các bạn về cách làm Template, trên mạng thì rất nhiều Template đẹp nhưng cái đó là của người ta, Tính Phúc thì thích làm cái gì đó độc quyền, tự tay mình làm thì gọi là đọc rồi, Các bạn hãy nghiên cứu biến hóa và sáng tạo hết cỡ, khi chúng ta biết cấu trúc của Blogger ra sau, Phúc thì gà nhưng có cái phái tự làm mọi thứ hơn.
Nếu có gì sai các bạn hãy nhận xét sau bài viết này.
Thoi chúng ta bắt đầu nào.
lưu ý:
Thoi chúng ta bắt đầu nào.
lưu ý:
TUYỆT ĐỐI ĐỪNG THIẾT KẾ NGAY TRÊN TRANG BLOG CHÍNH. Bạn nên tạo một trang blog khác chỉ để phục vụ cho việc thiết kế. Sau khi thiết kế hoàn thành hãy đem cái template mới đó về áp dụng cho blog chính của mình.
Bài này Phúc chỉ cái sườn thoi còn sáng tạo thì mỗi người khác nhau.
Muốn làm được phải hiểu cái CSS nữa. Tham khảo tại đây.
Bài này Phúc chỉ cái sườn thoi còn sáng tạo thì mỗi người khác nhau.
Muốn làm được phải hiểu cái CSS nữa. Tham khảo tại đây.
1. Cấu trúc cơ bản template của 1 blog có dạng như sau:
<?xml version="1.0" encoding="UTF-8" ?>
<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:skin><![CDATA[
]]></b:skin>
</head>
<body>
</body>
</html>
Đoạn code trên là cấu trúc của một XHTML gồm 2 phần <head>...</head> và <body>...</body>, 2 phần này cùng nằm trong <html>...</html><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:skin><![CDATA[
]]></b:skin>
</head>
<body>
</body>
</html>
Tại sau Phúc nói đó là cấu trúc XHTML mà hong phải là HTML .
XHTML= HTML + CSS
Việc bạn cần làm là vào thiết kế → Chỉnh sửa HTML xóa toàn bộ đoạn code bên trong đó và paste đoạn code trên vào rồi save lại. Khi save lại sẽ xuất hiện 1 mục cảnh báo dạng như hình bên dưới. Bạn chọn vào mục xóa tiện ích.
Meta, tags sẽ được chèn dưới thẻ <head> và trên thẻ <b:skin>
<b:include data='blog' name='all-head-content'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " - Mô tả về blog của bạn"' name='description'/>
<meta expr:content='data:blog.pageName + ", Các từ khóa trên blog của bạn"' name='keywords'/>
</b:if>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<title><data:blog.title/></title>
</b:if>
<b:if cond='data:blog.pageType == "index"'>
<title><data:blog.pageTitle/></title>
<meta content='Mô tả về blog của bạn' name='description'/>
<meta content='Các từ khóa trên blog của bạn' name='keywords'/>
<b:else/>
<title><data:blog.pageName/> - <data:blog.title/></title>
<meta expr:content='data:blog.pageName + " - Mô tả về blog của bạn"' name='description'/>
<meta expr:content='data:blog.pageName + ", Các từ khóa trên blog của bạn"' name='keywords'/>
</b:if>
Những đoạn css qui định về thuộc tính các module trên blog sẽ được chèn phía trên thẻ ]]></b:skin>
Các module hiển thị trên blog sẽ được chèn bên trong thẻ <body> Module hiển thị trên blog </body>
3. Bố cục các thành phần bạn muốn có trên blog
Thành phần blog này bao gồm 3 phần chính:
» Ở đầu trang là header. » Ở giữa gồm 3 phần là 1 sidebar bên trái (sidebar1) 1 sidebar bên phải (sidebar2) và phần nội dung bài viết ở giữa.(post) » Ở cuối trang là footer.
Tất nhiên đây chỉ là những module lớn. Bên trong mỗi module lớn này sẽ còn được chia thành nhiều module nhỏ nữa. Vấn đề này mình sẽ đề cập sau. Việc bây giờ bạn cần làm là tạo ra các module ban đầu cho blog.4. Tạo Module đầu tiên trên blog.
Module lớn nhất của blog là body. Đây là module mặc định chứa tất cả các module khác trên blog.
Bạn cần khai báo một số thuộc tính css cho module body này vào phía trên thẻ ]]></b:skin> theo dạng như sau:
body{
background: #cccccc; /* Màu nền toàn blog (mặc định là màu trắng) */
font: 16px georgia; /* Cỡ chữ và font chữ cho toàn blog */
thuộc tính khác; /* Một số thuộc tính khác cho toàn blog */
...;}
background: #cccccc; /* Màu nền toàn blog (mặc định là màu trắng) */
font: 16px georgia; /* Cỡ chữ và font chữ cho toàn blog */
thuộc tính khác; /* Một số thuộc tính khác cho toàn blog */
...;}
Chú ý: Bạn có thể tìm hiểu thêm về các thuộc tính khác ở bài viết này sau này mình sẽ không đề cập đến cái này nữa. tất cả những gì liên quan đến thuộc tính css thì bạn cứ vào bài viết trên.
Tiếp theo mình sẽ tạo 1 module với ID là box nằm trong body và chứa tất cả các module còn lại của blog.
Cách làm: ở giữa thẻ <body> và </body> bạn thêm 1 đoạn code như bên dưới:
<div id='box'>
Nội Dung Blog
</div>
Tiếp tục chèn thêm thuộc tính css cho id box này bằng cách thêm đoạn code này ở trên thẻ ]]></b:skin>Nội Dung Blog
</div>
#box{
Background:#3399bb; /* Màu nền của module box */
Width: 990px; /* Chiều rộng của trang blog */
Margin:0 auto; /* Cân bằng vị trí module này vào giữa trang */
thuộc tính 1; /* Một số thuộc tính khác */
thuộc tính 2; /* Một số thuộc tính khác */
...;
}
Save template lại rồi về trang chủ bạn sẽ thấy có 1 module mới được hình thành.Background:#3399bb; /* Màu nền của module box */
Width: 990px; /* Chiều rộng của trang blog */
Margin:0 auto; /* Cân bằng vị trí module này vào giữa trang */
thuộc tính 1; /* Một số thuộc tính khác */
thuộc tính 2; /* Một số thuộc tính khác */
...;
}
Bài viết khá dài Phúc sẽ tiếp phần 2 click here. Cám ơn các bạn đã đọc bài viết này.
0 comments:
Post a Comment