Kiểu trang Index của Blogger

Trong bài viết Tìm hiểu kiểu trang của Blogger mình có đề cập chung về các kiểu trang của Blogger. Ở bài viết này mình sẽ đi vào giới thiệu riêng về Index - kiểu trang đa dạng nhất của Blogger.

index

Kiểu trang Index có câu lệnh điều kiện là <b:if cond='data:blog.pageType == "index"'>.

Trong kiểu trang Index chia làm 3 kiểu trang con: All posts (Danh sách bài đăng trong blog), Label (Danh sách bài đăng trong nhãn) và Search (Danh sách bài đăng trong tìm kiếm).

All posts:
Câu lệnh điều kiện là <b:if cond='data:blog.pageName == ""'> hoặc <b:if cond='data:blog.title == data:blog.pageTitle'>.

Trong kiểu trang All posts chia làm 2 kiểu trang con: Home (Trang chủ) và Older posts (Danh sách bài đăng cũ hơn).
1. Home:
  Câu lệnh điều kiện là <b:if cond='data:blog.url == data:blog.homepageUrl'>.
2. Older posts:
  Câu lệnh điều kiện là <b:if cond='data:blog.pageName == ""'><b:if cond='data:blog.url != data:blog.homepageUrl'>.
Label:
Câu lệnh điều kiện là <b:if cond='data:blog.searchLabel'>.
Search:
Câu lệnh điều kiện là <b:if cond='data:blog.searchQuery'>.

Nắm rõ các kiểu trang và lệnh điều kiện của từng kiểu trang đó sẽ giúp chúng ta linh hoạt trong việc thêm hoặc bớt tính năng, nhiệm vụ... của những thành phần trong blog.

Duy Pham

66

Nhận xét

HaJiWon 24/9/14 11:06

1

Hiểu và áp dụng được câu điều kiện trong blogger sẽ giúp chúng ta được rất nhiều! Thanks DP đã chia sẻ và sẽ có thêm nhiều bài viết liên quan...

Reply Xóa nhận xét

Duy Pham 25/9/14 13:12

5

Có thêm thời gian mình sẽ có nhiều bài về XML, nó là đặc trưng của Blogger

Reply Xóa nhận xét

Fiat Trịnh Xuân Thọ 24/9/14 19:51

2

Nhiều lúc chỉ muốn hiển thị tính năng hay ứng dụng nào hoặt động ở trang chủ hay tại bài viết mà thấy ngu luôn. Lúc trước hay phải mở mấy cái template lưu trong máy tính ra dò rồi copy, giờ cũng phải mở nhưng tạo 1 file sẵn để khi cần thì dùng, đôi lúc tìm trong file xml đang sửa.

P/s: hiếm khi thấy bác đăng cái hình minh họa to như này :)

Reply Xóa nhận xét

Duy Pham 25/9/14 13:13

6

E thử trình gà Photoshop ý mà :D

Reply Xóa nhận xét

Lâm Kiều 24/9/14 21:44

3

Lâu lâu cứ có bài nhỏ để này rất hữu ích cho mấy bạn đang tìm hiểu Blogger :D

Reply Xóa nhận xét

Duy Pham 25/9/14 13:14

7

Nhưng mà lâu quá nên blog vắng tanh :(

Reply Xóa nhận xét

Phạm Hữu Dư 2/10/14 17:27

13

Ráng cập nhật thường xuyên hơn để blog Duypham ko bị chìm vào quên lãng nào :D

Reply Xóa nhận xét

Duy Pham 2/10/14 20:28

14

Mình thì đang không biết bác phân thân thế nào để quản lý từng nấy weblog?

Reply Xóa nhận xét

Luat Hoang 25/9/14 08:23

4

Cũng hết chủ đề để bác Duy viết rồi
Ủng hộ bác làm template :)

Reply Xóa nhận xét

Duy Pham 25/9/14 13:17

8

Mình thấy nhiều temp mới đẹp xuất hiện mà, so với ngày xưa thì quá phong phú

Reply Xóa nhận xét

Luat Hoang 29/9/14 20:11

12

Nhiều hơn ngày xưa quá nhiều đi chứ. Có điều thích phong cách của bác :)
Như cái temp này này

Reply Xóa nhận xét

Mr Rùa 27/9/14 23:43

9

wellcome you come back :))

Reply Xóa nhận xét

NAD 28/9/14 23:08

10

Giờ nhiều temp mới pro lắm, khác hẳn mấy năm trc.

Dự bài mới tiếp theo of bác Duy sẽ xuất hiện sau ít nhất 3 tháng nữa :P

Reply Xóa nhận xét

Duy Pham 29/9/14 00:29

11

Gia Nát Dự :))

Reply Xóa nhận xét

Minh Khanh Blog 4/10/14 16:51

15

Bài viết hay quá, em thấy mấy bloggẻ của indonexia viết bài áp dụng mấy câu lệnh này nhiều, mỗi bài đăng của họ là một trang index khác nhau, nhìn phê quá luôn.

Reply Xóa nhận xét

Duy Pham 4/10/14 17:36

16

Indo và Ấn độ có nhiều Blogger tài năng và họ cũng hay dạt sang bên vn mình tham khảo :D

Reply Xóa nhận xét

Noct 4/10/14 21:59

17

lâu lắm không log in vào Blogger :D chắc giờ ko ai nhớ mình nữa rồi
có mấy đoạn code bác Duy đây cũng được khá nhiều pro sửa dụng để làm theme lắm nhé :D

Reply Xóa nhận xét

Duy Pham 4/10/14 22:11

18

Noct là ai nhỉ, trông quen quen =))

Reply Xóa nhận xét

Mr Rùa Biển 8/10/14 11:38

21

uhm hình như ngày xưa ông noct này toàn trộm ý tưởng của tôi viết bài =))

Reply Xóa nhận xét

Noct 9/10/14 09:51

25

không biết bạn nói đùa hay thật nhưng khi nói câu này đã suy nghĩ kĩ chưa ?

Hồi xưa trang web của bạn là gì nhỉ ?

Reply Xóa nhận xét

Duy Pham 9/10/14 10:16

28

Troll vui thôi mà bác

Xóa nhận xét

Mr Rùa Biển 10/10/14 00:25

29

:)) ngày xưa mình chưa có trang web :)) giờ cũng chưa có luôn bác :))

Xóa nhận xét

Nặc danh 5/10/14 14:32

19

Lâu lắm rồi kg có viết blog đọc mấy bài của bác sao cứ bồi hồi...

Reply Xóa nhận xét

Duy Pham 5/10/14 15:22

20

Quá hơn nửa năm mới có 1 bài, khi lập blog này chắc không bao giờ em nghĩ mức độ lười viết của mình như vậy :D

Reply Xóa nhận xét

Quang Hoang 8/10/14 20:41

22

Quá lâu cho sự trở lại của bác :)
P/S: Em cũng thế ^^

Reply Xóa nhận xét

Duy Pham 8/10/14 23:37

23

Mình bận đi làm xa nhà, k biết mọi người lý do là gì?

Reply Xóa nhận xét

Noct 9/10/14 10:00

26

bác chắc đi công trình miền núi hả :D
mình thì do bệnh tật nên bỏ blogging cũng hơn năm rồi :(

Reply Xóa nhận xét

Duy Pham 9/10/14 10:15

27

Sao bác biết hay vậy? Không có cả tg kiếm vợ nói gì đến chăm cho blog. Bệnh tật thế nào rồi, nhanh khỏe để quay lại blog thôi

Reply Xóa nhận xét

GIANG 17/10/14 14:00

30

Mọi người lặn lâu thế làm em tìm thủ thuật dùng mà không có :v bác Dũng cũng lặn luôn rồi :)

Reply Xóa nhận xét

Duy Pham 17/10/14 17:42

31

Thủ thuật lâu nay cũng đủ dùng mà :)

Xóa nhận xét

Noct 9/10/14 09:46

24

Nhận xét này đã bị tác giả xóa.

GIANG 18/10/14 14:43

32

Nói thế thôi chứ dư nữa, tại lúc trước thấy mấy bác xôm quá giờ lắng nên hơi buồn :)

Reply Xóa nhận xét

Suối nguồn cuộc sống 19/10/14 10:33

33

Ngắn gọn, xúc tích và không phải ai cũng biết code để mà hiểu. Chờ đợi những bài hướng dẫn khác chi tiết hơn của bác TT-TT

Reply Xóa nhận xét

Duy Pham 19/10/14 12:19

34

Đúng rồi bạn, từ ngày đầu viết thủ thuật mình xác định đối tượng chủ yếu hướng đến không dành cho người mới bắt đầu mà.

Reply Xóa nhận xét

Mr Rùa Biển 24/10/14 20:38

35

Xin lỗi bác duy vì hỏi và đây ! mình đang muốn dùng hàm replace của bác hồng vĩ hòa giới thiệu trong phần popular post , nhưng hình như áp dụng y như bác hồng vĩ hòa giới thiệu thì không ổn
Bác duy lúc nào rảnh hướng dẫn hộ chút được không ?
http://blog.nguoiaolam.net/2012/04/dung-ham-replace-trong-javascript-e-lay.html

Reply Xóa nhận xét

Duy Pham 24/10/14 20:53

36

Mình đang rảnh đây, bác nói rõ yêu cầu xem để mình thử giúp dc không

Reply Xóa nhận xét

Mr Rùa Biển 24/10/14 22:23

37

Em muốn ảnh của popular to hơn chứ ko phải là 36x36 nữa
Mà em muốn ảnh lên khoảng 200x160 chẳng hạn
Em dùng css room nó to lên thi ảnh nó bị mờ
Em muốn ảnh của popular nó to hơn và nét hơn ạ :(

Reply Xóa nhận xét

Duy Pham 24/10/14 23:06

38

Thêm vào trước </head> code dưới:

<script>
//<![CDATA[
function replace_img(img_src){var img_src=img_src.replace(/\/s[0-9]+(\-c|\/)/ig,'/s200$1');document.write('<img src="'+img_src+'"/>')};
//]]>
</script>

Ở widget Popular posts thay tag img bằng code dưới:

<script>replace_img('<data:post.thumbnail/>');</script>

Reply Xóa nhận xét

Mr Rùa Biển 24/10/14 23:40

41

để thay đổi size cho phù hợp là thay đổi cái " s200 " đúng không bác ?

Reply Xóa nhận xét

Mr Rùa Biển 24/10/14 23:33

39

oh cám ơn bác ! em sẽ lưu lại để đọc :) Em đang học js mà chưa đâu đến đâu cả :)

Reply Xóa nhận xét

Mr Rùa Biển 24/10/14 23:37

40

ok cám ơn bác duy nhiều, đã thành công , bác cho em hỏi là với cái random post của bác , cũng muốn ảnh to thì làm thế nào ạ :)

Reply Xóa nhận xét

Duy Pham 24/10/14 23:53

42

thay entry.media$thumbnail.url thành entry.media$thumbnail.url.replace(/\/s[0-9]+(\-c|\/)/ig,'/s200$1')

Thay s200 theo size bạn muốn.

Reply Xóa nhận xét

Mr Rùa Biển 24/10/14 23:58

43

ok cám ơn bác ! ko có bác thì em ko biết phải làm như nào cả ! có dịp sẽ hậu tạ :)

Reply Xóa nhận xét

Mr Rùa Biển 25/10/14 16:33

44

Bác duy rảnh làm giúp anh em cái bài đăng theo nhãn với !
Em search ra mà cái nào cũng loằng ngoằng , cảm giác không ổn lắm , không tối ưu như code của bác được ! em nghĩ cái này cũng có rất nhiều người cần :(
Lúc nào rảnh bác giúp viết 1 cái nhé
Em cũng chỉ cần ảnh nét + cái tiêu đề thôi :(
---------------------------------------------------------------------------------
Cám ơn bác nếu như đòi hỏi là quá đáng bác có thể bỏ qua ^^
vì thực sự nhờ bác hơi nhiều ^^

Reply Xóa nhận xét

Duy Pham 27/10/14 14:57

46

Thay link đến feed của nhãn là được mà. Còn muốn hiển thị nhiều nhãn 1 lúc thì có thể mình sẽ viết một tip mới.

Reply Xóa nhận xét

Mr Rùa Biển 28/10/14 15:20

47

em thay feed theo nhãn được rồi bác ạ ! nhưng em đăng 1 lúc 2 cái widget theo 2 nhãn khác nhau trên cùng 1 blog thì có vẻ không được:) .
Còn nếu hiển thị việc 1 widget nhiều label thì em nghĩ không cần thiết vì chúng ta chỉ việc đặt tất cả các nhãn ấy 1 nhãn chung là ok

Reply Xóa nhận xét

Mr Rùa Biển 26/10/14 14:16

45

ok em đã làm được rồi ! không hiểu nên còn nhiều cái hỏi hơi ngu, làm loạn cái blog của bác lên :) cám ơn bác nhiều ạ

Reply Xóa nhận xét

Sống thuần chay 1/11/14 09:21

48

Thanks nhé!

Reply Xóa nhận xét

Nặc danh 1/11/14 18:40

49

Nhận xét này đã bị quản trị viên blog xóa.

Duy Pham 1/11/14 19:20

51

Hự, chết cười với comment của bạn, đến nhà bố vợ đừng lỡ lời vậy nhé. Recent comments này mình chưa share.

Reply Xóa nhận xét

Nặc danh 1/11/14 20:37

52

Em xin lỗi nhé, bàn phím máy tính của em ấn khó quá. Anh xóa giúp em comment này nhé!

Reply Xóa nhận xét

Nặc danh 1/11/14 18:45

50

Emn thật sự xin lỗi anh em đã viết lầm từ "có". Mong anh xóa giùm em ạ

Reply Xóa nhận xét

Mr Rùa Biển 1/11/14 21:59

53

khổ thân bác Duy :))

Reply Xóa nhận xét

Unknown 20/11/14 18:11

54

bạn ơi có thể demo không ? mình không hiểu lắm mình chỉ tự mò thôi... và mọi người góp ý cho em cái blog này với.... http://mai2labaoxa.blogspot.com/

Reply Xóa nhận xét

Nặc danh 22/11/14 19:29

55

Anh Duy Phạm có thể xóa giúp em Comment ở trên không ạ.?

Reply Xóa nhận xét

Điện Tử ChipKool 21/12/14 10:14

56

Chip đang cần 1 bạn sửa Code Blogspot cho chip để tăng tốc độ load trang có trả phí. Liên hệ chip: echipkool.com@gmail.com

Reply Xóa nhận xét

Unknown 23/12/14 13:46

57

Cảm ơn anh

Reply Xóa nhận xét

Unknown 31/5/15 18:09

58

your blog is amazing, but can you tell me what they mean in english?

Reply Xóa nhận xét

Tien Nguyen 5/7/15 20:21

62

Google translate will help a bit.

Reply Xóa nhận xét

Fiat Trịnh Xuân Thọ 8/6/15 20:34

59

Hôm bữa bác gửi cho cái code chia sẻ lên Pinterest mà không cần kèm theo js, nhưng iem quên mất rồi. Hôm nay thấy cái code này không chạy

[code]<a class='bub' href='http://pinterest.com/pin/create/button/?url= &media= http://lh4.ggpht.com/-lwHbeQyuWgQ/UzEmestcDsI/AAAAAAAACIg/XOTd_rYWsL0/no-image.png ' rel='nofollow' style='margin-left:210px;background:#cb2027' target='_blank'>
<i>Pinterest</i>
<span>Chia sẻ lên<br/>Pinterest</span>
</a>[/code]

...nên sang đây hỏi xin lại bác.

Bác thông cảm, iem già roài

Reply Xóa nhận xét

Duy Pham 10/6/15 09:26

60

Bác dùng code này:
<a class='bub' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&amp;media=" + (data:post.firstImageUrl ? data:post.firstImageUrl : "http://lh4.ggpht.com/-lwHbeQyuWgQ/UzEmestcDsI/AAAAAAAACIg/XOTd_rYWsL0/no-image.png")' rel='nofollow' style='margin-left:210px;background:#cb2027' target='_blank'>
<i>Pinterest</i>
<span>Chia sẻ lên<br/>Pinterest</span>
</a>

Reply Xóa nhận xét

Duy Pham 10/6/15 09:37

61

Thêm nữa là code chia sẻ này dành cho trang bài viết, nếu bác để cả trang chủ... thì phải thay data:post.canonicalUrl thành data:blog.canonicalUrl

Reply Xóa nhận xét

Unknown 5/3/17 22:03

63

Lâu rồi chưa thấy bác viết bài mới nhỉ :D

Reply Xóa nhận xét

Duy Pham 7/3/17 15:19

64

:D

Reply Xóa nhận xét

Fiat Trịnh Xuân Thọ 24/7/17 18:24

65

Xin lỗi bác Duy trước vì câu hỏi không liên quan lắm,

Bắt đầu từ độ phân giải bao nhiêu ( @media screen and (max-width:??? px) ) thì Blogger bắt đầu hiểu đó là thiết bị di động ?

Nguyên nhân câu hỏi:
Mình dự định đặt nguyên CSS sẽ chạy ở thiết di động trong 1 điều kiện riêng, khi làm như vậy thiết bị di động đỡ phải chạy CSS từ lớn đến nhỏ.

VD trang index nếu chạy ở máy tính: <b:if cond="data:blog.pageType != "static_page" and data:blog.pageType != "item" and data:blog.isMobileRequest == "false"">

... CSS...

</b:if>

VD trang index nếu chạy ở di động:
<b:if cond='data:blog.pageType != "static_page" and data:blog.pageType != "item" and data:blog.isMobileRequest == "true"'>
...CSS..
</b:if>

Cảm ơn bác nhiều :D

Reply Xóa nhận xét

Duy Pham 24/7/17 22:49

66

Không phụ thuộc độ phân giải màn hình đâu bác. Giờ thiết bị di động cũng có độ phân giải cao như trên desktop rồi nên không nên ẩn css.

Reply Xóa nhận xét

Đăng nhận xét

Auto based on browser