Home » Themes và template
Các bạn đã từng thấy các bài viết đại loại là có chữ from scratch đằng sau chưa? Đó là những bài hướng dẫn mà họ muốn hướng dẫn bạn từ vấn đề cơ bản nhất đến bước cuối cùng để ra một sản phẩm, và theme cũng vậy.
Bắt đầu vào vấn đề chính:» 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.» Trên hướng dẫn này mình chỉ viết về cấu trúc template. Những vấn đề về css bạn xem ởbài viết này nha.
» Trước khi thiết kế bạn nên phát thảo ra giấy về hình dạng trang blog mình mong muốn sẽ như thế nào. Việc này giúp bạn định hình được việc chính mình cần phải làm là gì, tránh lang mang không biết bắt đầu từ đâu.
<?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>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Thanh điều hướng' type='Navbar'/>
</b:section>
</body>
</html>
<b:include data='blog' name='all-head-content'/>Thay đổi những dòng màu đỏ cho phù hợp với blog của bạn là được rồi.
<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>
Để hiểu về các thuộc tính của css thì bạn đọc bài viết này nha.» 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>
Để hiểu cách gọi ra các module bạn xem phần đầu của bài viết này nha.
» Ở đầ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.
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 */
...;
}
<div id='box'>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{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 */
...;
}
<div id='header'>Tiếp tục chèn thêm thuộc tính css cho 3 id vừa tạo bằng cách thêm đoạn code css của nó ở trên thẻ ]]></b:skin>
Nội Dung header
</div>
<div id='main-outer'>
Nội Dung Blog
</div>
<div id='footer'>
Nội Dung Footer
</div>
#header{Save template lại rồi về trang chủ bạn sẽ thấy có 3 module mới được hình thành.
Background:#4499bb; /* Màu nền của module header */
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 */
...;
}
#main-outer{
Background:#113366; /* Màu nền của module main-outer */
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 */
...;
}
#footer{
Background:#6600ee; /* Màu nền của module footer */
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 */
...;
}
<div id='sidebar1'>Chú ý: do 3 module trên sử dụng thuộc tính dời module qua trái, qua phải nên phía dưới nó cần có thêm <div style='clear:both'/> để dừng hiệu ứng dời module.
Nội Dung sidebar1
</div>
<div id='main'>
Nội Dung Bài Viết
</div>
<div id='sidebar2'>
Nội Dung sidebar2
</div>
<div style='clear:both'/>
#sidebar1{
Background:#884400; /* Màu nền của module sidebar1 */
width:200px; /* Chiều rộng của module sidebar1 */
float:left; /* Dời module sidebar1 qua trái */
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 */
...;
}
#main{
Background:#646853; /* Màu nền của module main */
width:590px; /* Chiều rộng của module main */
float:left; /* Dời module main qua trái */
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 */
...;
}
#sidebar2{
Background:#518643; /* Màu nền của module sidebar2 */
width:200px; /* Chiều rộng của module sidebar2 */
float:right; /* Dời module sidebar2 qua phải */
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:section class='sbar1' id='sbar1' showaddelement='yes'/>Save template lại.
#navbar-iframe {height:0px;visibility:hidden;display:none}Làm tương tự với sidebar2 có 1 điều cần lưu ý là nhớ chuyển sbar1 trong đoạn code ở sidebar1 thành sbar2. Nếu bạn không chuyển cái này thì template sẽ báo lỗi.
h2 {padding:0; margin:0}
<b:section class='head' id='head' maxwidgets='1' showaddelement='no'>Save template lại. Về mục phần tử trang bạn sẽ thấy tiện ích của header đã được tạo ra. Bạn chỉ việc thay đổi tiêu đề và mô tả cho blog hoặc thay đổi banner cho blog là được. Về trang chủ để kiểm tra kết quả nào.
<b:widget id='Header1' locked='true' title='(Tiêu đề)' type='Header'/>
</b:section>
<b:section class='mainpost' id='mainpost' showaddelement='no'>Save template lại. Về mục Phần tử trang bạn sẽ thấy tiện ích Bài Đăng Trên Blog đã hiện ra. Bạn chỉ việc chỉnh sửa tiện ích này lại cho phù hợp với blog là ok rồi. Về trang chủ các bài đăng có trên blog cũng đã được hiện ra. Như vậy là ok rồi.
<b:widget id='Blog1' locked='true' title='Bài đăng trên Blog' type='Blog'/>
</b:section>
Về cách trang trí cho blog bằng những thuộc tính css thì bạn xem ở bài viết này.
