Nhận xét mới

Đặt quảng cáo

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
Share:

Add Comment

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