Hiển Thị Icon Theo Nhãn Giống Star Nguyễn-IT Blog

Xin chào các bạn, hôm nay mình muốn chia sẽ cho các bạn nào chơi blog :v về cách hiển thị icon theo nhãn.
Cái này hiện tại cũng khá được các bạn yêu thích.
Hình Minh Họa
Cách Thực Hiện :


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

/* Icon Theo Search Label */
.post-labelx{font-size: 20px;
width: 40px;
height: 40px;
line-height: 38px;
text-align: center;
position: absolute;
top: 6px;
right: 6px;
box-sizing: border-box;
color: #fff;
z-index: 2;
border: 2px 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: #8E44AD;}
.post-labelx.psd{background-color: #787878;}

Bước 2. Đặt đoạn code này vào nơi muốn hiển thị ,blog mình thì sau thẻ <div class='entry-image'>

<b:if cond='data:post.labels any (l =&gt; l.name == &quot;PSD&quot;)'><span class='post-labelx anh-bia'><i class='fa fa-folder-open'/></span></b:if>
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;Template Blogger&quot;)'><span class='post-labelx templates'><i class='fa fa-bell'/></span></b:if>
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;Facebook&quot;)'><span class='post-labelx facebook'><i class='fa fa-facebook'/></span></b:if>
<b:if cond='data:post.labels any (l =&gt; l.name == &quot;Blogger&quot;)'><span class='post-labelx blogger'><i class='fa fa-rss'/></span></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

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é!
Via: Huy Hoàng IT
Tác giả: Nguyễn Đạt

Tôi là Đạt. Say hello to you!

  • Không được backlink và nói tục. Hãy là một độc giả có ý thức.

    7 nhận xét:

    1. nguồn : Nghĩa Rồng Blog nhé bạn :( bài này mình viết mà

      Trả lờiXóa
      Trả lời
      1. Xin lỗi bạn -.- do mình leech bài này bên Huy Hoàng IT -_-

        Xóa
    2. Trả lời
      1. . share đii :3 edit lại gmail thihuy1604@gmail.com :v

        Xóa

    Nhận bài viết mới