Code Hiển Thị Icon Trên Ảnh Theo Labels Cho Blogspot

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

Ảnh Minh Họa

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

Bước 1 : chèn đoạn code bên dưới 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>

Nguồn : Starnit

Bài đăng Mới hơn Bài đăng Cũ hơn