Hiển thị Label bằng hình ảnh đơn giản cho blogspot

Nói đến Label được coi là một thành phần vô cùng quan trọng trong Blogspot. Có rất nhiều cách để hiển thị label cho blogspot, và hôm nay mình xin giới thiệu đến các bạn một cách hiển thị label bằng hình ảnh đơn giản cho blogspot của các bạn.

Bước 1: Các bạn chèn đoạn css dưới lên trên thẻ ]]></b:skin>

/*Image Label*/
.image-labels {float:left}
.image-labels .label img:hover{opacity:0.7}
.image-labels .label img{width:217px;height:115px;}
.image-labels .label{float:left;position:relative;width:217px;height:115px;padding:0;margin:0;overflow:hidden}
.image-labels .label:nth-child(3n){margin-right:0}
.image-labels .label a{position:absolute;right:0px;bottom:0;padding:5px 10px;font-size:12px;line-height:20px;color:#fff}
.image-labels .label a:hover{text-decoration:underline}
.image-labels .clearfix{float:left;min-width:700px;margin-top:50px;}
.image-labels .clearfix a{color:#fff;text-decoration:none}

Bước 2: Các bạn chèn đoạn code hiển thị sau bất cứ chỗ nào bạn muốn nó hiển thị

<div class='image-labels clearfix'>
<div class='label'>
<img alt="" src="https://i.imgur.com/8EbY4nV.png" />
<a href='/search/label/Blogger' style='background-color: rgba(108,203,103,.9);'>Thủ Thuật Blogger</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/TJtzWeY.png" />
<a href='/search/label/TemplateBlogger' style='background-color: rgba(100,132,203,.9);'>Template Blogspot</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/mYRGZgd.png" />
<a href='/search/label/Youtube' style='background-color: rgba(190,68,42,.9);'>Youtube Tips</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/mSXeD1W.png" />
<a href='/search/label/SEOer' style='background-color: rgba(190,68,42,.9);'>SEO Blogger</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/5LxPCUi.png" />
<a href='/search/label/News' style='background-color: rgba(214,199,30,.9);'>Tin Tổng Hợp</a>
</div>
<div class='label'>
<img alt="" src="https://i.imgur.com/BF43zBO.png" />
<a href='/search/label/Girls' style='background-color: rgba(253,167,90,.9);'>Girl Sexy</a>
</div>
 </div>
<div class='clear'></div>

Các bạn nhớ tuỳ chỉnh lại CSS và Label theo nội dung và bố cục Blog mình nha.
Chúc các bạn thành công. Nếu thấy hữu ích hãy để lại một comment để ủng hộ mình nhé!
Theme blogspot chia sẻ bởi : Share123 Blogger Templates
Design Blog Hồng
Tham gia cộng đồng Blogspot Việt Nam Cộng đồng Blogspot Việt Nam