Chào các bạn, tiếp nối cái sê ri Slide Chuyên Mục :))) thì hôm nay mình xin mang đến các bạn Style 3, cái này mình thấy deep try nên mang về thôi, Mong anh em thích nó.
Tạo Slide Chuyên Mục Tuyệt Đẹp (Style 3)
Hình Minh Họa

XEM DEMO

Các Bước Thực Hiện

Bước 1: Vào phần quản trị blog, chọn Chủ Đề, Chỉnh Sửa HTML
Bước 2: Chèn Đoạn code bên dưới vào nơi cần hiển thị (VD: chân trang hoặc đầu trang)
<style>
#nen-xem{background:#0e2f40;display: inline-block;margin: auto;width: 100%;padding: 30px 0;}
li.colx{width:32%;float:left;margin-right:2%;border-radius:3px;overflow:hidden;position:relative;display: inline-block;}
li.colx.col2{float:right;margin-right:0}
.more{position:absolute;width:100%;height:100%;text-align:center;background:rgba(14,47,64,0.05);transition:all .5s ease}
.xem{padding:5px 10px;display:inline-block;border:3px solid #fff;color:#fff;font-size:17px;top:50%;position:absolute;transform:translate(0%,-50%);background:#006e78;border-radius:3px;left:calc(50% - 45px);opacity:0;transition:all .5s ease}
.colx a:hover .more{background:rgba(14,47,64,0.5)}
.colx a:hover .xem{opacity:1}
</style>
<div id='nen-xem'>
<div class='row'>
<li class='colx col0'>
<a href='/search/label/Blogger?&max-results=12' title='Thủ Thuật Blogger'>
<img alt='Thủ Thuật Blogger' src='https://4.bp.blogspot.com/-EiszNWRWyis/WcQCPbEP3tI/AAAAAAAAAtQ/e1119HGBvXYupzsxgzo1S0iHye7fF1AWQCLcBGAs/s250/chuyenmuc-blogger.png' style='float: left;width:100%;'/>
<div class='more'>
<span class='xem'>Xem ngay</span>
</div>
</a>
</li>
<li class='colx col1'>
<a href='/search/label/Facebook?&max-results=12' title='Thủ Thuật Facebook'>
<img alt='Thủ Thuật Facebook' src='https://2.bp.blogspot.com/-0ii7gea3eQA/WcQCPtptFZI/AAAAAAAAAtU/om6hydOcW5w9pfA4WKFRUn_T4omVH_KnQCLcBGAs/s250/chuyenmuc-facebook.png' style='float: left;width:100%;'/>
<div class='more'>
<span class='xem'>Xem ngay</span>
</div>
</a>
</li>
<li class='colx col2'>
<a href='/search/label/Windows?&max-results=12' title='Thủ Thuật Windows'>
<img alt='Thủ Thuật Windows' src='https://3.bp.blogspot.com/-dJ5STwi3CAI/WcQCPswEfOI/AAAAAAAAAtY/5rx4KXPfZ4ER4-cZkIED4PESpqDJvmTlwCLcBGAs/s250/chuyenmuc-windows.png' style='float: left;width:100%;'/>
<div class='more'>
<span class='xem'>Xem ngay</span>
</div>
</a>
</li>
</div>
</div>
Bước 3: Lưu Template và tận hưởng

Lời Kết

Ok, đơn giản vậy thôi. Kết bài thôi :))
Chúc các bạn thành công!
view-source: Bác Sĩ Windows
- - 25 bình luận
CHUYÊN MỤC

BÌNH LUẬN (25)

  1. Lại đem code người ta về share lại ?

    Trả lờiXóa
    Trả lời
    1. Nó có ghi nguồn mà bạn?

      Xóa
    2. Tường ăn cắp công sức người ta đi share lại xong ghi nguồn là xong à?
      Có coi người khác là gì không?

      Xóa
    3. Vâng, cái này không phải là của BSW nhé, khẳng định 1 câu là vậy luôn đó, cái này lúc đầu là của TSM Blogger trước nhé, ổng TSM Blogger với tui là bạn, tui có ý định viết bài này lâu rồi, không biết gì thì đừng có to mồm, vào nhắc người khác ? Hài.

      Xóa
    4. mấy thanh niên éo đọc bài viết ngta cứ lướt qua rồi cmt bậy bậy chửi này nọ khinh vcl

      Xóa
    5. Của Blogchiasethuthuat nghe hợp lí hơn :)

      Xóa
    6. Cái này ở mấy nước ngoài cũng có mấy cái ntn rồi, soure ở đâu thì ghi ở đó thôi =))

      Xóa
  2. Sao chèn dưới chân trang kêu lỗi :3

    Trả lờiXóa
    Trả lời
    1. :) thì chèn ngu nên lỗi

      Xóa
    2. đừng chèn dưới thẻ đóng body là được bạn =)

      Xóa
  3. Nhận xét này đã bị tác giả xóa.

    Trả lờiXóa
  4. Lỗi khi phân tích cú pháp XML, dòng 16, cột 44: The reference to entity "max-results" must end with the ';' delimiter
    đó dán code nó ghi lỗi này

    Trả lờiXóa
    Trả lời
    1. Bạn set admin mình xem nhé :
      tuananhle732@gmail.com

      Xóa
    2. hóng bác ra bài hướng dẫn thêm nhạc vào blog tự chạy mới :3

      Xóa
    3. Ý là bạn thêm Cường là quản trị viên trong mục cài đặt thông qua việc gửi lời mới đến email ý để bác ý xem hộ. Đơn giản hơn nữa thì những đoạn max-results đằng sau label bạn bỏ hết đi, chỉ giữ lại tên label thôi là k lỗi đâu.

      Xóa
    4. Đúng rồi :)) bạn vào phần cài đặt set cho mình lên quản trị viên hoặc là làm theo bạn PHÚ CƯỜNG BLOG nha.

      Xóa
    5. đã làm nha starcuongit đã mời làm tác giả rồi

      Xóa

Một số lưu ý khi bình luận

Mọi bình luận sai nội quy sẽ bị xóa mà không cần báo trước (xem nội quy)

Bấm Thông báo cho tôi bên dưới khung bình luận để nhận thông báo khi admin trả lời

Để bình luận một đoạn code, hãy mã hóa code trước nhé