[Blogeer] Cách làm icon trên thumbnail theo labels

- Chào các bạn, hôm nay mình chán quá nên mình share cho các bạn nào chơi blog :v về cách hiển thị icon theo nhãn, giống mình.
Cái này cũng khá được các bạn yêu thích.

Cách làm icon trên thumbnail theo labels

CÁC BƯỚC THỰC HIỆN

Bước 1. Chèn CSS này trước thẻ ]]></b:skin>

/* Icon Theo Search Label */ .post - labelx {
    font - size: 20 px;
    width: 40 px;
    height: 40 px;
    line - height: 38 px;
    text - align: center;
    position: absolute;
    top: 6 px;
    right: 6 px;
    box - sizing: border - box;
    color: #fff;
    z - index: 2;
    border: 2 px solid# fff;
    border - radius: 100 %
  }.post - labelx.anh - bia, .post - labelx.windows {
    background - color: #4a9b6c;}.post-labelx.blogger{background-color: # FF8000;
  }.post - labelx.facebook {
    background - color: #4267b2;}.post-labelx.templates{background-color: # 8E44 AD;
  }.post - labelx.psd {
    background - color: #787878;}

Bước 2. Đặt đoạn code này dưới thẻ <div class='entry-image'>

<b:if cond='data:blog.searchLabel == &quot;Blogspot Theme&quot;'>
<b:if cond='data:post.labels'>
<b:loop values='data:post.labels' var='label'>
<b:if cond='data:label.name == &quot;Free Theme&quot;'><span class='free_theme' /> </b:if>
<b:if cond='data:label.name == &quot;Premium Theme&quot;'><span class='pre_theme' /> </b:if>
</b:loop>
</b:if>
</b:if>
<b:if cond='data:post.thumbnailUrl'>
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;THỦ THUẬT BLOGGER&quot;)'> <a href='/search/label/THỦ THUẬT BLOGGER'><span class='post-labelx blogger'><i class='fa fa-rss'/></span></a> </b:if>
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;Thủ Thuật FB&quot;)'> <a href='/search/label/Thủ Thuật FB'><span class='post-labelx facebook'><i class='fa fa-facebook'/></span></a> </b:if>
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;PSD Ảnh Bìa&quot;)'> <a href='/search/label/Marketing'><span class='post-labelx marketing'><i class='fa fa-bell'/></span></a> </b:if>
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;Ảnh Bìa Chất&quot;)'> <a href='/search/label/Ảnh Bìa Chất'><span class='post-labelx anh-bia'><i class='fa fa-puzzle-piece'/></span></a> </b:if>

Bước 3. Chỉnh sửa một số thông tin lại cho phù hợp ở chỗ in màu thành tên nhãn của blog các bạn nhé!!!

LỜI KẾT!!!

- Ok với 3 bước đơn giản chỉ copy và paste :v bạn đã có cho mình icon trên thumbnail  rồi. Chúc bạn thành công, nếu thực hiện không được thì hãy bình luận xuống dưới bài viết để mình hỗ trợ và giúp đỡ nhé!

46 comments:

  1. . làm theo rr mà đc gì đau

    ReplyDelete
  2. . Blog lổi rr kìa ông :v

    ReplyDelete
  3. . Ghé thăm http://www.vanhuyy-it.tk/

    ReplyDelete
  4. bác ghé thăm <3
    http://www.chanhducit.tk/

    ReplyDelete
  5. làm cho tui cái khung cmt như ông vs

    ReplyDelete
  6. thay bước 2 hả bác kk hay

    ReplyDelete
  7. đặt liên kết nha
    http://www.hungstar.tk
    title: Hưng Star - IT
    đã đặt nhé

    ReplyDelete
  8. s nay bác hoàng ít ra bài mới nhỉ
    sửa lại liên kết thành www.ngoctinhit.tk hộ

    ReplyDelete
    Replies
    1. Do tui và bác Hoàng đang hoàn thành lại template này:
      http://demo-rip-template.blogspot.com/

      Delete
  9. Bác Hoàng rep mail tui với

    ReplyDelete
  10. Liên Kết đii a ơi hihi
    Tên : Bảo Trang Blog
    Url : https://baotrangblogseo.blogspot.com/

    ReplyDelete
    Replies
    1. :v cố gắng phát triển thêm nha em :3

      Delete
  11. Thay link phần liên kết hộ tuii nha bác :D www.thanhphongit.tk

    ReplyDelete
  12. Ước được vị trí cao hơn tí trong khu liên kết :( :v

    ReplyDelete
  13. bài này em đang cần hổm giờ. Nếu được mời bác ghé qua blog của em dạo chơi. quocbaoblogit.blogspot.com. Mong được mọi người ủng hộ

    ReplyDelete
  14. bài này lúc trc huy hoàng viết phải k :v chứ an đâu pro như này

    ReplyDelete