[Blogspot] Thêm icon trước tiêu đề blog theo nhãn

2 ngày rồi chưa viết lách, hôm nay nổi hứng ngồi cặm cụi tìm thì bây giờ mình sẽ chia sẻ đến các bạn 1 thủ thuật mới là thêm icon bất kì trước tiêu đề bài viết theo nhãn trong blogspot nhé!
[Blogspot] Thêm icon trước tiêu đề blog theo nhãn
Cách thực hiện:Bước 1: Truy cập quản trị blogger - Chủ đề - Chỉnh sửa HTML.
Bước 2: Thêm CSS dưới trước thẻ ]]></b:skin>
.post-icon img {height:25px;float:left;margin-right:8px;}
Bước 3: Ấn Ctrl+F và tìm đoạn sau:
<b:if cond='data:post.title'><h2 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></h2></b:if>
--- Trong sự thiết kế của mỗi template thì có thể sẽ không tìm được 1 đoạn y hệt như trên, người thiết kế có thể thay đổi các thẻ định dạng tiêu đề như h2, h3, h4... Vì vậy, bạn hãy view source phần tiêu đề bài viết để tìm code cho chính xác nhé.
Thêm đoạn code hiển thị icon trước tiêu đề bài viết vào vị trí được tô màu.
<b:if cond='data:post.title'><h2 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></h2></b:if>
--- Sửa Label1 và Label2 thành tên nhãn bạn thích và thêm ảnh vào Link ảnh 1 và Link ảnh 2 nhé.
--- Nếu muốn thêm ảnh cho các nhãn khác thì bạn thêm code theo cú pháp sau:
<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>
Bước 4: Lưu template lại và ra xem thành quả.
Kết luận:Bài viết Thêm icon trước tiêu đề blog theo nhãn chỉ ngắn gọn và đơn giản như vậy thôi, không có sự can thiệp của Javascript mà chỉ có Css và HTML nên các bạn đừng lo lắng về tốc độ tải trang nhé.
Chúc các bạn thành công :)
Code by: Trực Blog

TSM Blogger

Chào mừng các bạn đến với TSM. Blog chia sẻ thủ thuật blogspot, tin tức công nghệ, thể thao, kho template blogspot và nhiều thứ khác. Mong các bạn luôn ủng hộ để blog luôn vững mạnh!

12 bình luận Tổng hợp bình luận

avatar

Góp ý: Lần sau nếu không có trang demo riêng thì cho 1 tấm ảnh để hình dùng cũng được, chứ vào toàn thấy code hơi khó hình dung.

avatar

Cái này thì có gì mà khó hình dung hả bác :)) Tiêu đề thể hiện luôn bản chất. Hiểu đơn giản là có 1 icon phía trước tiêu đề là xong r.

avatar

Ý kiến ngoài lề: E nghĩ template bác để màu trắng - sáng đẹp hơn đấy. Màu tối nhìn kì kì, chắc do e quen nhìn theme sáng r :v

avatar

E thay đổi sở thích như chong chóng ấy mà :)) Đc vài bữa e lại chán cái template đen xì xì thôi bác.

avatar

Thanks nhá. Đang áp dụng cho Phú Cường Blogger đấy :v

ĐĂNG KÍ NHẬN BÀI VIẾT MỚI