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é!
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ẻ
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.
--- 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:
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
 |
| [Blogspot] Thêm icon trước tiêu đề blog theo nhãn |
Bước 2: Thêm CSS dưới trước thẻ
]]></b:skin>.post-icon img {height:25px;float:left;margin-right:8px;}<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>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 == "Label 1"'><img src='Link ảnh 1'/></b:if><b:if cond='data:label.name == "Label 2"'><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>--- 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 == "Label 3"'><img src='Link ảnh 3'/></b:if>
<b:if cond='data:label.name == "Label 4"'><img src='Link ảnh 4'/></b:if>Chúc các bạn thành công :)
TSM Blogger
7 bình luận Tổng hợp bình luận
Thanks bác :)
Ngon
Thanks bác :)
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.
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.
Ý 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
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.