[Blogger] Hiển Thị Icon Theo Nhãn Giống Star Lượng IT

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 1. Chè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