Trang chủ \18.2.11

Tìm hiểu kiểu trang của Blogger

rubikHãy hình dung bạn đang quan sát lớp học một trường tiểu học. Trong lớp có vài bộ bàn ghế và ngồi trên đó là những học sinh. Có bàn chỉ 1 học sinh, có bàn thì 2... thậm chí bàn cuối chưa có ai ngồi. Trên bục giảng là bà giáo viên dạy giỏi cấp thành phố, bà ta dạy môn Toán, Anh Văn, Nhạc, Họa...

Được rồi, đọc đến đây có lẽ bạn nghĩ hơi men rượu từ Tết vẫn còn trong người mình, đây là thủ thuật về Blogger kia mà? Mình chỉ muốn dùng phép so sánh cho trực quan một chút. Nếu lớp học là một Blogger Template thì bộ bàn ghế chính là những section, học sinh là những widget. Học sinh ngồi học trên bộ bàn ghế còn widget thì cần đặt trên section, có section chỉ đặt 1 widget hoặc nhiều hơn hay thậm chí chưa có widget nào. Còn bà giáo viên cấp thành phố thì sao? Bà ta chính là widget với kiểu blog, bục giảng nơi bà ta đang đứng là section với classidmain, bà ta dạy nhiều môn học còn widget với kiểu blog là nơi hiển thị những thay đổi khác nhau của kiểu trang trong blog. Blogger hiện tại có 4 kiểu trang:
  1. index: trang chủ, trang label, trang tìm kiếm.
  2. archive: trang lưu trữ.
  3. item: trang bài viết.
  4. static_page: trang tĩnh.
Bây giờ là tiết Nhạc và anh nhân viên quản lý thiết bị trong trường đang mang cây đàn Yamaha tới, anh ta được lệnh mang đàn nếu lớp học môn Nhạc. Trong Blogger thì chúng ta dùng lệnh b:if. Giả sử bạn cần chèn đoạn mã nào đó chỉ ở trang bài viết chúng ta sử dụng đoạn mã:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
đoạn mã cần chèn
</b:if>
Nhiệm vụ của anh nhân viên chưa hết, anh ta được lệnh mang đài cassette tới nếu lớp học môn Nhạc hoặc Anh Văn. Giả sử bạn cần chèn đoạn mã ở trang bài viết hoặc trang tĩnh chúng ta dùng đoạn mã:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
đoạn mã cần chèn
<b:else/>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
đoạn mã cần chèn
</b:if>
</b:if>
Đoạn mã trên không sai nhưng dài, đoạn mã cần chèn xuất hiện tới 2 lần. Chúng ta nên sử dụng đoạn mã sau:
<b:if cond='data:blog.pageType != &quot;index&quot;'>
<b:if cond='data:blog.pageType != &quot;archive&quot;'>
đoạn mã cần chèn
</b:if>
</b:if>
Thay vì xem có đúng kiểu trang bài viết hoặc trang tĩnh hay không chúng ta xem có khác những kiểu trang còn lại không và thực hiện đoạn mã cần chèn. Tất nhiên không nên nói "nếu khác môn Toán, môn Họa... thì mang đài cassette tới" vì sẽ gây khó khăn cho anh nhân viên, anh ta xử lý thông tin không nhanh như Blogger.

Bây giờ tới tiết Họa, chúng ta có một cậu bé thần đồng môn này. Cậu ta chưa đủ tuổi đi học nhưng yêu thích vẽ vời, bố mẹ cậu ta xin cho cậu đến học chỉ môn Họa này thôi. Anh nhân viên mang một bộ bàn ghế tới cho cậu ngồi và hết tiết lại mang cất bộ bàn ghế này đi. Ở Blogger nếu muốn widget chỉ xuất hiện ở một kiểu trang nào đó, giả sử kiểu index chúng ta cần đặt widget này ở một section và thêm lệnh điều kiện bên ngoài section này. Sử dụng đoạn mã sau:
<b:if cond='data:blog.pageType == &quot;index&quot;'>
<b:section ...>
<b:widget ...>
...
</b:widget ...>
</b:section ...>
</b:if>

Việc biết những kiểu trang của Blogger sẽ giúp chúng ta dễ dàng tùy biến hiển thị các tiện ích trong template.

Những đoạn mã javascript thường được sử dụng trong Blogger, tuy nhiên làm chậm tốc độ của blog. Nếu javascript chỉ sử dụng trong những kiểu trang nhất định chúng ta nên dùng lệnh điều kiện b:if để hiển thị nó khi cần thiết, thay vì để trình duyệt tải ở những kiểu trang không sử dụng đến chúng ta để Blogger lựa chọn. Đoạn mã lệnh điều kiện khá ngắn không ảnh hưởng đến tốc độ của blog.

Hướng dẫn thủ thuật Blogger, Blogspot

26

Nhận xét
1

Mãi mới ra bài mở hàng Tân Mão :D

Reply Xóa nhận xét
Nặc danh 19/2/11 06:55
2

Chà, một cách truyền tải rất mới mẻ. Cách viết giáo lý lồng ghép tình huống giống văn phong của các trường bên Mỹ.

Năm mới, thành công mới nhé. :))

Reply Xóa nhận xét
3

@NAD Đang trong tình trạng cạn kiệt ý tưởng bác ạ, quay đi quay lại giật mình vì gần 1 tháng rồi không có bài mới :-o

Reply Xóa nhận xét
4

@Tien Nguyen Cảm ơn bác, em chịu ảnh hưởng văn phong phương tây do thích đọc những tác phẩm của họ :p

Reply Xóa nhận xét
5

Đúng là mới đọc phần đầu em thấy hơi lan man (tính em thì hơi thực tế 1 tí) :D
Áp dụng cách này thì việc quản lý Temp chẳng mấy khó khăn !
Thanks bác !

Reply Xóa nhận xét
6

Mình thì dùng mấy cái này thường xuyên, thậm chí là dày đặc trong một số template :D

Reply Xóa nhận xét
7

cách này dễ hiểu dễ làm. Mình cũng hay hướng dẫn sửa máy tính kiểu này lắm :)

Reply Xóa nhận xét
8

DP ví von cũng hay. Trực quan sinh động thì dễ hiểu, đặc biệt hữu ích cho newbie

Reply Xóa nhận xét
9

Đã xuất hiện ngày một nhiều hơn các Blogspoter chuyên nghiệp tại Việt Nam. Đây là một tín hiệu mừng cho cộng động blogspot.

Các bài viết của bạn có bố cục tốt, trình bày khoa học, có yếu tố mới.

Chúc Duy sẽ thành công trong hướng đi đã chọn với Blogger.

Reply Xóa nhận xét
10

@Pavel Cảm ơn bác! Blogger+ của bác là 1 trong những blog nền tảng Blogger mà em ấn tượng nhất :)

Reply Xóa nhận xét
11

==, !=
tại sao lại thay đổi hai dấu này, ý nghĩa nó ntn?
nhờ bác giải thích giùm em.

Reply Xóa nhận xét
12

@blue79blog == là so sánh giá trị giống nhau. != là so sánh giá trị khác nhau.

Reply Xóa nhận xét
13

ah' cái == nếu nó là... thì...
cái != nếu nó không phải là... thì...
b-( , bi giờ e đã hiểu^^

Reply Xóa nhận xét
14

bài này của DuyPham hay, nhưng đọc cái ví dụ tượng trưng làm ae rối cả lên. ko hiểu nổi, cũng may nhìn vô code là có thể hiểu sơ sơ.

Reply Xóa nhận xét
Nặc danh 6/9/11 10:04
15

Cái trang preview post là kiều gì Duy Phạm nhỉ. Design temp thường bị lỗi không review được (cứ hiện trang chủ)

Reply Xóa nhận xét
16

@Tien Nguyen Temp nào của bác cũng bị à? Em nghĩ nó có kiểu riêng gắn với hàm js SetupPreview. Nó k cùng tính năng để phân loại như 4 kiểu ở bài này, mà hiểu là có 2 kiểu xem thử và thực tế. Liệu có do xung đột js, vì em thấy blog của bác khi dùng công cụ translate báo k tìm thấy?!

Reply Xóa nhận xét
Nặc danh 6/9/11 11:01
17

@Duy PhamĐang bị cái đang design thôi bác. Preview là nó hiện trang chủ mà em thì chưa chèn JS nữa. T_T

Reply Xóa nhận xét
18

@Tien Nguyen Em thấy bác thiết kế temp đẹp nhưng mà hầu như các tác phẩm đều có phong cách giống nhau. Mà e nghĩ như vậy như là ý tưởng không có sự sáng tạo vượt bậc. Em nghĩ sự sáng tạo không phải là tuân theo một phong cách nhất định mà phải luôn tạo cái mới. Bác degign trùng mẫu như vậy có duy nhất một tác dụng là " Ai nhìn vào cũng biết bác tiến thiết kể cái temp đó"

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

Cảm ơn NDoSKT đã góp ý. Em sẽ cố gắng sáng tạo hơn trong các template kế tiếp.

Reply Xóa nhận xét
20

@Tien Nguyen Mạng hay dis quá. Bác thử vào link http://domain.com/b/post-preview?token=aVQjPzIBAAA.jyUes26IiBcZSpY0uYaRvQ.YpY3S9v5PfyNVJVpqA7wzA&postId=PostID&type=POST xem có bị đưa về home page k. Em nghĩ là Blogger đang gặp nhiều lỗi từ khi chuyển sang giao diện mới và họ đang fix từng ngày.

Reply Xóa nhận xét
21

bạn ơi cho mình hỏi là có thể tạo đc trang trung gian kiểu như thế này trc khi vào trang pót ko:
http://truyen18.org/truyen/naruto/571.html

Reply Xóa nhận xét
22

pak Duy cho mình hỏi chút, mình quên mất Code Verify của Alexa Rank, bây giờ sao lấy lại code đó để add vô temp cho Alexa nó Certify há pak Duy?

Reply Xóa nhận xét
23

Mình đang nghiên cứu Blogger. Mình thấy Blogger rất tiềm năng nên mình quyết định nghiên cứu nó, Nhưng trong quá trình tìm tòi và vọc mình thấy dần dần hiểu ra nhiều thứ hơn nhưng có nhiều cái chưa hiểu lắm. Mình sẽ cố gắng tự desgner trong một thời gian ngắn. Và mình có rất nhiều ý tưởng cho project này. Cảm ơn bạn đã chia sẽ

Chúc cho cộng đồng Blogspot ngày càng phát triển hơn nữa :)

Reply Xóa nhận xét
24

Bài viết hay và sinh động

Reply Xóa nhận xét
25

bài viết đọng lại khó quên, ngoài học được thủ thuật em còn học được 1 cách để ghi nhớ sau này nữa. cảm ơn @Duy Pham

Reply Xóa nhận xét
26

Hướng dẫn làm khung comment sử dụng b:js='false' như duypham.net đi bạn !

Reply Xóa nhận xét

Đăng nhận xét

Cancel