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/></title><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> <b:skin><![CDATA[ body {<b:widget id='Navbar1' locked='true' title='Navbar' type='Navbar'/>background:white; color:black; } #Navbar1 {dispaly:none!important;} ]]></b:skin> </head> <body> <b:section class='navbar' id='navbar' maxwidgets='1' showaddelement='no'> </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).
Bước 4: Tạo Widget Pages 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:section></b:widget>
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.
Bước 5: Tạo Widget 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:section></b:widget>
Sau khi lưu đoạn code trên, bạn hãy tải lại file xml, nó sẽ tự động thêm các đoạn code mặc định của mục Blog Posts. Và bạn chỉ cần dùng CSS để tùy chỉnh theo nhu cầu của bạn.
Bước 6: 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
class và id 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.
Trong thời gian chờ phần 2, các bạn hãy đón xem những thủ thuật cho template cho Blogspot mà tôi chia sẽ trên chuyên mục Blogspot/ Blogger nhé. Nếu bạn muốn tìm hiểu thêm về WordPress thì bạn cũng có thể xem qua các bài viết hưỡng dẫn WordPress cơ bản.
Chào tạm biệt và hẹn gặp lại các bạn trong phần 2 nhé !
Xem bài cùng Serie
Không có nhận xét nào:
Đăng nhận xét