Thứ Bảy, 18 tháng 10, 2014

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 == &quot;index&quot;'>
<data:blog.pageTitle/>
<b:else/>
<b:if cond='data:blog.pageType != &quot;error_page&quot;'>
<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.

  1. 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.
  2. 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.
  3. Thẻ <b:skin>: Nơi bạn sẽ viết css. Cách sử dụng cũng giống như thẻ <style>.
  4. Thẻ <b:section>: Dùng để tạo widget cho các thành phần trong template.
Sau khi đã có code mẫu thì blog của bạn nó sẽ trắng xóa và bay giờ chúng ta bắt đầu thêm các phần tiếp theo cho nó.

Tạo thẻ 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>

Trong đó :

  1. <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.
  2. <b:section maxwidgets =’1′ >: Thiết đặt số lượng widgets tối đa trong 1 thành phần (ở đây là header).
  3. <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.
  4. <b:widget id=”header”: Giúp tùy chỉnh widget với CSS.
  5. <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).

Tạo wideget page menu:

Công việc tạo pages menu về mặt code cũng không có nhiều khác biệt so với việc tạo widget Header. Chủ yếu ở kỹ năng CSS của bạn. Bạn chỉ cần chèn đoạn code dưới đây vào vị trí bạn muốn hiển thị.
<b:section class='tabs' id='crosscol' maxwidgets='1' showaddelement='yes'>
<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
</b:widget>
</b:section>
Sau khi chèn bạn chỉ cần thêm các thẻ HTML và dùng CSS để chỉnh sửa theo ý mình.

Tạo Wideget content :

Tới đây chắc các bạn sẽ thắc mắc widget Content là gì ? Nếu muốn biết bạn chỉ cần vào mục Layout (bố cục) trong Dashboard Blogger, bạn sẽ thấy một mục lớn tên Blog Posts có nhiệm vụ hiển thị các bài đăng của bạn đó chính là widget Content. 
Sau đó bạn chỉ cần chèn đoạn code dưới đây đề hiện thị widget Content.
<b:section class='main' id='main' preferred='yes' showaddelement='no'>
<b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>
</b:widget>
</b:section>

Tạo khu vực chèn Gadgets :

Năm bước trên đã giúp bạn có template khá đầy đủ. Ở bước này tôi sẽ hướng dẫn bạn thêm khu vực chèn Gadgets, bạn có thể áp dụng nó cho sidebar hoặc footer. Chèn đoạn code dưới đây vào khu vực bạn chọn.
<b:section class='' id='' maxwidgets='' showaddelement='yes'>
 </b:section> 
Ở đoạn code trên với classid là tùy bạn đặt còn maxwidget là số widgets sẽ hiển thị (tối đa 10). Nếu bạn muốn bật tính năng chỉnh sửa Gadgets thì dòng showaddelement để là 'yes' nếu không thì để ‘no’.
Qua 6 bước trên thì ít nhiều gì thì bạn hiểu được cấu trúc template Blogspot. Nhưng công việc ngồi code toàn bộ file xml chỉ dành cho các webmaster chuyên nghiệp còn đối với newbies hay web design thông thường thì việc ngồi code như vậy thì đúng là thảm họa. Nhưng Blogspot lại không có những blank theme như WordPress nên việc tạo template khá khó khăn cho dân không chuyên. Vì vậy ở phần sau của bài viết tôi sẽ hướng dẫn các bạn dùng phần mềm để thiết kế, công việc sẽ trở nên đơn giản hơn nhiều.

0 nhận xét:

Đăng nhận xét