Có rất, rất nhiều template miễn phí đẹp dành cho blogspot, tuy nhiên mỗi người
mỗi suy nghĩ và mỗi cách nhìn khác nhau nên có thể đôi khi bạn muốn có một
template hoàn toàn theo ý của mình.
Ở dòng
Bạn có thể tự thiết kế cho mình một template mà không cần phải lục tung google
để tìm ra cái template ưng ý nhất. Dĩ nhiên để làm được điều đó bạn cần phải
có một chút ít kiến thức cơ bản về HTML, CSS và Javascript.
Lợi ích của việc làm cho mình một template là bạn có cái template của mình và
theo ý mình, bên cạnh đó bạn sẽ tự nâng trình của mình về html, css và
javascript mỗi ngày.
Để viết template cho blogspot thì bạn phải sử dụng một cái khung cơ bản để mọi
thứ có thể hoạt động.
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'><head></head><body></body></html>
Dòng đầu tiên của template được khai báo như một xml để có thể giúp trình
duyệt hiểu và xử lý code một cách chính xác.
<!DOCTYPE html> cho biết là sẽ sử dụng
HTML5 trong xml và giúp trình duyệt xử lý template hiệu quả hơn.
Tiếp theo là phần khung để viết code cho template bắt đầu từ
<html> và kết thức là </html>. Trong html người ta phân nó ra làm
2 phần chính: head, body.
Để xử lý các vấn đề về SEO, CSS, khai báo web,.... thì chúng ta cần sử dụng
đến thẻ <head></head>
<head><b:include data='blog' name='all-head-content' /><title><data:blog.pageTitle/></title><meta content='width=device-width, initial-scale=1' name='viewport' /><b:skin><![CDATA[/* Viết css cho template tại đây... */]]></b:skin></head>
Bạn có thể tìm hiểu về kỹ thuật SEO để áp dụng code cho phần này.
Trong phần này thẻ <meta content='width=device-width, initial-scale=1'
name='viewport' /> là giúp cho trình duyệt hiểu về việc phóng to thu nhỏ
cửa sổ web của bạn. Nếu bạn có ý định sử dụng giao diện responsive cho web của
mình thì nhất định phải sử dụng dòng này.
Phần body là phần chứa tất cả những gì để tao nên một hình dáng cho
website. trong phần này bạn chia nó ra 3 phần cơ bản: đầu, thân và chân.
Ở phần đầu <header> thường dùng để thể hiện logo, tiêu đề trang web hay
diễn giải trang web, nếu thích bạn cũng có thê bỏ menu vào phần này.
<header><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='' type='Header'></b:widget></b:section></header>
Để widget có thể hoạt động thì bạn phải cho nó vào trong
<b:section></b:section>.
maxwidgets='1' là chỉ cho phép tối đa một widget trong section mà thôi.
showaddelement='no' là hiển thị hay không hiển thị chức năng thêm một
widget mới. "no" là không cho phép, "yes" là có cho phép.
locked='true' là có cho bật chức năng xóa widget trong layout hay
không. "true' là đồng ý, "false" là không đồng ý.
Để hiển thị bài viết đã đăng thì bạn cần đến phần rất quan trọng là blog posts
section. Đây có thể được xem là phần body của web để tạo được phần này thì sử
dụng đoạn code bên dưới.
<b:section class='main' id='main' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' /></b:section>
Sau khi bạn thêm đoạn cod này vào và bấm lưu thì hệ thống sẽ tự động thêm rất
nhiều thông tin bổ sung để có đầy đủ những gì cần thiết cho việc hiển thị bài
đăng.
Nếu bạn muốn tạo một sidebar cho web của bạn thì bạn thêm đoạn code bên dưới
vào.
<aside><b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'></b:section></aside>
Đã có phần đầu và phần thân thì dĩ nhiên cần phải có phần thân để cho ra một
trang web trọn vẹn. Phần chân này thường làm nơi để bạn báo cho thế giới biết
về template này là do bạn tạo và thuộc sở hữu của ai.
<footer><div>Copyright © 2019 <strong><data:blog.title/></strong></div></footer>
Như vậy là đã có một khung cơ bản nhất cho một template mà bạn muốn tự thiết
kế.
<?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE html><html lang='en-US' 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' xmlns:og='http://ogp.me/ns#'><head><b:include data='blog' name='all-head-content' /><title><data:blog.pageTitle/></title><meta content='width=device-width, initial-scale=1' name='viewport' /><b:skin><![CDATA[/* Custom CSS code goes here... */]]></b:skin></head><body><div id="blog-wrapper"><header><b:section class='header' id='header' maxwidgets='1' showaddelement='no'><b:widget id='Header1' locked='true' title='' type='Header'></b:widget></b:section></header><div id="content-wrapper"><div class="content-table"><div class="content-row"><b:section class='main column' id='main' showaddelement='yes'><b:widget id='Blog1' locked='true' title='Blog Posts Section' type='Blog' /></b:section><aside class="column"><b:section class='sidebar' id='sidebar' maxwidgets='' showaddelement='yes'></b:section></aside><div></div></div><footer><div>Copyright © 2019 <strong><data:blog.title/></strong></div></footer></div></body></html>
Để trang web mình đẹp thì phần quan trọng nhất (theo tui) là phần css vì vậy
hãy xây dụng css cho riêng bạn để có một template có một không hai.
<b:skin><![CDATA[/*1. CSS Reset2. Core Layout Structure3. Template Design4. Utility Classes5. Media Queries*//* Template's Core Layout */#blog-wrapper {width: 1024px;margin: 0 auto;}#content-wrapper {width: 100%;height: 100%;overflow: hidden;}.content-table {display: table;border-collapse: separate;}.content-row {display: table-row;}#main {padding: 25px 25px 25px 20px;width: auto;height: 100%;display: table-cell;}aside {width: 32%;height: 100%;border-left: 1px solid #ddd;padding: 25px;display: table-cell;}footer {width: 100%;clear: both;border-top: 1px solid #ddd;padding: 20px;}]]></b:skin>