Trang chủ \ 07:40

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.

Chia sẻ

42

Nhận xét
1

wow, thanks anh,:))

Reply
2

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

Reply
3

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

Reply
4

Bài hay :D

Reply
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
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
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
8

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

Reply
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
10

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

Reply
11

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

Reply
12

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

Reply
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
14

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

Reply
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
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
17

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

Reply
18

he he he hay :((

Reply
19

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

Reply
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
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
22

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

Reply
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
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
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
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
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
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
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
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
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
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
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
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
36

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

Reply
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
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
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
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
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

Đăng nhận xét

Cancel reply

• Những nhận xét spam sẽ bị xóa.
• Public tài khoản Blogger để được trợ giúp.
• Nặc danh thường không được chào đón.