Trang chủ \ 18:27

Tạo mầu nền riêng cho bài đăng mới nhất

Chúng ta bắt gặp đâu đó những blog mà ở trang chủ bài đăng mới nhất có mầu nền khác biệt so với những bài đăng còn lại. Việc làm này phần nào gây sự chú ý cho độc giả đối với bài đăng đó.
first post

Hôm nay mình sẽ hướng dẫn các bạn tạo mầu nền riêng cho bài đăng mới nhất trong Blogger.

Bước 1: Tạo id first-post quy định mầu nền cho bài đăng mới nhất. Thêm đoạn mã dưới đây vào trước thẻ ]]></b:skin> trong template của bạn.
#first-post{background:#DDD}

Bước 2: Tìm thẻ <b:include data='post' name='post'/> và thay thế nó bằng đoạn mã dưới đây.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
 <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
  <div id='first-post'>
   <b:include data='post' name='post'/>
  </div>
 <b:else/>
  <b:include data='post' name='post'/>
 </b:if>
<b:else/>
 <b:include data='post' name='post'/>
</b:if>

Thủ thuật trên thêm thuộc tính background là mầu nền với giá trị #DDD, tùy vào từng template mà bạn thay đổi cho phù hợp.

Bạn có thể thêm những thuộc tính khác cho id first-post để bài đăng mới nhất có nhiều sự khác biệt hơn.
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ẻ

75

Nhận xét
1

Hồi trước cũng nghe qua lệnh firstPost này, nhưng còn mơ hồ, không biết có thay đổi kích thước được không nhỉ :)

Reply
2

@NoctKích thước gì hả bác? Em không viết chi tiết lắm vì mỗi template 1 kiểu, nhưng hiểu cách hoạt động thì tùy biến thêm được nhiều thứ.

Reply
3

Kích thước bài đăng ấy :P

Giống cái firstpost bên Nexis ấy

Reply
4

@NoctÀ, khi có ý định convert theme đó em cũng băn khoăn để sao cho giống. Em có ý định tạo auto readmore bỏ qua bài đăng mới nhất, bài đăng này sẽ dùng chính readmore của Blogger. Vấn đề là những bài đăng sau của Nexis được chia làm 2 cột. Có thể tùy biến thêm với CSS sẽ làm được như vậy, bác thử nghiên cứu xem.

Reply
5

Duy có thể đơn giản code bằng cách thêm CSS sau dòng và cũng không cần phải viết lại đoạn . :)

Reply
6

Ồ không hiện code này ([id='post' var='post']) trước ([class='post hentry'])

Reply
7

Bác Duy lúc nào cũng nhanh chân. Kiểu này, em chẳng còn gì để viết, chắc sau này đành giới thiệu lại bài viết của bác để tăng traffic giúp bác mất thôi. :)

Reply
8

@iTechPlus Không biết những template khác thế nào vì khi code cho temp của mình em đặt id, class theo ý mình nên thủ thuật này em viết chung cho mọi temp. Khi hiểu được cách thức hoạt động thì tùy mỗi người mà áp dụng code tối ưu nhất cho template của mình.

Reply
9

@Tien Nguyen Khi bắt đầu blogging em cũng nghĩ những người đi trước viết hết rồi liệu còn gì cho mình không, đôi khi nản vì không có ý tưởng gì mới lạ. Sau này tìm hiểu và thấy cũng có nhiều vấn đề chưa ai khám phá :D

Reply
10

tôi muốn dc lk với bạn, nêu ok thì qua bảo tôi

Reply
11

@FRIENDS-PC Bác vui lòng liên hệ qua mail, như vậy sẽ tiện hơn. Blog em luôn sẵn sàng liên kết với các blog về công nghệ thông tin, nhất là dùng nền tảng Blogger.

Reply
12

Blgo tớ không có <b:include data='post' name='post'/> thì làm sao :(

Reply
13

@Nguyễn Đức Đó là một hàm của Blogger XML code nên không thể không có được, có thể ký tự ' được viết dưới dạng khác bác tìm kỹ lại xem.

Reply
14

Blog của bác blogger làm em lười comment.
Em có site links bác ơi. Không hiểu sao google nó lại yêu em :|

Reply
15

@Quan@wanlunblog.com Site link là những liên kết được giữ cố định trên website và nhiều lượt truy cập. Ở Blogger thì chỉ trang dạng static page, bài viết và lưu trữ là được Google index, còn label là nơi phân loại thì lại là trang dạng search nên Google chặn không index chúng, Blogger muốn có site link chỉ còn cách đặt liên kết tới những trang dạng trên kia, đây là điểm thua thiệt lớn so với WP ngoài khung comment.

Reply
16

Đang định thay temp làm mới blog mà ngại quá :(

Reply
17

@NAD Làm xong cái temp Nexis mà cũng ngại thay, đầu tư thiết kế cho cái này nhiều quá rồi.

Reply
18

Mới thay Temp mới, mời các bạn cho biết ý kiến nhé ! :))

Reply
19

@iTechPlus Layout hình như không có gì thay đổi :-SS, được tut lại gọn gàng hơn. Mà bác không phân trang cho trng chủ à :-?

Reply
20

À, tạm thời mình không phân trang cho trang chủ và trang bài viết :) Không biết Duy có cao kiến gì không !? :-?

Reply
21

@iTechPlus Trang bài viết thì có thể không cần còn trang chủ thì phải có chứ bác.

Reply
22

Chúc mừng DP xài Template mới nhé. :))

Reply
23

Skin mới đây sao, làm khéo thế :))

Nhưng mà mình thấy cái khung author bên kia đẹp hơn :D

Reply
24

Chúc mừng Temp mới :)) Chúng ta khai trương trùng ngày rồi. Hy vọng hôm nay tốt ngày :D

Reply
25

Bravo new temp :D

Mềnh cũng đang muốn thay temp mà chưa tìm đc cái nào ưng ý :D

Reply
26

@Noct Em lại không thích ảnh nền đó chứ, đang tính thay bg header với footer nhưng chưa tìm được cái nào :D

Reply
27

Temp bác Duy làm nhìn pro quá. Chúc mừng bác, nhìn vừa mắt thật.

Reply
28

Nexis blogger temp đây phải ko bác DP ?
Sơ sơ thấy hiển thị trên 3 trình duyệt FF , Chrome và IE quá chuẩn !
Chúc mừng chức mừng ! :)

Reply
29

Chắc hôm nào phải nhờ bác DP fix giúp lỗi temp bên em mới dc .
Của em chỉ hiển thị tốt trên FF và Chrome , còn IE thì lệch lạc tùm lum :((

Reply
30

@LinkFoci FF, Chrome hay Safari đều theo chuẩn rồi, khác nhau chút ở CSS3 chrome và Safari là webkit. Temp này đang lỗi chút với IE6 khi nó không hiểu min-height là gì :-t, chắc phải dành riêng cho nó cái css về height mất. IE bác cần chú ý chút ở thuộc tính margin, padding và float.

Reply
31

Có khi phải cài lại IE6 để xem mình có còn đẹp trai hay không :-SS.

Mà có cái comment bị bay vào trong spam box hay sao ấy :-?

Reply
32

@NoctCài ietester đi bác, chẳng qua blog em có nhiều người down phần mềm mà toàn thấy dùng cả IE6 :-O nên mới fix thôi, ngoài ra trên Ubuntu thì kích thước có khác chút nữa @-)

Reply
33

Oack. Nhìn qua cứ tưởng bác Duy chuyển sang dùng WP rồi chứ ! :-O

Reply
34

@D.N.H Vẫn là hàng nhái thôi bác ạ :D

Reply
35

Thiệt là khoái cái template này của Duy đó nha. Đẹp rất thanh :)

Reply
36

DP ơi, a đề nghị trên Widget Blog Bạn bè của e, link blog a nên đổi thành Huynh Nhat Ha! để cho link thành 1 dòng sẽ đẹp hơn cho cân đối với các link khác. =))

Reply
37

@Huỳnh Nhật Hà Em đang "mông má" lại footer chút ý mà, font chữ to lên làm tên blog bác bị thụt xuống, để em xóa chữ blog đi :)

Reply
38

Không hiểu sao lại thấy giông giống cái temp cũ :D

Reply
39

@Minh Triết Cảm ơn bác! Em vẫn tiếc cái temp cũ vì fix gần như hết các lỗi trên các trình duyệt thông dụng rồi, thấy mọi người đổi mới blog nên cũng đú đởn theo :D

Reply
40

@NoctĐều là Thesis nhái mà bác :D

Reply
41

Bái phục :))
Mà hình như kiểu phân trang của temp này giống cách mà fandung hướng dẫn phải ko bác?

Reply
42

@Tùng Lâm Không bác ạ! Em decode và edit của Abu Farhan. Vì không liên hệ được Abu để xin viết thủ thuật về phân trang này với việc loại bỏ widget by Abu nên đến giờ không giới thiệu nó. Phân trang này ưu điểm rất hay là không tải toàn bộ feed của blog về, với blog mà nhiều bài thì feed nó khá là lớn.

Reply
43

Ngưỡng mộ DP quá :)
Hàng nhái nhưng nhái rất chuẩn ấy :))

Reply
44

không những đẹp mà tốc độ thật khủng. Hy vọng sắp tới Duy sẽ cho ra lò một số themes để anh em Blogger việt ngẩn mặt :))

Reply
45

Temp mới đẹp vãi, nhưng em hok thik 2 cái màu ghi và xanh này cho lắm :D

Reply
46

@Rùa Biển Thiết kế template là lĩnh vực mà em yêu thích nhưng dạo này bận quá, viết bài cũng nhác rồi. Hi vọng một lúc nào đó có thời gian sẽ thêm một label Templates.

@NAD Màu xanh này là màu đặc trưng blog của em bác ạ mặc dù quần áo chỉ thích màu đên :)

Reply
47

Đúng là các thành phần của temp hiển thị trên IE rất chuẩn :)) , có điều Emoticons thì ko :D

Reply
48

@LinkFoci Mặc dù viết bài để hiện thị emoticons trên IE nhưng cách đó replace ký tự qua ID nên khi lấy URL ID của thành phần bên trong nó thì không chính xác nữa nên tạm thời em replace qua class, IE7 về trước không hiển thị :D

Reply
49

thank bài viết rất hay :))

Reply
50

minh lam them link anh sao ko dc trui`

Reply
51

Cái này sẽ tô màu theo màu mình tùy chỉnh đúng k bác ? e còn mơ hồ blogspot lắm. Cho e hỏi làm thế nào để khi bác chèn code nó đóng khung như thế ạ ?

Reply
52

@Thiết kế logo Đúng rồi, bác thay #DDD bằng mã màu muốn hiển thị. Còn khung chèn code thì tùy biến thêm với CSS thôi, bác tìm hiểu về CSS sẽ làm được. Biết CSS sẽ giúp tùy chỉnh giao diện dễ dàng hơn.

Reply
53

hic hic! sao e làm k được nhỉ, thử đi thử lại mấy lần rồi :((

Reply
54

@Mèo Blog Bạn đang thử nghiệm với temp Nexis phải k? Temp đó bản thân bài mới nhất đã khác với các bài còn lại rồi mà. Code nó hơi khác với các temp thông thường.

Reply
55

Cho em hỏi bác Duy đang làm gì nhỉ? :)

Reply
56

@Kết Nối blog Mình làm bên XD :D

Reply
57

Hi admin, i will be very happy if help me to know how to make badge (new post) for the first post...
besides i test this tutoriel on my template but it doesn't work!!!
thank you very much

Reply
58

i find a lot problems to fix this
can i send you my template to fix me this
thanks a lot

Reply
59

@AdministrateurYour Blogger profile is not public, I don't support!

Reply
60

wait! like you know i'm so beginner in blogger for this aim i don't know a lot thing...
how to make my profil public?
thanks to help me

Reply
61

OH YES YOU ARE RIGHT MY PROFIL WAS DISABLE
NOW LOOK AT IT§
I THINK YOU CAN SUPPORT ME...

Reply
62

@AdministrateurReally?! Go to http://www.blogger.com/edit-profile.g checked Share my profile, down to the bottom and click Save Profile.

Because I don't know your blog.

Reply
63

okey thanks
can i send you my template to fix me this :-?

Reply
64

@toprodaterYou up to Mediafire and send link to me via http://blog.duypham.info/p/contact.html

Reply
65

okey thanks

Reply
66

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

Reply
67

hi,admin now i sent you my template, please don't forget to fix me the tuto...
thanks a lot

Reply
68

:(( please admin fix me my template
thkx

Reply
69

@toprodaterFixed, you check mail.

Reply
70

thanks a lot Duy Pham

Reply
71

Cho iêm hỏi ngu cái:
Có cách nào tăng kích thước ảnh ở ngoài trang chủ cho bài đăng mới nhất không ? Giống như :Auto readmore với hình ảnh. Không readmore với bài viết mới nhất" ấy.

Làm theo cái này của bác http://blog.duypham.info/2011/01/auto-readmore-for-blogger-no-javascript.html và thêm javascript cho hình to hơn và dòng trích dẫn nhiều hơn cũng được nhưng nó lấy 2 lần nên cũng chầm chậm

Hóng tin bác :D

Reply
73

Dùng data:post.firstImageUrl sẽ lấy link gốc của ảnh. Bác xem thêm bài này http://blog.duypham.info/2013/04/auto-readmore-for-blogger-2013.html

Reply
74

Làm theo bài này và thay #first-post img{width:100%;height:300px} liệu có làm chậm blog không bác

Thêm mấy cái dòng b:include data='post' name='post' nó có sao không :o

Demo đây: http://ngonluanho-net.blogspot.com/

Reply
75

Chỉnh css k làm chậm gì đâu bác, cả hàm post kia cũng k sao.

Reply
72

Tìm ra roài, làm như bài này và thay #first-post img{width:100%;height:300px}

Có cách nào hay hơn thì chỉ thêm bác 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.