Blogspot sử dụng ngôn ngữ lập trình XML. Để có được trang blog như mong muốn, yêu cầu bạn phải có kiến thức về XML, HTML, CSS, JavaScript, JQuery.
I - GIỚI THIỆU
1. Blog là gì?
“Blog” là một thuật ngữ có nguồn gốc từ cặp từ “Web Log” hay “Weblog” dùng để chỉ một tập san cá nhân trực tuyến, một quyển nhật ký dựa trên nền web hay một bản tin trực tuyến nhằm thông báo những sự kiện xảy ra hàng ngày về một vấn đề gì đó.
2. Blogspot là gì?
Blogspot (hay blogger) là một hệ thống phát hành blog được phát triển bởi Pyra Labs và được Google mua lại vào năm 2003. Thông thường, các trang blog được lưu trữ tại Google với tên miền phụ của blogspot.com (ví dụ : tbnb.blogspot.com).
3. Ưu điểm của Blogspot?
- Miễn phí.
- Dễ tạo (chỉ cần 1 tài khoản gmail).
- Có nhiều mẫu template.
- Index bài viết nhanh.
- Upload ảnh không sợ hết dung lượng.
- Hỗ trợ hiển thị cho các thiết bị di động.
- Dễ quản lý và có tính bảo mật cao.
- Có thể dùng tên miền riêng (.vn, .com, .net, .info...) để chạy website trên nền tảng của Blogspot mà không có giới hạn nào.
II - TẠO TRANG BLOG VỚI BLOGGER
- Bạn vào trang http://www.blogger.com và đăng nhập bằng tài khoản gmail của bạn.
- Sau khi đăng nhập thành công, click vào nút . Trong cửa sổ hiện lên, bạn hoàn thành 3 việc sau:
Nếu sau khi nhập địa chỉ bạn nhận được thông báo: "Rất tiếc, địa chỉ blog này không khả dụng." thì bạn thử nhập một địa chỉ khác cho đến khi thành công bạn sẽ nhận được thông báo: "Địa chỉ blog này có sẵn."
+ Mẫu: nếu bạn không tự thiết kế được mẫu riêng cho mình thì bạn có thể dùng những mẫu có sẵn do Blogger cung cấp như: Đơn giản, Chế độ xem động, Cửa sổ hình ảnh, Thú vị, Hình mờ, Trừu tượng, Du lịch.
- Xong, bạn click vào nút . Đến đây bạn đã có được một trang blog hoàn chỉnh để đăng bài viết.
III - TÌM HIỂU CẤU TRÚC TEMPLATE CỦA BLOGSPOT
Template của Blogspot có dạng như sau:
Các thẻ đặc biệt trong template của Blogspot:
1. Thẻ b:section (phần, khu vực)
Blogspot sử dụng thẻ section để phân chia trang blog ra thành nhiều khu vực như header (phần đầu trang), sidebar (thanh công cụ nằm bên cạnh bài viết), main (phần chính hiển thị bài viết), footer (phần chân trang),vv. Mỗi section trong template đều có một thẻ mở và một thẻ đóng. Ví dụ:
Một thẻ section có thể có những thuộc tính sau:
Một section có thể chứa một hoặc nhiều widget, nhưng nó không thể chứa code hoặc section khác. Nếu bạn muốn chèn thêm code vào giữa hoặc xung quanh các widget trong một section, bạn cần phải chia section đó thành hai hay nhiều section mới.
2. Thẻ b:widget (tiện ích)
Widget là phần tử con của section. Các dữ liệu thực tế trong mỗi widget được lưu trữ trong cơ sở dữ liệu của Blogger và chỉ được truy cập khi widget đó cần được hiển thị. Code widget có dạng như sau (ví dụ các widget cho phần đầu trang 'header'):
Một thẻ widget có thể có những thuộc tính sau:
Lưu ý: khi blog được xuất bản, các thẻ <b:section> và <b:widget> sẽ được thay thế bằng thẻ <div> với các id đã được chỉ định. Vì vậy, khi thiết lập giao diện cho blog bằng css các bạn có thể ghi: div#header, div#myList, vv.
3. Thẻ b:includable và thẻ b:include
Include rất hữu ích nếu bạn có một phần code và muốn tái sử dụng chúng ở những nơi khác nhau, hoặc trong những trường hợp nhất định. Để làm được điều này, bạn hãy viết nội dung bên trong thẻb:includable, sau đó sử dụng thẻ b:include ở bất cứ nơi nào bạn muốn nó hiển thị.
Cú pháp tổng quát:
Những thuộc tính của thẻ includable:
Nếu bạn tạo nhiều thẻ includable với những id khác nhau, chúng sẽ không tự động hiển thị. Tuy nhiên, nếu bạn tạo một thẻ includable vớiid='new', sau đó bạn có thể tham chiếu nó trong thẻ includable chính với <b: include name='new'/> và nó sẽ hiển thị theo cách đó.
Những thuộc tính của thẻ include:
Ví dụ về cách sử dụng thẻ b:includable và thẻ b:include:
4. Thẻ data: (dữ liệu)
Thẻ data dùng để lấy ra dữ liệu một thuộc tính của một thành phần nào đó. Cú pháp tổng quát như sau:
tên: là tên một thuộc tính của dữ liệu bạn muốn sử dụng.
tên1, tên2: tên2 là tên một trong những thuộc tính của tên1.
Ví dụ:
Có hai loại dữ liệu được sử dụng:
- Dữ liệu dùng được cho toàn bộ trang blog: bạn có thể sử dụng bất cứ nơi nào trong blog theo cú pháp sau:
blog có những thuộc tính sau:
- Dữ liệu chỉ dùng được cho từng widget:
Page Header
Blog Posts
Đây là phần chính của mọi blog, và cũng là phần phức tạp nhất. Nếu bạn muốn thay đổi bất kỳ điều gì trong phần này thì hãy tham khảo trước ý kiến của những người có chuyên môn nhé. Bảng bên dưới là tất cả những dữ liệu có thể sử dụng được trong widget này:
Blog Archives (lưu trữ blog)
Profile Widget (tiện ích hồ sơ)
Đối với blog chỉ có một tác giả, widget hồ sơ chứa các thông tin như bảng bên dưới (lưu ý: để truy cập vào các phần khác của dữ liệu hình ảnh, bạn sẽ sử dụng định dạng như sau <data:photo.url/> ).
Đối với hồ sơ nhiều tác giả, profile widget sẽ có các thông tin:
Text/HTML/JavaScript Widget (tiện ích chèn văn bản, code HTML, hoặc code JavaScript vào blog)
Feed Widget (tiện ích nguồn cấp): Nội dung feed được nạp một cách tự động bởi Google AJAX API sau khi được trả lại bởi trình duyệt. Nó chỉ có thể được trang trí bằng CSS.
Picture Widget (tiện ích hình ảnh): chỉ chứa một hình ảnh, và cung cấp các dữ liệu của ảnh đó.
Labels Widget (tiện ích nhãn) bao gồm một danh sách tất cả các nhãn được dùng trong blog.
List Widget (tiện ích danh sách) là mẫu danh sách đơn giản nhất. Mỗi mục chỉ chứa một đoạn văn bản đơn thuần, không có bất kỳ loại dữ liệu nào khác.
Link List Widget (tiện ích danh sách liên kết)
Logo Widget (tiện ích logo)
5. Thẻ b:loop (vòng lặp)
Thẻ b:loop cho phép bạn lặp đi lặp lại một phần nội dung nhiều lần. Thẻ b:loop thường được sử dụng để tạo ra danh sách các bài viết cho mỗi nhãn, mỗi bình luận, v.v.
Cú pháp tổng quát của thẻ b:loop :
biến: có thể đặt một tên bất kỳ (không có khoảng trống, có thể dùng dấu "-" hoặc "_" thay cho khoảng trống). Qua mỗi vòng lặp, biến sẽ được gán một hạng mục mới tương ứng trong dữ_liệu_danh_sách.
dữ_liệu_danh_sách: có thể là bất kỳ mảng dữ liệu nào và xem như là một danh sách các hạng mục.
Ví dụ, trong widget bài viết (posts) thì posts là một danh sách gồm tất cả các bài viết trong blog. Đoạn code vòng lặp sau sẽ lặp qua từng bài viết, và mỗi vòng lặp sẽ in ra màn hình tiêu đề của bài viết đó.
Thẻ b:loop cho phép bạn lặp qua một dãy số trong khoảng nào đó, như là '3 to 9' (từ 3 đến 9), '28 to 21' (từ 28 đến 21). Ví dụ sau sẽ tạo ra một danh sách có thứ tự 4, 5, 6, 7, 8.
Kết quả:
4
5
6
7
8
Thẻ b:loop cũng có thuộc tính index (đây là thuộc tính tùy chọn), lúc ban đầu nó sẽ mang giá trị 0 và tăng thêm 1 qua mỗi vòng lặp. Ví dụ:
Kết quả:
6. Thẻ b:if (điều kiện)
Bạn có thể sử dụng các thẻ điều kiện để hiển thị nội dung nhất định trong những trường hợp đặc biệt, và những nội dung khác trong những trường hợp khác. Ví dụ bạn có thể hiển thị một văn bản nhất định trên trang chủ, còn các bài viết thì sẽ hiển thị trên trang bài viết.
Cú pháp tổng quát của thẻ b:if :
Thẻ <b: elseif> và thẻ <b: else/> là thẻ tùy chọn. Nếu không có chúng, thì kết quả sẽ là Nội_dung_1 (nếu điều_kiện_1 đúng) hoặc không có gì (nếu điều_kiện_1 sai). Tuy nhiên, thẻ đóng </b: if> là bắt buộc.
Những điều kiện thường được sử dụng:
7. Thẻ b:switch (chuyển đổi)
Bạn có thể sử dụng thẻ b:switch giống như thẻ b:if và b:elseif. Lợi thế của thẻ b:switch là bạn không cần phải lặp đi lặp lại tên biến. Bạn có thể dễ dàng xem xét mỗi trường hợp và trường hợp mặc định.
Cú pháp tổng quát:
Ví dụ:
8. Thẻ b:eval (đánh giá)
Bạn có thể sử dụng thẻ b:eval để đánh giá một biểu thức phức tạp hơn là một thẻ data chuẩn.
Cú pháp tổng quát:
Ví dụ:
I - GIỚI THIỆU
1. Blog là gì?
“Blog” là một thuật ngữ có nguồn gốc từ cặp từ “Web Log” hay “Weblog” dùng để chỉ một tập san cá nhân trực tuyến, một quyển nhật ký dựa trên nền web hay một bản tin trực tuyến nhằm thông báo những sự kiện xảy ra hàng ngày về một vấn đề gì đó.
2. Blogspot là gì?
Blogspot (hay blogger) là một hệ thống phát hành blog được phát triển bởi Pyra Labs và được Google mua lại vào năm 2003. Thông thường, các trang blog được lưu trữ tại Google với tên miền phụ của blogspot.com (ví dụ : tbnb.blogspot.com).
3. Ưu điểm của Blogspot?
- Miễn phí.
- Dễ tạo (chỉ cần 1 tài khoản gmail).
- Có nhiều mẫu template.
- Index bài viết nhanh.
- Upload ảnh không sợ hết dung lượng.
- Hỗ trợ hiển thị cho các thiết bị di động.
- Dễ quản lý và có tính bảo mật cao.
- Có thể dùng tên miền riêng (.vn, .com, .net, .info...) để chạy website trên nền tảng của Blogspot mà không có giới hạn nào.
II - TẠO TRANG BLOG VỚI BLOGGER
- Bạn vào trang http://www.blogger.com và đăng nhập bằng tài khoản gmail của bạn.
- Sau khi đăng nhập thành công, click vào nút . Trong cửa sổ hiện lên, bạn hoàn thành 3 việc sau:
| + Tiêu đề | Ví dụ: TBNB'S BLOG | |
| + Địa chỉ | Ví dụ: tbnb.blogspot.com |
+ Mẫu: nếu bạn không tự thiết kế được mẫu riêng cho mình thì bạn có thể dùng những mẫu có sẵn do Blogger cung cấp như: Đơn giản, Chế độ xem động, Cửa sổ hình ảnh, Thú vị, Hình mờ, Trừu tượng, Du lịch.
- Xong, bạn click vào nút . Đến đây bạn đã có được một trang blog hoàn chỉnh để đăng bài viết.
III - TÌM HIỂU CẤU TRÚC TEMPLATE CỦA BLOGSPOT
Template của Blogspot có dạng như sau:
<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE html>
<html b:version='2' class='v2' 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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=851' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title>
<data:blog.pageName/> - <data:blog.title/>
</title>
<b:skin><![CDATA[ ]]</b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>
</body>
</html>
<!DOCTYPE html>
<html b:version='2' class='v2' 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>
<meta content='IE=EmulateIE7' http-equiv='X-UA-Compatible'/>
<b:if cond='data:blog.isMobile'>
<meta content='width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0' name='viewport'/>
<b:else/>
<meta content='width=851' name='viewport'/>
</b:if>
<b:include data='blog' name='all-head-content'/>
<title>
<data:blog.pageName/> - <data:blog.title/>
</title>
<b:skin><![CDATA[ ]]</b:skin>
</head>
<body>
<b:section class='main' id='main' showaddelement='no'><b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'/></b:section>
</body>
</html>
Các thẻ đặc biệt trong template của Blogspot:
1. Thẻ b:section (phần, khu vực)
Blogspot sử dụng thẻ section để phân chia trang blog ra thành nhiều khu vực như header (phần đầu trang), sidebar (thanh công cụ nằm bên cạnh bài viết), main (phần chính hiển thị bài viết), footer (phần chân trang),vv. Mỗi section trong template đều có một thẻ mở và một thẻ đóng. Ví dụ:
<b:section id='header' class='header' maxwidgets='1'showaddelement='no'>
</b:section>
</b:section>
Một thẻ section có thể có những thuộc tính sau:
| id | (bắt buộc) một tên duy nhất dùng để đặt tên cho section. |
| class | thường được đặt là 'nav', 'header', 'main', 'sidebar', 'footer'. Nếu sau này bạn thay đổi template, những tên này sẽ giúp cho Blogger xác định được cách tốt nhất để chuyển đổi nội dung của bạn. Tuy nhiên, bạn vẫn có thể đặt những tên khác nếu bạn muốn. |
| maxwidgets | số lượng widget tối đa có thể được đặt trong section đó. |
| showaddelement | có thể là 'yes' (có), hoặc 'no' (không). Mặc định là 'yes'. Thuộc tính showaddelement cho phép hiển thị hoặc không hiển thị liên kết "Thêm Tiện ích" cho section trong phần Page Elements (bố cục) của Blogger. |
| growth | có thể là 'horizonal' (nằm ngang), hoặc 'vertical' (thẳng đứng). Mặc định là vertical. Thuộc tính growth xác định cách sắp xếp các widget trong section nằm cạnh nhau hay xếp chồng lên nhau. |
Một section có thể chứa một hoặc nhiều widget, nhưng nó không thể chứa code hoặc section khác. Nếu bạn muốn chèn thêm code vào giữa hoặc xung quanh các widget trong một section, bạn cần phải chia section đó thành hai hay nhiều section mới.
2. Thẻ b:widget (tiện ích)
Widget là phần tử con của section. Các dữ liệu thực tế trong mỗi widget được lưu trữ trong cơ sở dữ liệu của Blogger và chỉ được truy cập khi widget đó cần được hiển thị. Code widget có dạng như sau (ví dụ các widget cho phần đầu trang 'header'):
<b:widget id='header' type='HeaderView' locked='yes'/>
<b:widget id='myList' type='ListView' locked='no' title='My Favorite Things'/>
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Blog Archive'type= 'BlogArchive'/>
<b:widget id='myList' type='ListView' locked='no' title='My Favorite Things'/>
<b:widget id='BlogArchive1' locked='false' mobile='yes' title='Blog Archive'type= 'BlogArchive'/>
Một thẻ widget có thể có những thuộc tính sau:
| id | (bắt buộc) một tên duy nhất dùng để đặt tên cho widget. |
| type | cho biết kiểu của widget. Widget của Blogger gồm những kiểu sau: BlogArchive, Blog, Feed, Header, HTML, SingleImage, LinkList, List, Logo, BlogProfile, Navbar, VideoBar, NewsBar. |
| locked | có thể là 'yes' (có), hoặc 'no' (không). Mặc định là 'no'. Nếu một widget có thuộc tính locked='yes' thì widget đó không thể xóa hoặc di chuyển trong phần Page Element (bố cục) của Blogger. |
| title | hiển thị tiêu đề cho widget. Nếu không chỉ định thuộc tính title, tiêu đề hiển thị mặc định sẽ là 'List1'. |
| pageType | có thể là 'all', 'archive' , 'main', 'item'. Mặc định là 'all'. Các widget chỉ hiển thị trên các trang được chỉ định trong blog của bạn (trong phần Page Element (bố cục) của Blogger, tất cả các widget đều được hiển thị). |
| mobile | có thể là 'yes' (có), 'no' (không) hoặc 'only' (chỉ khi). Nếu không chỉ định thuộc tính mobile, mặc định sẽ là 'default'. Thuộc tính mobile cho phép ('yes'), hoặc không cho phép ('no') widget hiển thị trên thiết bị di động. Với thuộc tính mobile='only' thì widget đó chỉ hiển thị trên thiết bị di động mà không hiển thị trên máy tính bàn hoặc laptop. Khi không chỉ định thuộc tính mobile cho widget ('default'), chỉ có những widget thuộc kiểu sau có thể hiển thị được trên thiết bị di động: Header, Blog, Profile, PageList, AdSense, Attribution. |
Lưu ý: khi blog được xuất bản, các thẻ <b:section> và <b:widget> sẽ được thay thế bằng thẻ <div> với các id đã được chỉ định. Vì vậy, khi thiết lập giao diện cho blog bằng css các bạn có thể ghi: div#header, div#myList, vv.
3. Thẻ b:includable và thẻ b:include
Include rất hữu ích nếu bạn có một phần code và muốn tái sử dụng chúng ở những nơi khác nhau, hoặc trong những trường hợp nhất định. Để làm được điều này, bạn hãy viết nội dung bên trong thẻb:includable, sau đó sử dụng thẻ b:include ở bất cứ nơi nào bạn muốn nó hiển thị.
Cú pháp tổng quát:
<b:includable id='main' var='thiswidget'>
[chèn bất cứ nội dung nào bạn muốn ở đây]
</b:includable>
[chèn bất cứ nội dung nào bạn muốn ở đây]
</b:includable>
Những thuộc tính của thẻ includable:
| id | (bắt buộc) một tên duy nhất dùng để đặt tên cho thẻ includable. Mỗi widget phải có một thẻ includable có id='main'. |
| var | (tùy chọn) một tên dùng để tham chiếu dữ liệu trong phần này. |
Nếu bạn tạo nhiều thẻ includable với những id khác nhau, chúng sẽ không tự động hiển thị. Tuy nhiên, nếu bạn tạo một thẻ includable vớiid='new', sau đó bạn có thể tham chiếu nó trong thẻ includable chính với <b: include name='new'/> và nó sẽ hiển thị theo cách đó.
Những thuộc tính của thẻ include:
| name | (bắt buộc) một tên dùng để đặt tên cho thẻ include, nó phải tương ứng với id của một thẻ b:includable tồn tại trong cùng widget. |
| data | (tùy chọn) một biểu thức hoặc một mẫu dữ liệu để truyền đến phần includable, nó sẽ trở thành giá trị của thuộc tính vartrong includable. |
| cond | (tùy chọn) một biểu thức làm cho thẻ include chỉ thực hiện khi kết quả của nó là đúng (giống như thuộc tính cond của thẻ b:if). |
Ví dụ về cách sử dụng thẻ b:includable và thẻ b:include:
<b:includable id='main'>
<b:loop var='p' index='index' values='posts'>
<b:include name='post' data='p' cond='index < 10'/> <!-- < là dấu nhỏ hơn (<) -->
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
Title: <data:post.title/>
</b:includable>
<b:loop var='p' index='index' values='posts'>
<b:include name='post' data='p' cond='index < 10'/> <!-- < là dấu nhỏ hơn (<) -->
</b:loop>
</b:includable>
<b:includable id='post' var='post'>
Title: <data:post.title/>
</b:includable>
4. Thẻ data: (dữ liệu)
Thẻ data dùng để lấy ra dữ liệu một thuộc tính của một thành phần nào đó. Cú pháp tổng quát như sau:
<data:tên/>
hoặc là:
<data:tên1.tên2/>
tên: là tên một thuộc tính của dữ liệu bạn muốn sử dụng.
tên1, tên2: tên2 là tên một trong những thuộc tính của tên1.
Ví dụ:
<data:title/>
<!-- Lấy ra tiêu đề của widget hiện tại -->
<data:blog.homepageUrl/>
<!-- Lấy ra địa chỉ trang chủ của blog -->
<data:post.title/>
<!-- Lấy ra tiêu đề của bài viết -->
<!-- Lấy ra tiêu đề của widget hiện tại -->
<data:blog.homepageUrl/>
<!-- Lấy ra địa chỉ trang chủ của blog -->
<data:post.title/>
<!-- Lấy ra tiêu đề của bài viết -->
Có hai loại dữ liệu được sử dụng:
- Dữ liệu dùng được cho toàn bộ trang blog: bạn có thể sử dụng bất cứ nơi nào trong blog theo cú pháp sau:
<data:blog.thuộc_tính/>
blog có những thuộc tính sau:
| title | tiêu đề của blog |
| pageType | kiểu trang hiện tại (item (trang bài viết), archive (trang lưu trữ), index (trang danh mục)) |
| url | địa chỉ trang hiện tại |
| homepageUrl | địa chỉ trang chủ |
| pageTitle | tiêu đề của trang hiện tại (thường thì nó vẫn là tiêu đề của blog, nhưng có thể có thêm thông tin của trang lưu trữ hoặc trang bài viết) |
| encoding | mã hóa sử dụng cho blog, ví dụ: UTF-8 |
| languageDirection | tương ứng với 'ltr' (left-to-right: từ trái sang phải) hoặc là 'rtl' (right-to-left: từ phải sang trái) |
| feedLinks | tự động nhận dạng feed link cho đầu trang |
- Dữ liệu chỉ dùng được cho từng widget:
Page Header
| title | tiêu đề của widget hiện tại |
| description | mô tả của blog |
Blog Posts
Đây là phần chính của mọi blog, và cũng là phần phức tạp nhất. Nếu bạn muốn thay đổi bất kỳ điều gì trong phần này thì hãy tham khảo trước ý kiến của những người có chuyên môn nhé. Bảng bên dưới là tất cả những dữ liệu có thể sử dụng được trong widget này:
| feedLinks { url, name, feedType, mimeType } | một danh sách feed cho trang hiện tại. Nếu ở trang chủ, danh sách này sẽ chứa feed của blog; nếu ở trang bài viết, danh sách này chứa thêm feed của nhận xét { mỗi feed trong danh sách bao gồm: địa chỉ của feed, tên của feed (vd: 'Post', 'Comments'), kiểu của feed (Atom hoặc RSS), định dạng của feed } |
| olderPageUrl | nếu có những bài viết cũ hơn bài viết ở trang hiện tại, thì đây là địa chỉ liên kết đến những bài viết đó (không phải tất cả mọi trang đều có liên kết này) |
| olderPageTitle | tiêu đề của liên kết olderPageUrl |
| newerPageUrl | nếu có những bài viết mới hơn bài viết ở trang hiện tại, thì đây là địa chỉ liên kết đến những bài viết đó (không phải tất cả mọi trang đều có liên kết này) |
| newerPageTitle | tiêu đề của liên kết newerPageUrl |
| commentLabel | cụm từ dùng để chỉ số lượng nhận xét, vd: 'comment' |
| authorLabel | cụm từ dùng để chỉ rằng người đã viết bài đăng, vd: 'posted by' |
| timestampLabel | cụm từ dùng để chỉ rằng bài viết được đăng lúc nào, vd: 'posted at' |
| postLabelsLabel | cụm từ giới thiệu về nhãn bài viết, vd: 'labels for this post' |
| backlinksLabel | cụm từ miêu tả backlinks đến bài viết này, vd 'links to this post' |
| posts { dateHeader, id, title, body, author, url, timestamp, labels { name, url, isLast }, allowComments, numComments, showBacklinks, numBacklinks, addCommentUrl, emailPostUrl, editUrl, feedLinks { url, name, feedType, mimeType }, comments { id, body, timestamp, author, authorUrl, deleteUrl, isDeleted } } | danh sách tất cả bài viết trong trang hiện tại { mỗi post bao gồm: ngày đăng bài viết (nếu có nhiều bài viết đăng cùng một ngày thì dateHeader chỉ xuất hiện trong bài viết đầu tiên), id của bài viết, tiêu đề của bài viết, nội dung của bài viết, tên tác giả của bài viết, địa chỉ cố định của bài viết, thời gian đăng bài viết (không giống như dateHeader, timestamp xuất hiện trong mọi bài viết), danh sách tất cả nhãn bài viết { mỗi label bao gồm: tên của nhãn, liên kết đến trang chứa tất cả những bài viết có cùng nhãn đã chọn, nhãn hiện tại là nhãn cuối ('true') hoặc không phải cuối ('false') }, bài viết hiện tại cho phép đăng nhận xét ('true') hay không cho đăng ('false'), số nhận xét trong bài viết hiện tại, bài viết hiện tại có hiển thị backlinks hay không, số lượng backlinks cho bài viết hiện tại, địa chỉ của form 'add a comment' cho bài viết hiện tại, địa chỉ của form 'email this post' cho bài viết hiện tại, địa chỉ đến form chỉnh sửa bài viết hiện tại, danh sách các feed cụ thể cho bài viết hiện tại (khác với feedLink của toàn bộ blog, vd như nó có thể chứa feed của những nhận xét của bài viết) { mỗi feed bao gồm: địa chỉ của feed, tên của feed (vd: 'post', 'comment'), kiểu của feed (Atom hoặc RSS), định dạng của feed }, danh sách tất cả nhận xét cho bài viết hiện tại (chỉ hiển thị trên kiểu trang bài viết) { mỗi comment bao gồm: id của nhận xét, nội dung của nhận xét, thời gian nhận xét được tạo, tên tác giả của nhận xét (hoặc là 'anonymous' - ẩn danh), liên kết đến địa chỉ dùng để xóa nhận xét hiện tại, nhận xét hiện tại đã bị xóa hay chưa } } |
Blog Archives (lưu trữ blog)
| title | tiêu đề của widget hiện tại |
| style | một trong 3 loại: 'MENU' (thực đơn), 'FLAT' (danh sách phẳng), 'HIERARCHY' (trình đơn thả xuống) |
| data { name, url, post-count } | dữ liệu { bao gồm: tên khoảng thời gian lưu trữ (vd:'August 2015'), liên kết đến trang chứa bài viết trong khoảng thời gian này, số lượng bài viết trong khoảng thời gian này } |
Profile Widget (tiện ích hồ sơ)
Đối với blog chỉ có một tác giả, widget hồ sơ chứa các thông tin như bảng bên dưới (lưu ý: để truy cập vào các phần khác của dữ liệu hình ảnh, bạn sẽ sử dụng định dạng như sau <data:photo.url/> ).
| title | tiêu đề của widget hiện tại |
| userUrl | địa chỉ đến hồ sơ của tác giả |
| location | vị trí từ hồ sơ của tác giả |
| aboutme | thông tin 'About Me' từ trong hồ sơ |
| displayname | tên hiển thị của tác giả |
| photo { url, width, height, alt } | ảnh đại diện của tác giả { bao gồm: địa chỉ của ảnh, chiều rộng của ảnh (px), chiều cao của ảnh (px), văn bản thay thế cho ảnh } |
Đối với hồ sơ nhiều tác giả, profile widget sẽ có các thông tin:
| title | tiêu đề của widget hiện tại |
| authors { displayname, userURL} | danh sách tất cả các tác giả {mỗi tác giả sẽ bao gồm: tên hiển thị của tác giả, địa chỉ đến hồ sơ của tác giả} |
Text/HTML/JavaScript Widget (tiện ích chèn văn bản, code HTML, hoặc code JavaScript vào blog)
| title | tiêu đề của widget hiện tại |
| content | nội dung của widget hiện tại |
Feed Widget (tiện ích nguồn cấp): Nội dung feed được nạp một cách tự động bởi Google AJAX API sau khi được trả lại bởi trình duyệt. Nó chỉ có thể được trang trí bằng CSS.
| title | tiêu đề của widget hiện tại |
| feedUrl | địa chỉ của feed |
Picture Widget (tiện ích hình ảnh): chỉ chứa một hình ảnh, và cung cấp các dữ liệu của ảnh đó.
| title | tiêu đề của widget hiện tại |
| sourceUrl | địa chỉ của ảnh |
| width | chiều rộng của ảnh (px) |
| height | chiều cao của ảnh (px) |
| caption | chú thích của ảnh |
Labels Widget (tiện ích nhãn) bao gồm một danh sách tất cả các nhãn được dùng trong blog.
| title | tiêu đề của widget hiện tại |
| labels { name, count, url} | danh sách tất cả các nhãn {mỗi nhãn bao gồm: tên của nhãn, số lượng bài viết trong mỗi nhãn, địa chỉ đi đến trang nhãn} |
List Widget (tiện ích danh sách) là mẫu danh sách đơn giản nhất. Mỗi mục chỉ chứa một đoạn văn bản đơn thuần, không có bất kỳ loại dữ liệu nào khác.
| fullButton | địa chỉ của nút nhấn Blogger mà bạn đã chọn |
Link List Widget (tiện ích danh sách liên kết)
| title | tiêu đề của widget hiện tại |
| links { name, target} | ddanh sách liên kết {bao gồm: tên của liên kết, địa chỉ của liên kết} |
Logo Widget (tiện ích logo)
| fullButton | địa chỉ của nút nhấn Blogger mà bạn đã chọn |
5. Thẻ b:loop (vòng lặp)
Thẻ b:loop cho phép bạn lặp đi lặp lại một phần nội dung nhiều lần. Thẻ b:loop thường được sử dụng để tạo ra danh sách các bài viết cho mỗi nhãn, mỗi bình luận, v.v.
Cú pháp tổng quát của thẻ b:loop :
<b:loop var='biến' values='dữ_liệu_danh_sách'>
[nội dung sẽ được lặp lại ở đây]
</b:loop>
[nội dung sẽ được lặp lại ở đây]
</b:loop>
biến: có thể đặt một tên bất kỳ (không có khoảng trống, có thể dùng dấu "-" hoặc "_" thay cho khoảng trống). Qua mỗi vòng lặp, biến sẽ được gán một hạng mục mới tương ứng trong dữ_liệu_danh_sách.
dữ_liệu_danh_sách: có thể là bất kỳ mảng dữ liệu nào và xem như là một danh sách các hạng mục.
Ví dụ, trong widget bài viết (posts) thì posts là một danh sách gồm tất cả các bài viết trong blog. Đoạn code vòng lặp sau sẽ lặp qua từng bài viết, và mỗi vòng lặp sẽ in ra màn hình tiêu đề của bài viết đó.
<b:loop var='i' values='data:posts'>
<data:i.title/>
</b:loop>
<data:i.title/>
</b:loop>
Thẻ b:loop cho phép bạn lặp qua một dãy số trong khoảng nào đó, như là '3 to 9' (từ 3 đến 9), '28 to 21' (từ 28 đến 21). Ví dụ sau sẽ tạo ra một danh sách có thứ tự 4, 5, 6, 7, 8.
<b:loop var='i' values='4 to 8'>
<li><data:i /></li>
</b:loop>
<li><data:i /></li>
</b:loop>
Kết quả:
4
5
6
7
8
Thẻ b:loop cũng có thuộc tính index (đây là thuộc tính tùy chọn), lúc ban đầu nó sẽ mang giá trị 0 và tăng thêm 1 qua mỗi vòng lặp. Ví dụ:
<ul>
<b:loop var='number' index='index' values='9 to 7'>
<li>Index: <data:index />, Number: <data:number /></li>
</b:loop>
</ul>
<b:loop var='number' index='index' values='9 to 7'>
<li>Index: <data:index />, Number: <data:number /></li>
</b:loop>
</ul>
Kết quả:
- Index:0, Number:9
- Index:1, Number:8
- Index:2, Number:7
6. Thẻ b:if (điều kiện)
Bạn có thể sử dụng các thẻ điều kiện để hiển thị nội dung nhất định trong những trường hợp đặc biệt, và những nội dung khác trong những trường hợp khác. Ví dụ bạn có thể hiển thị một văn bản nhất định trên trang chủ, còn các bài viết thì sẽ hiển thị trên trang bài viết.
Cú pháp tổng quát của thẻ b:if :
<b:if cond = 'điều_kiện_1' >
[ Nội_dung_1 hiển thị nếu điều_kiện_1 đúng ]
<b: elseif cond = 'điều _kiện_2' >
[ Nội_dung_2 hiển thị nếu điều_kiện_1 không có, hoặc nếu điều_kiện_2 đúng ]
<b: else />
[ Nội_dung_3 hiển thị nếu các điều kiện trên đều sai ]
</b: if >
[ Nội_dung_1 hiển thị nếu điều_kiện_1 đúng ]
<b: elseif cond = 'điều _kiện_2' >
[ Nội_dung_2 hiển thị nếu điều_kiện_1 không có, hoặc nếu điều_kiện_2 đúng ]
<b: else />
[ Nội_dung_3 hiển thị nếu các điều kiện trên đều sai ]
</b: if >
Thẻ <b: elseif> và thẻ <b: else/> là thẻ tùy chọn. Nếu không có chúng, thì kết quả sẽ là Nội_dung_1 (nếu điều_kiện_1 đúng) hoặc không có gì (nếu điều_kiện_1 sai). Tuy nhiên, thẻ đóng </b: if> là bắt buộc.
Những điều kiện thường được sử dụng:
| Điều kiện | Code |
| Hiển thị nội dung ở trang chủ | 'data:blog.url == data:blog.homepageUrl' |
| Hiển thị nội dung ở các trang, ngoại trừ trang chủ | 'data:blog.url != data:blog.homepageUrl' |
| Hiển thị nội dung ở một trang URL được chỉ định | 'data:blog.url == "địa_chỉ_trang"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang URL được chỉ định | 'data:blog.url != "địa_chỉ_trang"' |
| Hiển thị nội dung ở danh sách tất cả các bài đăng (bao gồm danh sách các bài đăng ở trang chủ và các bài đăng cũ hơn) | 'data:blog.pageName == ""' |
| Hiển thị nội dung ở trang tĩnh | 'data:blog.pageType == "static_page"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang tĩnh | 'data:blog.pageType != "static_page"' |
| Hiển thị nội dung ở trang lưu trữ | 'data:blog.pageType == "archive"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang lưu trữ | 'data:blog.pageType != "archive"' |
| Hiển thị nội dung ở trang nhãn | 'data:blog.searchLabel' |
| Hiển thị nội dung ở trang nhãn được chỉ định | 'data:blog.searchLabel == "Tên nhãn"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang nhãn được chỉ định | 'data:blog.searchLabel != "Tên nhãn"' |
| Hiển thị nội dung ở trang tìm kiếm | 'data:blog.searchQuery' |
| Hiển thị nội dung ở trang tìm kiếm được chỉ định | 'data:blog.searchQuery == "Nội dung"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang tìm kiếm được chỉ định | 'data:blog.searchQuery != "Nội dung"' |
| Hiển thị nội dung ở trang danh mục (tất cả các bài đăng (gồm trang chủ và bài đăng cũ hơn), trang nhãn, trang tìm kiếm) | 'data:blog.pageType == "index"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang danh mục | 'data:blog.pageType != "index"' |
| Hiển thị nội dung ở trang bài viết | 'data:blog.pageType == "item"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang bài viết | 'data:blog.pageType != "item"' |
| Hiển thị nội dung ở trang lỗi 404 (không tìm thấy trang chỉ định) | 'data:blog.pageType == "error_page"' |
| Hiển thị nội dung ở các trang, ngoại trừ trang lỗi 404 | 'data:blog.pageType != "error_page"' |
| Hiển thị nội dung trên thiết bị di động | 'data:blog.isMobile' |
| Hiển thị nội dung trên các thiết bị ngoại trừ thiết bị di động | 'data:blog.isMobile == false' |
| Hiển thị nội dung trên những kiểu trang được chỉ định (vd: trang tĩnh và trang bài viết) | 'data:blog.pageType in {"static_page", "item"}' hoặc '{"static_page", "item"} contains data:blog.pageType' |
7. Thẻ b:switch (chuyển đổi)
Bạn có thể sử dụng thẻ b:switch giống như thẻ b:if và b:elseif. Lợi thế của thẻ b:switch là bạn không cần phải lặp đi lặp lại tên biến. Bạn có thể dễ dàng xem xét mỗi trường hợp và trường hợp mặc định.
Cú pháp tổng quát:
<b:switch var = 'biểu_thức_dữ_liệu'>
<b:case value = "giá_trị_1"/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu = giá_trị_1 ]
<b:case value = "giá_trị_2"/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu = giá_trị_2 ]
<b:case value = "giá_trị_n"/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu = giá_trị_n ]
<b:default/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu không bằng với bất cứ giá trị nào trong thẻ b:case bên trên ]
</b:switch>
<b:case value = "giá_trị_1"/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu = giá_trị_1 ]
<b:case value = "giá_trị_2"/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu = giá_trị_2 ]
<b:case value = "giá_trị_n"/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu = giá_trị_n ]
<b:default/ >
[ Nội dung hiển thị nếu biểu_thức_dữ_liệu không bằng với bất cứ giá trị nào trong thẻ b:case bên trên ]
</b:switch>
Ví dụ:
<b:switch var = 'data:blog.pageType'>
<b:case value = "static_page"/>
<h1>Page</h1>
<b:case value = "item"/>
<h1>Post</h1>
<b:default/>
<h2>Blog Posts</h2>
</b:switch>
<b:case value = "static_page"/>
<h1>Page</h1>
<b:case value = "item"/>
<h1>Post</h1>
<b:default/>
<h2>Blog Posts</h2>
</b:switch>
8. Thẻ b:eval (đánh giá)
Bạn có thể sử dụng thẻ b:eval để đánh giá một biểu thức phức tạp hơn là một thẻ data chuẩn.
Cú pháp tổng quát:
<b:eval expr = 'biểu_thức' />
Ví dụ:
min-height: <b:eval expr = "data:newWidth * data:height / data:width" />px;
[ xuất ra kết quả tính chiều cao, dựa vào một giá trị chiều rộng mới ]
<b:eval expr = "data:post.label.labels[0].url" />
[ xuất ra địa chỉ của nhãn đầu tiên ]
<b:eval expr = 'data:blog.isMobile ? "Phiên bản Di động" : "Phiên bản Máy tính"' />
[ xuất ra từ "Phiên bản Di động" khi trang blog được xem bằng điện thoại di động, và xuất ra từ "Phiên bản Máy tính" khi trang blog được xem bằng máy tính bàn hay laptop ]
[ xuất ra kết quả tính chiều cao, dựa vào một giá trị chiều rộng mới ]
<b:eval expr = "data:post.label.labels[0].url" />
[ xuất ra địa chỉ của nhãn đầu tiên ]
<b:eval expr = 'data:blog.isMobile ? "Phiên bản Di động" : "Phiên bản Máy tính"' />
[ xuất ra từ "Phiên bản Di động" khi trang blog được xem bằng điện thoại di động, và xuất ra từ "Phiên bản Máy tính" khi trang blog được xem bằng máy tính bàn hay laptop ]