Trang chủ \23.9.14

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

  1. 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'>.
  2. Label:
    Câu lệnh điều kiện là <b:if cond='data:blog.searchLabel'>.
  3. 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.

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

66

Nhận xét
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
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
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
6

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

Reply Xóa nhận xét
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
7

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

Reply Xóa nhận xét
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
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
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
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
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
9

wellcome you come back :))

Reply Xóa nhận xét
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
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
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
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
18

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

Reply Xóa nhận xét
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
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
28

Troll vui thôi mà bác

Xóa nhận xét
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
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
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
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
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
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
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
31

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

Xóa nhận xét
24

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

Reply
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
Nặc danh 1/11/14 18:40
49

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

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

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

Reply Xóa nhận xét
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
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
58

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

Reply Xóa nhận xét
62

Google translate will help a bit.

Reply Xóa nhận xét
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= &amp;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
60

Bác dùng code này:
<a class='bub' expr:href='"http://pinterest.com/pin/create/button/?url=" + data:post.canonicalUrl + "&amp;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
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
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
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 != &quot;static_page&quot; and data:blog.pageType != &quot;item&quot; and data:blog.isMobileRequest == &quot;false&quot;">

... CSS...

</b:if>

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

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

Reply Xóa nhận xét
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

Cancel