Trang chủ \23.12.10

Tìm hiểu template của Blogspot

Template Blogger
Blogspot 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.
  1. 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.
  2. Đá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.
  3. 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 -->
<!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>
Như một website thì blog cũng có phần đầu <head>...</head> và phần thân <body>...</body>.

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:

Template blogspot

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 IDmain.

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.

Chia sẻ Phần mềm và Tài liệu cho người dùng Windows, Ubuntu. Hướng dẫn Thủ thuật cho người dùng Blogger, Blogspot.

42

Nhận xét
2

một bài rất tổng quát, thanks :))

Reply Xóa nhận xét
3

uhm. cái đó cũng hay đấy. có nhiêu tame để lựa chọn mà lài đẹp nữa chứ :))

Reply Xóa nhận xét
Nặc danh 8/2/11 07:30
5

cám ơn,bạn có thể chỉ cho mình trong template chổ nào có thể chỉnh sửa ,để khi comment ta không cần kích hoạt bộ gỏ trong máy tính mà vẫn gỏ được tiếng việt

Reply Xóa nhận xét
6

@Nặc danh Khung gõ nhận xét là một iframe bên ngoài và Blogger không cho chỉnh sửa nên không thể chèn bộ gõ được bạn ạ

Reply Xóa nhận xét
Nặc danh 8/2/11 16:44
7

Rất vui khi nhận được reply của bạn,một lần nữa xin cám ơn bạn nhiều nhé!

Reply Xóa nhận xét
8

Anh admin cho xem xin Yh được không?

Reply Xóa nhận xét
9

@votandat Mấy năm nay em ít dùng Y!M lắm bác ạ, có khi quên pass rồi ý =))

Reply Xóa nhận xét
10

vậy tên theme bạn đang dùng là gì zậy?

Reply Xóa nhận xét
11

@votandat Cái này vừa mới làm xong, đặt tạm là dp vậy :)

Reply Xóa nhận xét
12

bạn có thể share ko vậy? thanks

Reply Xóa nhận xét
13

@votandat Cái này thì em chưa share được, có thể sắp tới share temp Nexis em dùng trước đây :)

Reply Xóa nhận xét
14

sắp tới là bao lâu zậy?

Reply Xóa nhận xét
15

đừng nóng bác, từ từ bác ấy hoàn thiện đã.
@Duy Pham: mình thấy cái theme màu đỏ hồng hồi bạn mới thay đổi khá đẹp đấy, chuyển qua màu xanh nhìn buồn quá.

Reply Xóa nhận xét
16

@Rùa Biển Em cũng nghĩ vậy, khi share em sẽ để màu đỏ làm mặc định. Màu đó hơi lòe loẹt không hợp với em lắm :D

Reply Xóa nhận xét
17

bài viết của bạn rất hay =D>

Reply Xóa nhận xét
Nặc danh 9/5/11 08:11
19

làm sao để tạo icon trong blogspot??

Reply Xóa nhận xét
20

Cho mình một classic template ko màu mè được không Duy, có bố cục như trang của Ngan ở Blogtruyen càng tốt

Reply Xóa nhận xét
21

@Nguyễn Đức Việc k tôn trọng bản quyền temp khiến mình k còn cảm hứng làm template nữa bạn ạ.

Reply Xóa nhận xét
22

Vậy nghĩa là sao duy :(

Reply Xóa nhận xét
23

Hi Duy! đây là blog của mình
http://gold-forecast-vodanhkem.blogspot.com
Mình đã lượt bỏ rất nhiều bài kèm hình ảnh, và đã chuyển hướng sang up ảnh ở Dropbox nhưng Blog mình vẫn load rất chậm nên rất khó cập nhật bài mới được.
Mong Duy chia sẽ một số thủ thuật khắc phục tình trạng trên.
Chân thành cám ơn!

Reply Xóa nhận xét
24

@Vô Danh KếmẢnh trên picasa của Google là nhanh lắm rồi bác, blog bác nhiều tiện ích cập nhật tin giá vàng và em nghĩ nguyên nhân chính là do chúng. Vào blog bác chậm ghê mà bây giờ em "đuối" quá rồi @-), ngủ chút đã. Bác tạm bỏ mấy cái tiện ích cập nhật đó đi xem chắc sẽ nhanh hơn nhiều.

Reply Xóa nhận xét
25

Thanks Duy nhiều.
Mình gửi Duy xem cái code mà mình đang sử dụng. (mình đã xóa nhiều cái lắm rồi nhưng vẫn load rất chậm) Mong duy xem qua và chỉnh lại giúp mình.

http://dl.dropbox.com/u/45710684/code.txt

Reply Xóa nhận xét
26

@Vô Danh KếmĐó đâu phải temp của blog mà chỉ là ký tự bác copy phần chưa mở rộng từ temp, nó là vô nghĩa :). Với lại bác thử bỏ widget em nói chưa?

Reply Xóa nhận xét
27

rồi duy, mình đã xóa gần như là sạch sẽ và nó có cãi thiện rỏ rệt. Cám ơn Duy nhiều. à duy gé qua thử xem nó load như vậy được chưa?

Reply Xóa nhận xét
28

@Vô Danh KếmLà do widget của bên thứ 3. Ảnh bác cứ yên tâm dùng của picasa để 1 số widget có thể lấy ảnh thu nhỏ của nó. Khi đăng bài thì thêm dòng ngắt nhảy để bài đăng được ngắn lại khi duyệt danh sách các bài.

Reply Xóa nhận xét
29

mình đã lược bỏ gần như là hết luôn rồi mà vẫn load rất chậm
có khi nào là do số lượng truy cập tăng nên xãy ra tình trạng trên?

Reply Xóa nhận xét
30

@Vô Danh KếmNhững thứ này cần được loại bỏ trong temp của bác, nó k dùng đến:

<script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery-1.2.3.pack.txt?attredirects=0' type='text/javascript'></script>
<script language='javascript' src='http://sites.google.com/site/love4all1080/Home/jquery.extractor.txt?attredirects=0' type='text/javascript'></script>
<script type='text/javascript'>
$(document).ready(function() {
$('.excerpt').expander({
slicePoint: 450, // default is 100
expandEffect: 'fadeIn',
expandText: '[...]', // default is 'read more...'
userCollapseText: '[^]' // default is '[collapse expanded text]'
});
});
</script>
<!--multi-level-dd-menu-starts-->
<link href='http://pcnewsoft.110mb.com/tao%20menu%20blogspot/style.css' rel='stylesheet' type='text/css'/>
<script src='http://pcnewsoft.110mb.com/tao%20menu%20blogspot/script.js' type='text/javascript'></script>
<!--multi-level-dd-menu-http://blog4vn.blogspot.com-->

Reply Xóa nhận xét
31

wow, hay quá Duy ! đúng là bỏ phần đó nó load trở lại giống như trước... vừa viết mà vừa cười sung sướng ...
cám ơn Duy nhiều nhiều
(( =))

Reply Xóa nhận xét
32

@Duy PhamSẵn đây anh cho em hỏi có cách nào chèn mặt cười cho khung comment mà bấm vào hình là nó tự cho vào khung comment k anh????

Reply Xóa nhận xét
33

Bạn cho hỏi mình muốn chèn chức năng nhận xét bằng facebook chung với các chức năng nhận xét có sẵn của Blogger vào được không. Mình muốn thêm Facebook vào mục chọn hồ sơ có được không

Reply Xóa nhận xét
34

@DGTĐây nòe pác : http://www.fandung.com/2011/12/facebook-comments-for-blogger-update.html

Chúc thành công,
mình cũng một thời gian làm cái này,nhưng comment = fb không kiểm soát được nên mình bỏ

Reply Xóa nhận xét
36

Mình muốn thiết kế 1 template Mobile, vậy mình cần phải làm gì...........

Reply Xóa nhận xét
37

đang rất cần 1 tem cho blog ảnh có hỗ trợ jquery làm mượt, tăng tốc blog ! liên hệ thanh3291@gmail.com
sẵn sàng hậu tạ nếu ưng ý !

Reply Xóa nhận xét
38

Cảm ơn bạn, 1 bài ngắn gọn mà xúc tích, cái mà bấy lâu nay mình tìm tòi mãi, hầu hết các blog dạy thủ thật blog khác đều nói chung chung, ko nói cái gốc như bài này cái mà người dùng mới mày mò cần nhất để hiểu bản chất

Reply Xóa nhận xét
39

Chào các bạn. mình vừa mới nhập môn thôi còn rất gà về blogspot, khi thấy khung comment của mình sấu quá liền lên mạng hỏi cách chỉnh sửa ai dè blog của mình có giao diện mới không phải loại giao diện cũ , mình loay hoay chỉnh HTML mà quên béng việc phải coppy một bản temp để đề phòng sự cố, mình thao tác thế này: đăng nhập blogspot/ mẫu/html/và loay hoay tìm code và không biết thế nào xóa mất mấy dòng và bây giờ hậu quả là blogspot của mình mất khung comment, thế là bó tay buồn ơi là buồn, giúp mình với, và xin hãy chỉ bảo chi tiết giúp nhé. liên hệ với mình theo mail: tranhuuvien72@gmail.com cảm ơn rất nhiều đấy.

Reply Xóa nhận xét
40

thế để chuyển 1 đoạn dài js và link css xxxx.blogger... ngoài mặc định của blogger xuống cuối trang thì làm như thế nào vậy Duy. như blog của bạn cho nó vào trong thẻ rồi bắn xuống cuối trang

Reply Xóa nhận xét
42

Trang này chán phèo Admin hoặc là cũng mới võ vẽ hoặc là không nhiệt tình, toàn thấy người hỏi mà không thấy trả lời. ai muốn hỏi gì sang bên "thủ thuật vi tính blogspot" mà hỏi, ở đó Admin rất nhiệt tình.

Reply Xóa nhận xét

Đăng nhận xét

Cancel