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.

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/AVvXsEh2U51A_fuJtyUoQVsEg5dGFq3ml5nDSkBg5f81vFt9jRjRSqmKB4ID9TWk0Q5CWjYNSXdmPMQkYnPa76N-D-jteHhYv2O5B7pLVcYZjOphp3y5mrCgx1Kfaz2lPAWIZnn7RPFPcsemD2o/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/AVvXsEhVpifdoXg1jYK9tkF2qHAz4wfJIHJnzPpbA7Bc9eSjnrho2Gd8fTTeXx2pUuwn6jkezm-rGUAAy_mIo2G5P5PHZOQcaCY0Z3-X5tQDuM0OHmDVI9mMHLX0CuS1mqoY8g3mUgpIs7y9fF4/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/AVvXsEi6a6fSYKOUe1L7cEhjWWOU14MK8A3pVEK3JudzVfX6Av4m-C9AxxNn6QrpGX7T507VKHIjdpz-PTq2bUpG700msbKtlTem7v_affC4X6jzBoHts0qi9wHHQh88wAhdlH3UwYacxiCWRvQ/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/AVvXsEhvBkjPHZa-1uJTl-JfcCRctXJ51ssYmmiyyKF-u-doGxZIUYYF-19Pmp_BRcDl3jiG475qaW9-Kg1hM2UmubprUWublPFGlfyIA3d4hT8i43q_54P2f0nbp_HL66cjvBHrgUOkbxBvf9M/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/AVvXsEjVQpohG7rGGlRY0oW8W1TJBqe5pD-R4x_U-go6ULaId2VEE2_k-GXuXDL3qKAXZ-85VZjD_oD3Nek3y1yOTFl59hPgwEc7P_pj5CrYVd4aYhhpLPXytECncotWaklGMeAS9WepflZkwRU/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/AVvXsEg3R82wLfOAB_KZUfOKYTQQy1UpM2rJp9jsc__W_crI7QcpEkxaXDk7x_jBGbFzNPrRm50RDTgzVoW__yJANlAzMUlOS5LvkGhJ-GubYfq5nmF3ydmrO-PUC9EMcdOidbJQHcj-ajuVP3M/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!

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