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

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

Huu Trung Net / lúc December 30, 2017 ngày Saturday, December 30, 2017 / 0 bình luận

Chia sẻ

Chọn hình thức muốn chia sẻ:
• Copy liên kết
• Facebook
• Google +
• Email

Tham gia nhóm Phú Cường Blog để cùng trao đổi, học hỏi và nhận nhiều bài viết hay, hữu ích nhé!

 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/AVvXsEjXNFx46vD-3IRVLkJbVb5uOpjxpleJ4vhiYQf_RGopgcgut9B3EfXBCZM55-MzQA0cKIowODMJYVMgBRfPP09m3VkYFzbnKRRUxFUuG4YSxY-blkE24St8ovlusd1A6QGfj5N3Z9SkO7c/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/AVvXsEj_g_pJIp7MIppSBNIN3LCOakkJS4Dkzg3k0xwys5vQXipZFbQUqsSiTgkZ1sxC2axdSlHESi4eTJeteyS_HCOywOm3aWDefaI1YP-b0F-14BAE4G2haVhffP5KLM5m266U9HasPISO0jk/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/AVvXsEhgMGpzJmO85eJ0tENUtrDJdhcaUu95lMtGs36sMFZt8cke78GbIZxE-QWLNJJXbY4CRgnMKhYA7ttBCEVMVkLAwkpNzp3doJ5TDH7K4NtD1gxK7y6JeKViyHsFKat8RU1ISQw4wlpUYjo/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/AVvXsEiJOjWXpsXSCF9bf7nR5EM1o1AxyC4Vogp3O30OtheQR9gAaYWRD1hebKE9ktyNkibb3y-9DaXZDZlemFPTX7ll6zML1jAWYDIv2MKWYTJTU6c0rPksZ98_4YGfKhuLyH1gZOOnAbkq6e4/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/AVvXsEir1MUu16PFPZwRu2lXLsRIL-cYqI1fTBFcUWhlYyxjIDcNRbAwc7Tqf8lIJHRNtGrXKq2BISzzHfRxFSrhqVyjU1wc9sNknvn3CECENXwzZxM5aCnV_aSwA5dcmXDC42_2rrwpACOIZt4/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/AVvXsEiXiUOWX494hq_Ew-W3Vex2UmX5mjcrjFKg_vP32VTHeKhTOtw9SQiwxTpq9jFLEFfyQ0EDL43lSHPWDSjkaX94el1wcQ5JcjzAzvm83b8GfXfl62z6q1aJJtScdWSHXBj3Vek8CZg6oGg/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!