Tạo Slide Chuyên Mục Tuyệt Đẹp (Style 3)

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ó.

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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilxjQQfRjVMp0TCP0fvOXCeDy-HTXQGpOE6H4J3C07zi_di67bgd3XXp0gy29eBpqpRjSpAufC6Ew0urW2UwVjA8-VtjDCycixKnUw3D9YfmYzbkUVdrWpjHZCdPWv9xtGL7qBvlMM0RCy/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhVRbWsud3M-yqM7qkxuSNc8ynpNpV_EfniBU3QhyRKVpbLp2-9l43bggYvAvMW2pL094_i8HS9xhgPd6t-tRXEUc9mh7pC94uskkQX9pntGeQ0N7Ui7mMLSstIybXO7cHsmfwffoFyBujB/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://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEicCb6wCDYI49SKhE8Rvj3_m3zAd1y7WUKWcrpc6fYNek4yhIU-Vjwv0mzlxrvT4zZtyBKKMLSgDakHuf8yFiCq-4kiIic8_0zM9BgDqtvN2Wq8d8r6hkPUesCpXxmv0V52r4-CzcVpUyjv/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