Tạo Danh sách các chủ đề liên quan phong cách Metro cho Blogger

Create A Metro Style Label List For Blogger

Hôm nay Iris Tips sẽ chia sẻ cho các bạn thủ thuật tạo một danh sách các chủ đề hoặc bài viết liên quan quan phong cách Metro. Bạn có thể dùng widget này để quảng cáo các chủ đề hoặc bài viết trên website của bạn. Widget dùng các hiệu ứng về màu sắc cộng với hình ảnh trông khá bắt mắt chắc chắn sẽ không làm bạn thất vọng. Đặc biệt widget này được thực hiện hoàn toàn bằng CSS nên sẽ không ảnh hưởng đến tốc độ tải trang trên website bạn.

Cách thực hiện

1Vào Mẫu >> Chỉnh sửa HTML và dán đoạn CSS vào trước thẻ ]]></b:skin>

.intro-labels{padding:1em;margin:0 auto;}
.intro-labels .label img:hover{opacity:0.7}
.intro-labels .label img{width:230px;height:150px;margin:0 10px 10px 0}
.intro-labels .label{position:relative;float:left;width:230px;height:151px;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}

2Dán đoạn HTML bên dưới vào vị trí mà bạn muốn hiển thị Widget.

<!--Metro Label List by iris-tips.blogspot.com-->
<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='http://iris-tips.blogspot.com/' style='background-color: rgba(108,203,103,.9);'>iris-tips.blogspot.com</a>
</div>
<div class='label'>
<img alt="" src="https://4.bp.blogspot.com/-rqqqFPIK9CI/UYzJHfkVJZI/AAAAAAAABIw/LXU4cbyg8R8/s320/article1.png">
<a href='http://iris-tips.blogspot.com/search/label/Blogger%20Tips?&max-results=6' style='background-color: rgba(100,132,203,.9);'>Thủ thuật Blogger</a>
</div>
<div class='label'>
<img alt="" src="https://1.bp.blogspot.com/-szUOuOO-sIs/UYzJVjB1i-I/AAAAAAAABI4/wYPzgLt6nDU/s320/article2.png">
<a href='http://iris-tips.blogspot.com/search/label/CSS?&max-results=6' style='background-color: rgba(107,190,181,.9);'>Thiết kế web</a>
</div>
<div class='label'>
<img alt="" src="https://4.bp.blogspot.com/-x4jcGv2HOYU/UYzJelggoNI/AAAAAAAABJA/KHMHi5O6GI4/s320/article3.png">
<a href='http://iris-tips.blogspot.com/search/label/SEO?&max-results=6' style='background-color: rgba(190,68,42,.9);'>SEO</a>
</div>
<div class='label'>
<img alt="" src="https://3.bp.blogspot.com/-4FNjv8FHv_k/UYzKOqxeQlI/AAAAAAAABJI/NhwZiFYtWO8/s1600/item5.png">
<a href='http://iris-tips.blogspot.com/search/label/Template?&max-results=6' style='background-color: rgba(214,199,30,.9);'>Giao diện</a>
</div>
<div class='label'>
<img alt="" src="https://3.bp.blogspot.com/-cRxKonvtWcg/UYzK2eJYA5I/AAAAAAAABJQ/ryINvQjj33Q/s1600/item3.png">
<a href='http://iris-tips.blogspot.com/search/label/Widget?&max-results=6' style='background-color: rgba(253,167,90,.9);'>Tiện ích</a>
</div>
<div class='label'>
<img alt="" src="https://4.bp.blogspot.com/-x4jcGv2HOYU/UYzJelggoNI/AAAAAAAABJA/KHMHi5O6GI4/s320/article3.png">
<a href='http://iris-tips.blogspot.com/p/contact.html' style='background-color: rgba(167,176,183,.9);'>Liên hệ</a>
</div>
<div class='label'>
<img alt="" src="https://4.bp.blogspot.com/-rqqqFPIK9CI/UYzJHfkVJZI/AAAAAAAABIw/LXU4cbyg8R8/s320/article1.png">
<a href='http://iris-tips.blogspot.com/p/premium-services.html' style='background-color: rgba(171,71,188,.9);'>Dịch vụ</a>
</div>
</div>
<div class='clear'></div>

• DEMO

Nếu có bất kỳ vấn đề khó khăn hay câu hỏi gì, bạn đừng ngần ngại, hãy để lại bình luận ở form bên dưới nhé.
Chúc bạn thành công!

Created by Iris Tips

• Twitter
• Facebook
• Google+
• LinkedIn
• Pinterest

Iris Tips

Có thể bạn quan tâm