Hiển Thị Icon Theo Nhãn Giống Nghĩa Rồng Blog

Mình có ghé qua nhiều blog và thấy nhiều bạn cũng hỏi thêm icon theo nhãn như thế nào.Nay mình rảnh lên chia sẻ cho các bạn cách thêm icon theo nhãn giống blog mình đang sử dụng.Cái này cũng khá được các bạn yêu thích .

Bước 1. Tìm thẻ ]]></b:skin> và dán đoạn CSS này vào trước thẻ đó 

/* 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ì đặt sau thẻ <div class='block-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. Lưu lại chỉ đơn giản vậy thôi chúc các bạn thành công !