Hướng dẫn thiết kế Template Blogspot [Phần 1]
Tuy Blogspot có một kho template vô cùng phong phú nhưng không phải cái nào cũng đáp ứng được nhu cầu của bạn. Đặc biệt là đối với dân designer thì còn gì tuyệt hơn tự tay thiết kế template cho blog của mình. Ở bài viết này tôi sẽ hướng dẫn bạn từng bước cơ bản để tạo template Blogspot.
Thiết Kế Template Blogspot, Bạn Cần Những Kỹ Năng Gì?
- HTML & CSS (bắt buộc)
- XML
- Javascript
Bước 1: Chuẩn Bị
Đậy là bước rất cần thiết khi bạn bắt đầu thiết kế bất kỳ template nào. Vì bạn cần test xem template của mình hoạt động như thế nào.
Yêu cầu :
- Khoảng 5 – 10 bài viết mẫu.
- Hình ảnh cho mỗi bài viết.
Bước 2: Tìm Hiểu Cấu Trúc Template Blogspot
Công việc này giống như tìm hiểu bạn gái trước khi cưới vậy. Nếu bạn không hiểu cấu trúc của template thì rất khó khăn trong việc sữa chữa chứ đừng nói đến việc tạo ra nó.
Ở đây tôi đã chuẩn bị sẵn cho bạn cấu trúc template cơ bản trong Blogspot.
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE 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:include data='blog' name='all-head-content'/>
<title>
<b:if cond='data:blog.pageType == "index"'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != "error_page"'>
<data:blog.pageName/> | <data:blog.title/>
<b:else/>
Page Not Found | <data:blog.title/>
</b:if>
</b:if>
</title>
<b:skin><![CDATA[
body {
background:white;
color:black;
}
#Navbar1 {dispaly:none!important;}
]]></b:skin>
</head>
<body>
<b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'>
<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>
</b:section>
</body>
</html>
Rồi bây giờ bắt đầu tìm hiểu cấu trúc template.
- Thẻ XML và HTML: Đây là hai thẻ chính trong template Blogspot. Bạn phải lưu lại dưới dạng .xml thì Blogspot mới hiểu file này là template, nếu không thì sẽ báo lỗi.
- Thẻ <title>: Khai báo các thuộc tính tiêu đề của blog. Tôi sẽ giải thích cho bạn các câu lệnh điều kiện if/else ở trên. Ở câu lệnh đầu tiên, khi ai bất kỳ ai mở trang chủ thì sẽ hiển thị tiêu đề blog như là tiêu đề web. Câu lệnh thứ hai dùng để hiển thị các bài viết hoặc tiêu đề trang đầu tiên và hiển thị tiêu đề blog sau khi đăng bài. Cuối cùng là câu lệnh hiển thị trang Page Not Found khi không tìm thấy trang.
- Thẻ <b:skin>: Nơi bạn sẽ viết css. Cách sử dụng cũng giống như thẻ <style>.
- Thẻ <b:section>: Dùng để tạo widget cho các thành phần trong template.
Bước 3: Tạo Header Cho Template
Sau khi đã nắm cấu trúc cơ bản, ta hãy bắt đầu bằng việc tạo header cho blog. Tôi sẽ sử dụng header widget để tiện tùy chỉnh theo yêu cầu. Hãy copy đoạn code dưới đây và đặt vào vị trí bạn muốn hiển thị trong thẻ <body>.
<b:section class='header' id='header' maxwidgets='1' showaddelement='no'> <b:widget id='Header1' locked='true' title='' type='Header'></b:widget> </b:section>
Giải thích đoạn code trên
- <b:section class=”header” id=”header” >: Chắc bạn đã biết qua id và class khi học HTML & CSS. Tôi không cần giải thích nhiều về chúng.
- <b:section maxwidgets =’1′ >: Thiết đặt số lượng widgets tối đa trong 1 thành phần (ở đây là header).
- <b:section showaddelement=’no’ >: Dùng để kích hoạt hoặc vô hiệu quá thêm các tùy chọn Gadget.
- <b:widget id=”header”: Giúp tùy chỉnh widget với CSS.
- <b:widget locked=”true”: Thẻ này cho phép bạn khóa và mở khóa widget bằng cách chọn true hay false. Khi chọn “true” bạn không thể chỉnh sửa thông qua trang Bố Cục (Layout page).
