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

 Landing label theo kiểu METRO tuyệt đẹp cho blogspot.
Cái nào mà ko xài Js là thích à. Lúc trước lấy cái này bên Iris-Tips về xài nên xin bài về đăng luôn. Các bạn nên lấy về xài thử đi, về tuỳ biến lại hình ảnh mình nghĩ đẹp.
Tạo landing label theo kiểu METRO tuyệt đẹp cho 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ị.
<div class='intro-labels clearfix'>
<div class='label'>
<img alt="" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUhNVnpAE8GCixxLaG3iS7kkJZioFqMc6evcJgAyGaUU0MK7Yl1Ufgnp9-LGHhCBNImxGbokFYjlyA7D6Go7iEhWVQCgqCIo_9PuUoJ22FP-YWKbP72ra1_PbYoSSXis_WwrmEUiThcNw/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/AVvXsEiA0WOkhikkkgtBiucZs476prlwbkuRDQ5IjJq7l0OIoDukE_6eCOA4yF5l19n34JWVpdyqJwqo24G58VNI0xjCWaNRZDtERF9fIi6qFPB_XsOo06irMUB5U7JKgkh3dgx18wIkMgQfNdM/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/AVvXsEgRZf99Fy6HZq5tWUGvLNpP58QVEZu6Ci35OmFTpY9z_HQyndoVhNziYDD7uvU1Chk7lstcs9a7tF6sTHSnHjcQd1LD6_L7dZWKg4eNS2vmouOGp_cbnCgbmJjVPlJRz8wf94PpsL6E5q4/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/AVvXsEjp-pUmXmOwGOvBQVk00HiKfVG9zfiELId8Iarcosd-R74QZ3PPZe-cOmRRQsg-rZUfoJdunzmwHei5G2gepuwHCnbhxmRIv8gcdMa7DUozVK56jUfZ0uDjHQVYS9OTWLJQ4VoAUSaKmak/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/AVvXsEgOyTwn0kFE0P8WlyqUzr9uTOATtBIGVjoUnayid4Y45b73oQEtNJyntWILSvzzBs-D4upVUTUmFRaYrZrVhQ4njeyBiiRn4CZafG3_7eDLdWv0Z2iCGdUARYpQx756uMY4J_2q_XN2lhk/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/AVvXsEiYN833Ric7ZqCtt_eXtVsjuBZkdqrLjkJeAFl93iPqlv_RGjJLzCw5oh1_KwHrj6rOZry014yD7alpXkY6sXJtuk8Ib_ITT-LfZ_D3M06OISl_XFzkAbcE5TAoZdTHMMjr4FHr6RQ_EL8/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!

About the author

Duy
Có những thứ luôn quẩn quanh cuộc đời bạn và đôi lúc không có lời giải thích, liệu rằng đó có phải là duyên số?!

Đăng nhận xét