Mã nguồn của Blogger

Blogger của Google là một dịch vụ blog mã nguồn mở. Bạn có thể biên tập khoảng 95% mã nguồn của nó để thay đổi theme cho nó. Không chỉ đổi màu, đổi background... mà hơn thế nữa, bạn có thể thay đổi Layout (bố cục) để có một giao diện 100% mới. Ngoài ra vì là mã nguồn mở lên bạn dễ dàng tìm được những thứ gọi là Widget (phụ tùng) - một kiểu Add-on cho blog - và nhưng đoạn script tạo các chức năng, hiệu ứng đặc biệt... Với Blogger, bạn có thể tạo một cái blog trên nền tảng Web 2.0 dễ dàng. Bài viết này sẽ hướng dẫn bạn chỉnh sửa mã nguồn của Blogger.

I.Chuẩn bị:
Để bắt đầu, bạn phải đăng nhập vào blog của mình.
Trong trang Dashboard → chọn Layout (tại blog muốn chỉnh)
Tại trang Blogger :: Edit Layout → nhấn vào link Edit HTML
Ở trang này, bạn có thể bắt đầu việc chỉnh sửa của mình.

II.Dạng cơ bản:
Mã nguồn thường sẽ có dạng cơ bản 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 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><data:blog.pageTitle/></title>
<b:skin><![CDATA[/*
-----------------------------------------------
Giới thiệu về skin và tác giả
-----------------------------------------------*/


/* Variable definitions
phần đặt biến cho skin
*/


Phần CSS có thể chỉnh sửa
]]></b:skin>
Phần chèn Javascript
</head>
<body>
Nội dung trang...
Phần này thay đổi theo trang. Thường được chia ra thành cái Section (nằm giữa thẻ <b:section> và </b:section>).
Trong các section (vùng) còn có những Widget (nằm giữa thẻ <b:widget> và </b:widget>).

</body>
</html>
Từ đoạn này trở đi không có giá trị



Những phần nằm trên thẻ <head> bạn không cần để ý, cũng đừng bao giờ thay đổi gì ở đây. Có thể hiểu đây là phần thủ tục thôi. Phần màu xanh lá cây có thể bỏ đi. Phần in nghiêng là các lưu ý.
Ngoài ra, những đoạn nằm trong /**/ trong phần CSS và những đoạn nằm trong <!----> trong những phần còn lại đều không có ý nghĩa. Đó chỉ là phần chú thích.
...



III.Section và Widget:
Thẻ <b:section>
Nó có các thuộc tính (attribute) như sau:

  • id: (Bắt buộc) Nó có ý nghĩa như tên của section đó (chỉ dùng chữ và số).
    VD: <b:section id="MySection">.
  • class: phân nhóm cho section của bạn. Bạn nên dùng những cái tên sau cho class của mình như "navbar," "header," "main," "sidebar," and "footer". Để sau này, khi thay đổi phần CSS, Blogger có thể chuyển Section của bạn đến đúng nơi.
    VD: <b:section class="sidebar" id="MySection">.
  • maxwidgets: Quy định số lượng widget tối đa mà section có thể chứa. Nếu không đề cập có nghĩa là không giới hạn.
    VD: <b:section id="MySection" maxwidget="1">.
  • showaddelement: Chỉ có 2 giá trị là "yes" hay "no" (mặc định là "yes". Nó quy định tại trang Edit Layout có hiển thị liên kết "Add a Page Element" cho section này không.
    VD: <b:section id="MySection" showaddelement="no">.
  • growth: Cũng chỉ có 2 giá trị là "horizontal" (ngang) hay "vertical" (dọc) (mặc định là "vertical"). Nó quy định cách mà các widget xuất hiện (hàng dọc hay ngang).
    VD: <b:section id="MySection" growth="horizontal">


Nằm trong <b:section> bắt buộc phải là thẻ <b:widget>, những thẻ khác sẽ không được chấp nhận

Thẻ <b:widget>
Widget là những phần add-on có thể quản lý được trong trang Edit Layout. Nó có các thuộc tính sau:

  • id: (bắt buộc) có ý nghĩa như tên của widget đó. Không thể có 2 widget cùng tên. ID của widget sau khi tạo, không thể thay đổi được trừ khi bạn xóa vào tạo lại một widget khác.

  • type: (bắt buộc) Nó xác định kiểu widget.

  • locked: có 2 giá trị "yes" hoặc "no" (mặc định là "no"). Nếu bạn trong "yes" thì widget này không thể xóa hay di chuyển trong trang Edit Layout.

  • title: Hiện tên của widget khi nó xuất hiện trên trang blog. Nếu bạn bỏ trống thì Blogger sẽ sử dụng một cái tên tự động kiểu HTML1, List2...

  • pageType: Có thể là "all", "archive", "main", hay "item" (mặc định là "all"). Widget này sẽ chỉ hiển thị ở loại trang được xác định cho nó. Nhưng tất cả đều xuất hiện trong trang Edit Layout.

Các loại widget hiện có:
  • BlogArchive
  • Blog
  • Feed
  • Header
  • HTML
  • SingleImage
  • LinkList
  • List
  • Logo
  • BlogProfile
  • Navbar
  • VideoBar
  • NewsBar


Khi bạn bấm nút , tất cả các thẻ <b:section> và <b:widget> sẽ được chuyển thành <div> với ID tương ứng. ID này sẽ cùng với định dạng trong phần CSS của bạn để hiển thị đúng trên màn hình.

Hết phần 1
Phần 2 sẽ nói về các biên tập một widget với thẻ <b:includable>

5 comments:

  1. Gman có bài viết rất hay và sinh động. Anh xin phép đăng nó trên TQVN nhé, có biên tập lại chút xíu :)
    Tìm hiểu mã nguồn của Blogspot

    ReplyDelete
  2. anh cứ tự nhiên, :), chia sẻ là mục đích của em mà :D

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. Hi Gman ! cậu trao đổi liên kết với tớ đc không ? Tìm hoài mới ra blog cậu đấy , bữa thấy cái link gì mà Gman.undo.it , lên google search mới đc đấy ^^

    ReplyDelete
  5. Cảm ơn ông Lô có bài công phu cống hiến anh em! Mình già rùi hơi quá hớp, chẳng dám thay đổi HTML vì nó đã rối tinh rối mù rổi. Khi nào rảnh đảo qua nhà mình làm công quả chỉ cho vài đường, anh khổ lắm rồi em ơi. híc híc...10. 20 sao hổng thấy cái biểu cảm nào vậy ông? chào tui dề đây!

    ReplyDelete

You can use some HTML tags, such as <b>, <i>, <a>