QC xuất hiện tất cả các trang


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://2.bp.blogspot.com/-S0aK8YBRU20/UYzIzLBILSI/AAAAAAAABIY/np2T4NYR9ng/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://4.bp.blogspot.com/-rqqqFPIK9CI/UYzJHfkVJZI/AAAAAAAABIw/LXU4cbyg8R8/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://1.bp.blogspot.com/-szUOuOO-sIs/UYzJVjB1i-I/AAAAAAAABI4/wYPzgLt6nDU/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://4.bp.blogspot.com/-x4jcGv2HOYU/UYzJelggoNI/AAAAAAAABJA/KHMHi5O6GI4/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://3.bp.blogspot.com/-4FNjv8FHv_k/UYzKOqxeQlI/AAAAAAAABJI/NhwZiFYtWO8/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://3.bp.blogspot.com/-cRxKonvtWcg/UYzK2eJYA5I/AAAAAAAABJQ/ryINvQjj33Q/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!

Hãy là người đẹp trai từ những câu nói.

  1. Thủ thuật này thì hay nhưng lại gây cho blog load chậm lại đấy :)

    Trả lờiXóa
    Trả lời
    1. Cái này đâu có ảnh hưởng gì đến tốc độ load đâu ông?

      Xóa
    2. có ông ạ, vì mấy bữa H có thử rồi tốc độ load chậm hẳn vì có thêm chút hình ảnh với js nữa nên nó sẽ làm giảm tốc độ load :)

      Xóa
    3. trời, ông thêm js nó mới load chậm, còn đây có js đâu :v

      Xóa
  2. Em nhớ cài này anh có up 1 lần rồi mà phải không anh :v

    Trả lờiXóa
    Trả lời
    1. đúng rồi, lâu rồi nên up lại :v

      Xóa
  3. Sao nhiều blog post bài này thế ??

    Trả lờiXóa
    Trả lời
    1. Cái này e dùng lúc mới xài TSM Blogger đc vài ngày :D Có lẽ là người xài đầu tiên vì lúc đó biết mỗi Iris Blog :3

      Xóa
    2. Đẹp trai post sao cũng đc mà e :v

      Xóa
  4. hướng dẫn làm thumnail post có viền sáng chạy chéo qua như Blog a đi

    Trả lờiXóa


Loading...