Loading post navigation ...
 
 

Pro page

12
Nhận xét

Làm nổi bật cho bài viết đầu tiên

| by Phan Dũng | views

Hãy nhấn thanks để ủng hộ tác giả

Hôm nay mình sẽ giới thiệu cho các bạn cách làm nổi bật bài viết đầu tiên. Mình sẽ giới thiệu 2 cách : cách dùng jQuery và không dùng jQuery. 2 cách đều có điểm chung là thêm code CSS cho bài viết đầu tiên để nó khác với các bài khác, và điểm khác biệt giữa 2 cách là 1 cái phức tạp, nặng nề hơn, còn 1 cách thì dễ hiểu, đơn giản hơn. Tuy vậy mình vẫn sẽ giới thiệu cho các bạn cả 2 cách, để các bạn có thêm nhiều thông tin, kiến thức hơn.


Xem demo trên blogspot : DEMO

Hình ảnh minh họa:
lastest post - mothuthuat.com

A. Cách 1 : dùng Jquery
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chèn đọan code CSS bên dưới vào trước dòng code ]]></b:skin>
.post.first {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}
4. Tiếp tục chèn đọan code bên dưới vào trước thẻ đóng </head>
<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClas<script src='http://data.fandung.com/blog/demo/jquery-lightbox/js/jquery.js' type='text/javascript'/>
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<script type='text/javascript'>
$(document).ready(function(){
$(".post:first").addClass("first");
});
</script>
</b:if>s("first");
});
</script>
</b:if>
Ở đây mình có sử dụng điều kiện b:if để thủ thuật chỉ hiển thị ở ngòai trang chủ, nếu như không có lệnh này, thì khi mở ở trang bất kì nào như : bài viết, trang archive, label … thì bài viết đầu tiên đều được làm nổi bật.

5. Sau cùng là save template lại.

B. Cách 2 : Không dùng jQuery (update)
- Cách này mình sẽ chính lệnh b:if của blogger để chọn bài viết đầu tiên.
- Sau đây là cách thực hiện:

a. Vào bố cục > chỉnh sửa code HTML > nhấp chọn mở rộng mẫu tiện ích. tìm đoạn code này:
<b:include data='post' name='post'/>

b. Thay thế nó bằng đoạn code bên dưới :
<b:if cond='data:blog.url == data:blog.homepageUrl'>
<b:if cond='data:post.isFirstPost == "true"'>
<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>
- Với đoạn code trên ta đã dùng div với id là first-post để bao bài viết đầu tiên lại. Nhưng nếu làm tới đây thì ta sẽ chưa thấy được gì, muốn bài viết đầu tiên khác với các bài còn lại thì ta phải thêm code CSS cho nó.
- Code CSS các bạn thêm vào trong code template, trước dòng code ]]></b:skin>, ví dụ như code mẫu bên dưới:
#first-post {
background:#efefef url(http://data.fandung.com/img/lastest-post.png) no-repeat top right;
padding:10px;
border:1px solid #ddd;
}

c. save template lại.

Chúc các bạn thành công.

Repost from mothuthuat.com
Update from duypham.info


Enter your mail address:

12

May Thy

Tiện ích của bạn hay đó :)

Phan Dũng

bài này mình post lại tử mothuthuat,chủ yếu để lưu trữ thôi

Duy Pham

Ợ, giống hệt bài mình

Phan Dũng

oh, đúng rồi :D, cách 2 là tham khảo từ blog của bạn, nên update lại thủ thuật, hồi trước ko chưa biết lệnh b:if nên dùng jQuery hơi cồng cềnh.

Phan Dũng

@Duy Phạm: à, có chút ý kiến thế này. Blog của bạn có khá nhiều bài hay và lạ, ví dụ như bài "Tùy chỉnh hiển thị quảng cáo" -> cái này lạ :D, lạ ở chỗ tạo hàm cho nó. Hy vọng sau này bạn sẽ có nhiều bài viết hay và lạ cho blogspot, mình viết lâu quá rồi, sắp cạn ý tưởng rồi :D.

Khi nào có bài viết nào hay thì mình xin phép copy về để lưu trữ nhé. Rút kinh nghiệm như blog của AnhVõ hồi đó, có quá nhiều thủ thuật hay mà giờ coi như đã mất toàn bộ rồi.

Duy Pham

Mình thì chỉ đụng đến js khi k có cách khác khả thi hơn. Nếu dùng js thì mình nghĩ nên thêm load từ feed bài đầu tiên rồi so sánh link (hoặc title...) để tạo sự khác biệt cho bài mới nhất. Cái này sẽ vẫn tạo khác biệt khi duyệt theo label hoặc archive.

Nói đến Anhvo nghe danh mà k dc biết, hồi mình làm quen với Blogger thì hình như Anhvo mất tích :-o

Phan Dũng

uh, AnhVo mất tích lâu rồi, do công việc nên từ bỏ đam mê viết blog. Mình cũng có lúc từ bỏ rồi, nhưng giờ thì lại "lâu lâu post 1 bài cho vui".

Mình thấy bạn có kiến thức về các ngôn ngữ web đó, chắc chẳng lâu sau sẽ qua mặt blog mình thôi, mình chỉ là tay ngang, viết bằng cách mò mẫm & niềm đam mê thì nhiều. Còn kiến thức về nó thì phải thú nhận chưa qua 1 lớp đào tạo chính thức nào :D

Duy Pham

Nói về tay ngang thì mình cũng vậy :D. Năm 2005 lần đầu chập chững làm quen với web development, mình học trường ĐHXD khoa tin nên có học chút ASP thôi, giờ có đụng đến ASP này bao giờ đâu :)). Nói là tin học chứ mình chủ yếu dc đào tạo về XD toàn bê tông cốt thép ~x(. Thiết kế web là niềm đam mê mà thôi, nhưng khi làm quen với Blogger thì mình ước giá như biết sớm hơn, trước đây có ác cảm với blog lắm, có lẽ cứ hình dung blog là 360 Yahoo :p. Mình có thói quen khi đam mê cái gì là tập trung 100% cho nó, bạn mà biết những ngày đầu có khi 2, 3 ngày mình chỉ ngủ có vài tiếng vì quá ham tìm hiểu những câu lệnh XML của Blogger. K ngờ tạo blog chỉ là để truy xuất nhanh những phần mềm mình up thôi rồi đâm ra thích nó :D.

P/S: à thường thì mình comment sẽ xưng bác/em cho nó lịch sự :p nhưng hình như FD cũng sinh năm 85 giống mình nên xưng hô thế này :)

Duy Pham

Comment dài quá cứ bị refresh, hình như vào spam mất rồi.

Nói về tay ngang thì mình cũng vậy :D. Năm 2005 lần đầu chập chững làm quen với web development, mình học trường ĐHXD khoa tin nên có học chút ASP thôi, giờ có đụng đến ASP này bao giờ đâu :)). Nói là tin học chứ mình chủ yếu dc đào tạo về XD toàn bê tông cốt thép ~x(. Thiết kế web là niềm đam mê mà thôi, nhưng khi làm quen với Blogger thì mình ước giá như biết sớm hơn, trước đây có ác cảm với blog lắm, có lẽ cứ hình dung blog là 360 Yahoo :p. Mình có thói quen khi đam mê cái gì là tập trung 100% cho nó, bạn mà biết những ngày đầu có khi 2, 3 ngày mình chỉ ngủ có vài tiếng vì quá ham tìm hiểu những câu lệnh XML của Blogger. K ngờ tạo blog chỉ là để truy xuất nhanh những phần mềm mình up thôi rồi đâm ra thích nó :D.

P/S: à thường thì mình comment sẽ xưng bác/em cho nó lịch sự :p nhưng hình như FD cũng sinh năm 85 giống mình nên xưng hô thế này :)

Dím

Anh ơi, có thể chỉnh thành hiển thị ở các bài viết trong ngày hôm nay không?

Chu Đăng Thiện

anh Phan Dũng ơi, em nhờ anh giúp đỡ: blog của em là: www.bannhadatonline.blogspot.com, ở các trang độc lập của blog của em ví dụ: dự án, tin tức, làm sao để em có thể đăng nhiều bài trên các trang độc lập (có phần đọc thêm, và không hiện thị trên trang chủ)? hoặc có thể tạo các danh mục cho các trang độc lập, và các bài viết trong các danh mục không hiện thị trên trang chủ? cảm ơn anh và mong được anh trả lời

que lang minh

link ảnh die rồi adm ạ



☺ Các bạn có thể viết lời bình của mình cho bài viết, và tuân thủ một số quy tắc sau:
» Các bài comment phải nghiêm túc, không dung tục, không spam.
» Nội dung phải liên quan tới chủ đề bài viết.
» Có thể sử dụng thẻ trích dẫn [quote], cấu trúc thẻ như bên dưới :

[quote=AUTHOR name=fdquote]NỘI DUNG[/quote]

» Có thể sử dụng các thẻ <b>,<i>,<a>.


BlOg FD chính thức đóng comment của khách ẩn danh.

BlOg FD.

[▼/▲] More Emoticons
:)) ;)) ;;) :D ;) :p :(( :) :( :X =(( :-o :-/ :-* :| 8-} :)] ~x( :-t b-( :-L x( =))

Newer Posts Older Posts Home