Bài này hay nên na về blog để dành đọc và ngâm cứu, nguồn: http://blog.duypham.info/2010/12/tim-hieu-template-cua-blogspot.htmlBlogspot không có nhiều tiện ích đi kèm và muốn có thêm những tính năng mới thì chúng ta cần chỉnh sửa trong template. Vấn đề ở đây là đặt vào vị trí nào cho hợp lý? Template của Blogspot rất nhiều, cùng với một thủ thuật nhưng có thể người này áp dụng dễ dàng còn người khác lại gặp khó khăn với template của mình? Bởi việc áp dụng một cách thụ động các thủ thuật đã dẫn đến tình trạng như vậy. Cho dù có nhiều template khác nhau nhưng chạy trên blogspot thì những đoạn mã cơ bản nhất chúng vẫn giống nhau. Một thủ thuật hoạt động được trên template này thì cũng sẽ hoạt động được trên template khác. Trước tiên muốn có thêm tính năng cho template của mình thì bạn cần phải hiểu rõ template đó đã.
Template của Blogspot là file XML, vậy XML là gì? XML viết tắt của chữ eXtensible Markup Language (ngôn ngữ nâng cấp có thể mở rộng) là một bộ qui luật về cách chia một tài liệu ra làm nhiều phần, rồi đánh dấu và ráp các phần khác nhau lại để dễnhận diện chúng.
- Qui luật về cách chia một tài liệu ra làm nhiều phần: nó được định nghĩa ở trong template, đây cũng là điểm khiến XML linh hoạt hơn HTML.
- Đánh dấu và ráp các phần khác nhau lại: cái này được xử lý ở máy chủ của Blogger.
- Nhận diện chúng: chính là hiển thị của blog trên trình duyệt.
Dưới đây là mô phỏng vắn tắt một template Blogspot:
<?xml version="1.0" encoding="UTF-8" ?> <!-- định nghĩa XML -->Như một website thì blog cũng có phần đầu <head>...</head> và phần thân<body>...</body>.
<!DOCTYPE html> <!-- định nghĩa doctypes -->
<html ...>
<head>
...
<b:skin>
...
</b:skin>
</head>
<body>
<div ...>
<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>
<b:section ...>
<b:widget ...>
<b:includable ...>
...
</b:includable>
</b:widget>
</b:section>
...
</div>
</body>
</html>
1. Phần đầu - head:
Trong XML có những Tag pair (cặp thẻ) được định nghĩa và đây là một thẻ<b:include data='blog' name='all-head-content'/>. Thẻ này không chứa gì ở giữa nên cần chấm dứt bằng "/>". Đây là một thẻ quan trọng, nó chứa những thông tin về nội dung của phần đầu blog và cả dữ liệu về avatar của tài khoản Blogger.
Trong cặp thẻ <b:skin> là style sheet dành cho blog. Muốn chỉnh sửa giao diện hiển thị của blog thì đây là nơi bạn cần quan tâm. Ngoài ra thì khi view source blog bạn còn thấy một style sheet bên ngoài dành cho widget có tên dạng xxxxxxxxxx-widget_css_bundle.css, là css bên ngoài nên mức độ ưu tiên thấp hơn css trong template.
2. Phần thân - body:
Mỗi template có những layout (bố cục, sắp xếp) khác nhau, chúng được quy định bởi những thẻ <div>, <span>, <ul>, <li>... tuy nhiên chúng có điểm chung là những thanh Add a Gadget, trên thanh đó có những Widget như Blog Posts, Popular Post, HTML/Javascript... Một thanh Add a Gadget được quy định bằng cặp thẻ<b:section>, những Widget được quy định bằng cặp thẻ <b:widget> và những đoạn mã để chạy Widget này được đặt trong cặp thẻ <b:includable>. Blog của bạn có bao nhiêu thanh Add a Gadget thì cũng có từng ấy cặp thẻ <b:section>. Trong cặp thẻ <b:section> có thể chứa 1 hoặc nhiều cặp thẻ <b:widget> hay không có gì nếu chưa add Widget. Trong cặp thẻ <b:widget> có ít nhất một cặp thẻ<b:includable> với id='main'. Mỗi cặp thẻ <b:includable> có thể có các cặp thẻ<b:includable> khác lồng nhau.
Chúng ta sẽ tìm hiểu đoạn mã của Widget Blog Posts, đây là Widget được chỉnh sửa nhiều nhất. Hãy mở template của bạn bằng notepad++ và tìm thẻ <b:widget>với id='Blog1'. Ví dụ: <b:widget id='Blog1' locked='false' title='Bài đăng trên Blog' type='Blog'>. Chúng ta quan tâm tới các cặp thẻ <b:includable> nằm trong cặp thẻ <b:widget> này. Lần lượt click vào từng thẻ <b:includable> rồi nhấn dấu [-] để thu gọn thẻ này lại, xem hình dưới:
Thẻ <b:includable> với id='main' có nhiệm vụ gắn nối các thẻ <b:includable> còn lại với nhau. Thẻ <b:includable> với id='post' và thẻ <b:includable> với id='comments' lần lượt là nơi chứa mã của bài đăng và khung nhận xét, có nhiều thủ thuật liên quan tới chúng.
Những thẻ được định nghĩa bởi Blogger bắt đầu bởi b: và thường gặp nhiều nhất là <b:if>, <b:loop> đây là lệnh điều kiện và lệnh lặp. Thẻ<b:includable> là những hàm, mỗi một Widget có một hàm chính với ID là main.
Khoanh vùng và tìm hiểu dần, bạn sẽ hiểu rõ template của blog mình hơn và dễ dàng thêm bớt, tinh chỉnh để blog tối ưu nhất.
Tạm thời chưa hiểu nổi thành phần mở rộng của blogger :-?
Trả lờiXóaGhi lại nguồn là rất chuyên nghiệp nhưng nguồn lại sai rồi :)
Trả lờiXóaAx, em cũng đoán là người đó coppy bài nhưng không ghi nguồn. nhưng ko tìm ra nguồn gốc. bác biết giới thiệu em, để em đưa nó về đúng tác giả :))
Trả lờiXóaÁ, thì ra là bác Duy Pham. Chỉ có bác mới có công lực cao thâm như thế
Trả lờiXóaCái bác mà coppy bài bác ko ghi nguồn gì hết, bác ấy đáng cái tội 'nhụt'.
Cảm ơn bác Duy Phạm nhiều!
Cho mình hỏi ngoài lề xíu nhé :)
Trả lờiXóa- Mình muốn đưa bộ emo vào bên trái khung cmt giống bạn thì đặt ở chỗ nào trong tempt ấy nhỉ :-?
mình cũng ko biết đặt chỗ nào nữa bạn ah,
Trả lờiXóacách mình làm là: tạo một thẻ Div bao cái comment form và icon lại, sau đó cho comment form float sang trái.
http://www.itechplus.info/2011/03/chia-blogger-comment-form-thanh-2-phan.html
bạn xem bài trên có hướng dẫn chi tiết nha :-t
À à, làm được rồi, nhưng chưa vừa ý lắm, để ngâm cú tùy biến thêm... Tks bạn nhé :))
Trả lờiXóa