Tạo landing label theo kiểu METRO tuyệt đẹp cho blogspot/blogger

Label landing metro blogspot/blogger

Các bạn thực hiện như sau
Bước 1: Ctrl + C đoạn code sau và Ctrl + V trên thẻ ]]></b:skin>
.intro-labels{padding-bottom:5px;margin-left:15px;}
.intro-labels .label img:hover{opacity:0.7}
.intro-labels .label img{width:260px;height:160px;margin:0 10px 10px 0}
.intro-labels .label{position:relative;float:left;width:260px;height:161px;padding:0;margin:5px;overflow:hidden}
.intro-labels .label:nth-child(3n){margin-right:0}
.intro-labels .label a{position:absolute;right:10px;bottom:0;padding:10px 15px;font-size:18px;line-height:24px;color:#fff}
.intro-labels .label a:hover{text-decoration:underline}
.intro-labels .clearfix{float:left;min-width:720px;margin-top:50px;margin-bottom:-10px}
.intro-labels .clearfix a{color:#fff;text-decoration:none}

Bước2: Dán đoạn code sau và nơi bạn muốn hiện thị (Ctrl + C và Ctrl + V như bước 1 nha tại mình khóa chuột phải rồi)
<div class='intro-labels clearfix'>
<div class='label'>
<img alt="" src="https://2.bp.blogspot.com/-S0aK8YBRU20/UYzIzLBILSI/AAAAAAAABIY/np2T4NYR9ng/s320/article1.png" />
<a href='https://niemstyle.blogspot.com/search/label/TH%E1%BB%A6%20THU%E1%BA%ACT%20BLOGGER?&max-results=7' style='background-color: rgba(108,203,103,.9);'>Thủ Thuật Blogger</a>
</div>
<div class='label'>
<img alt="" src="https://4.bp.blogspot.com/-rqqqFPIK9CI/UYzJHfkVJZI/AAAAAAAABIw/LXU4cbyg8R8/s320/article1.png" />
<a href='https://niemstyle.blogspot.com/search/label/TEMPLATE%20BLOGSPOT?&max-results=7' style='background-color: rgba(100,132,203,.9);'>Template Blogspot</a>
</div>
<div class='label'>
<img alt="" src="https://1.bp.blogspot.com/-szUOuOO-sIs/UYzJVjB1i-I/AAAAAAAABI4/wYPzgLt6nDU/s320/article2.png" />
<a href='https://niemstyle.blogspot.com/search/label/WINDOWS?&max-results=7' style='background-color: rgba(107,190,181,.9);'>Thủ Thuật Windows</a>
</div>
<div class='label'>
<img alt="" src="https://4.bp.blogspot.com/-x4jcGv2HOYU/UYzJelggoNI/AAAAAAAABJA/KHMHi5O6GI4/s320/article3.png" />
<a href='https://niemstyle.blogspot.com/search/label/SEO%20BLOGGER?&max-results=7' style='background-color: rgba(190,68,42,.9);'>SEO Blogger</a>
</div>
<div class='label'>
<img alt="" src="https://3.bp.blogspot.com/-4FNjv8FHv_k/UYzKOqxeQlI/AAAAAAAABJI/NhwZiFYtWO8/s1600/item5.png" />
<a href='https://niemstyle.blogspot.com/search/label/PSD%20T%E1%BB%94NG%20H%E1%BB%A2P?&max-results=7' style='background-color: rgba(214,199,30,.9);'>PSD Tổng Hợp</a>
</div>
<div class='label'>
<img alt="" src="https://3.bp.blogspot.com/-cRxKonvtWcg/UYzK2eJYA5I/AAAAAAAABJQ/ryINvQjj33Q/s1600/item3.png" />
<a href='https://niemstyle.blogspot.com/search/label/TIN%20T%E1%BB%94NG%20H%E1%BB%A2P?&max-results=7' style='background-color: rgba(253,167,90,.9);'>Tin Tổng Hợp</a>
</div>
 </div>
<div class='clear'></div>
Các bạn có thể tùy chỉnh CSS hoặc thêm bớt Label ở code hiện thị theo ý thích.
Chúc các bạn thành công!

Hãy là người đẹp trai từ những câu nói.