[Blogger Template] Cấu trúc giao diện Blogger

Blogger Template

{ 0 comments }

Đội ngũ phát triển mảng Blogger của Google đã cố gắng để làm cho sản phẩm của họ trở nên đơn giản và dễ tiếp cận hơn với công cụ Template Design. Nếu bạn muốn thay đổi một số phần tử nhỏ như phông chữ, hình nền, bố cục… công cụ này sẽ giúp bạn làm việc đó một cách khá dễ dàng. Tuy nhiên khi bạn muốn thiết kế giao diện chuyên nghiệp hơn cho blogger thì bạn cần phải hiểu cấu trúc  Blogger Template, các hàm API, javascripts… Trong Series : “Tạo Template Blogger” này các mình sẽ cùng chia sẻ với các bạn cách để tùy chỉnh và thiết kế template cho blogger từ a-z.

Tạo Template Blogger

Tạo Template Blogger

Để có thể làm theo thì các bạn cần kiến thức html cơ bản, kiến thức javascript cơ bản, kiến thức CSS cơ bản và các công cụ cần thiết để có thể code dễ dàng như Sublime Text

Blogger Template được viết trên ngôn ngữ XML, cấu trúc giao diện của Blogger gồm bốn phần:

Phần thứ nhất

Phần đầu tiên của Template gồm những dòng code nằm trong đoạn từ đầu file XML tới thẻ <head>. Những dòng code này có tác dụng xác định toàn bộ tài liệu ở định dạng XML và làm theo tất cả các quy tắc của ngôn ngữ đánh dấu XML. Đây là một phần quan trọng cho tất cả các Template và chúng ta không cần thiết phải chỉnh sửa nó.

Đoạn code trong phần này như sau:

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html expr:dir='data:blog.languageDirection' 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>

Phần thứ hai

Phần này bắt đầu từ thẻ <head> tới thẻ <b:skin> và nó chứa các thẻ cần thiết cho tiêu đề của một trang web như thẻ meta, favicon… Chúng ta có thể chỉnh sửa hoặc thêm các liên kết tới các file css, thêm phần miêu tả, từ khóa cho website thông qua thẻ meta…

Xem thêm  [Blogger Template] Các kiểu trang trong Blogger - Blogspot

Một đoạn code ví dụ về phần này:

<head>
<b:if cond='data:blog.metaDescription != &quot;&quot;'>
<meta expr:content='data:blog.metaDescription' name='description'/>
</b:if>
<meta content='1 days' name='revisit-after'/>
<meta content='en' http-equiv='content-language'/>
<b:include data='blog' name='all-head-content'/>

<b:if cond='data:blog.url == data:blog.homepageUrl'>
</b:if>
<!-- Start www.tohaitrieu.net: Changing the Blogger Title Tag  -->
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<title><data:blog.pageTitle/></title>
<b:else/>
<title><data:blog.pageName/> ~ <data:blog.title/></title>
</b:if>
<!-- End www.tohaitrieu.net: Changing the Blogger Title Tag  -->

<link href='YOUR-FAVICON-URL' rel='shortcut icon' type='image/vnd.microsoft.icon'/>

    <b:skin>

Phần thứ ba

Bắt đầu từ <b:skin> tới </b:skin> chứa các thẻ css bố cục và định dạng cho Blogger Template về màu sắc, phông chữ, hình nền…. Nếu bạn có kiến thức về CSS tốt bạn có thể nâng cao độ tương tác với khách truy cập lên rất nhiều.

Phần thứ tư

Bao gồm toàn bộ code nằm trong thẻ <body> và </body>. Đây là phần chính của một template blogger. Phần này là bố cục của website gồm danh sách bài viết, hiển thị bình luận… Nó chưa các thẻ HTML, XML, và các thẻ dành riêng cho blogger. Phần này cũng tương tự như các WordPress template nếu bạn đã từng sử dụng qua WordPress, bạn sẽ thấy nó có nhiều điểm khá tương đồng.

Trên đây là cấu trúc giao diện của Template Blogger. Mục đích mình phân chia ra như thế để cho các bạn dễ hình dung mình cần phải làm gì và làm ở phần nào, dễ bề cho việc chỉnh sửa sau này. Ở bài viết sau chúng ta sẽ cùng tìm hiểu các loại trang có trong Blogger.

Góp ý cho Tô Triều