Loading post navigation ...
 
 

Pro page

21
Nhận xét

Chèn icon vào trước tiêu đề bài viết theo các nhãn tương ứng

| by Phan Dũng | views

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

Theo yêu cầu của 1vn.biz
[FD's BlOg] - Trước kia mình cũng đã giới thiệu việc chèn ảnh của tác giả vào trước mỗi tiêu đề bài viết, và thủ thuật hôm nay cũng dùng 1 cách tương tự.
Thủ thuật này đã được 1 bạn bên 1vn.biz yêu cầu mình từ khá lâu, nay mới trả lời được. Nhân đây mình cũng gửi lời cáo lỗi tới bạn 1vn.biz cũng như những bạn khác đã yêu cầu mình nhưng chưa nhận được phản hồi.


Trước khi đi vào thủ thuật, mình xin lưu ý là thủ thuật này chỉ sử dụng thích hợp cho các bài viết trong blog có 1 nhãn, vì ở đây mình sự dụng việc nhận diện nhãn, khi đúng nhãn đã mặc định thì sẽ hiển thị 1 ảnh tương ứng. Nếu 1 bài viết có nhiều nhãn thì việc hiển thị ảnh này sẽ ko được hợp lý (sẽ xuất hiện nhiều ảnh cùng 1 lúc).

Hình ảnh minh họa kết quả:


☼ Các bước thực hiện :
1. Vào bố cục
2. Vào chỉnh sửa code HTML
3. Chọn mở rộng mẫu tiện ích
4. Chèn đoạn code CSS này vào trước dòng code ]]></b:skin>

.post-icon img {
height:20px; /*có thể tùy chỉnh lại chiều cao này (hoặc xóa nó đi) tùy theo kích thước của ảnh bạn muốn hiển thị */
float:left;
margin-right:8px;
}

5. Tiếp tục tìm đến đoạn code này :

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>
<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

6. thêm đoạn code được đánh dấu highlight như bên dưới:

<b:if cond='data:post.title'>
<h3 class='post-title entry-title'>

<div class='post-icon'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>

<b:if cond='data:label.name == &quot;Label 1&quot;'>
<img src='Link ảnh 1'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 2&quot;'>
<img src='Link ảnh 2'/>
</b:if>

</b:loop>
</b:if>
</div>

<b:if cond='data:post.link'>
<a expr:href='data:post.link'><data:post.title/></a>
<b:else/>
<b:if cond='data:post.url'>
<a expr:href='data:post.url'><data:post.title/></a>
<b:else/>
<data:post.title/>
</b:if>
</b:if>
</h3>
</b:if>

- Thay tên nhãn và link ảnh icon cho thích hợp.
- Nếu có nhiều nhãn thì các bạn cứ thêm đoạn code tương tự như bên dưới vào trước dòng </b:loop> :

<b:if cond='data:label.name == &quot;Label 3&quot;'>
<img src='Link ảnh 3'/>
</b:if>

<b:if cond='data:label.name == &quot;Label 4&quot;'>
<img src='Link ảnh 4'/>
</b:if>


7. Save template.

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



Enter your mail address:

21

thongtin247.blogspot

a dung a. em dua logo cua a vo lien ket logo cua blog e roi. a dung co the dua logo cua blog e len blog cua a duoc khong. blog cua em ne thongtin247.blogspot.com

anh3ngơ

Bài viết hữu ích nữa ra đời, làm ngày nào cũng ghé mà mãi mới thấy bài cần và hữu ích, anh "bế" nó sang vnressnet.com để phổ biến nhé.

doducluyen

tuyệt thật :D

Khách (ẩn danh)

Ngày nào anh3ngơ cũng canh chừng ở đây hết! Có bài nào vừa xuất bản ra đòi là bjup liền! ehehe

Khánh Trắng

Ì wên, bấm nhầm nặc danh!

fandung

@Thongtin247 : sẽ sớm add logo của bạn

@A. Chinh : hihi :D, lâu lâu em mới "phọt" ra được 1 bài chứ, có đâu ngày nào cũng có 1 bài chắc em thành super blogger ;))

anh3ngơ

he he, khánh trắng nói chuẩn, nhưng phải chỉnh (bài nào độc đáo mới bụp).

Khanh trang sang traimientay mà xem, bài nào cung bụp chứ không như 3ngơ đâu nhé, khe khe.

fandung

oh thế hả anh Chinh, để em qua em thử sao

min HMN

hê hê... anh Dũng nói chỗ "có nhiều lable thì hiển thị không hợp lý" :D nên em miễn xài :D
anh xem bên em luôn để 1 icon cho nó đỡ.
à...cái hiển thị comment em gửi qua mail của anh, anh xem giúp em với nhé :D

Khánh Trắng

Khi nào rảnh anh3ngơ dắt Khánh Trắng wa nhà traimientay xem nhé! hhêh

Khách (ẩn danh)

thongtin247.blogspot.com trong xau wa . bà con chúng ta vao giup đỡ nha

thongtin247.blogspot.com

vo giúp đỡ với nha bà con

vietutd

Thời tiết thật mát mẻ
Chúc các bạn một kỳ nghỉ cuối tuần vui vẻ

:)

dichthuatviet

em phải test cái, thanks anh Dũng

singleboy

bai viết kha hay

Hentai - Ecchi - Smut

Cam on FD :D

Giang

Bạn dũng ơi, t muốn căn cho chữ trong label lui vào, hoặc là chữ trong phần body của blog, lui vào bên trái hoặc phải thì thêm code nào vậy bạn.

Giúp t với nhé

Khách (ẩn danh)

chẳng hữu ích j.dăng toàn lung tung !!

catch

Good article!!!This articles and pictures novel, and not only very true, I like!!!<a href="http://www.bagzer.com/burberry-handbags.html">cheap burberry handbags</a>

catch

Good article!!!This articles and pictures novel, and not only very true, I like!!!http://www.fandung.com/2009/05/tao-anh-nen-chu-ki-cho-bai-viet-ung-voi.html

Minh Hải

Lâu wa'mới ghé thăm FD. Thấy bài này hay hay để thử xem. Thanks! :))



☺ 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