TẠO LABEL LANDING THEO KIỂU METRO TUYỆT ĐẸP CHO BLOGSPOT

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6SfnE1-8ncSl6QipFqrthOCvw3fHX-RGczvl4JCMaZFFIaWGio-wtn8JXFDegz_rWhVkeX8-C6e_VG-0LdFupxLIgU5NA3NumXMih0l_KwGhi_GEEnopzwEaDIUKww_Ij-pkrfKz-3r4/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOtLgmUfr9mTlT0ttrs1aS2EXsKVsRx-NiIcGmVzbOdipgEbq8vcvV0XJ3S1K8EsQRGCdcVOJ2NmraUWC80BHf_01mFt2dCOiXkiObVMtafGJv-M6uY6kjX19x1cRLTUA4ynSgMOqmIYQ/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEioEp-OBP-zwlfvAAxh6HEImFeNw3gplwRpvc7kvzbXhPQzBtMNFsslv6v6cbZN-m_c-uuYNNzvJ4iJ17oXdw7lGFziekLhPaaHakf0Xej6JazYOgBLdUayAYulzNyvCCenMIouUbamOqY/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjOM1N1mhvvXpRlsfQOllmjC3yXW0u2eJCZ7bKASqcDNC5_P2kNCp0H9ZP-2cQtGPEaJmBJq5FWPUwVoLKVoEm7JmjYwGALGMID_VXvGUWyDYRAKbwQgefB0eLB3iyHy2zP595Lm_U6hDU/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhqco-L0xLqERNIU0sosyrXf-wInmn88syQh0vNWb5gOwAYXDw-p3n0SNS4O7nAE1RMsgj4up6WPm-IGQiov_Vkq1gYFExmxGzvOhdcWsb231UUeMWeZIXNyEJmQ8mQW7fZAvA3nk7BHoo/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKM9EpKxkQPbKRQL46sDdNhMIKkT3qk9_y7JZ5tCsdu7cFotaLN-b8yH-GMnj-fmQ-g6qhqZYIwCjusQSB4g0tTEGk5yVxUpQJl_9b5kDmC9Pkvm79D3M_BE01rhV28hPYjMJw76K3sBU/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!