Trang chủ \21.2.11

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.

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

74

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

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

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

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

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

Reply Xóa nhận xét
Nặc danh 21/2/11 23:41
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
10

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

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

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

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

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

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

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

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

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

Reply Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
Nặc danh 1/3/11 07:27
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
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 Xóa nhận xét
33

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

Reply Xóa nhận xét
34

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

Reply Xóa nhận xét
35

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

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

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

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

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

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

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

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

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

Reply Xóa nhận xét
50

minh lam them link anh sao ko dc trui`

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

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

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

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

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

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

Reply Xóa nhận xét
59

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

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

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

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

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

Reply Xóa nhận xét
65

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

Reply
66

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

Reply Xóa nhận xét
67

:(( please admin fix me my template
thkx

Reply Xóa nhận xét
70

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

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

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

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

Reply Xóa nhận xét
71

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

Đăng nhận xét

Cancel