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ó.
XEM DEMO
![]() |
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>Bước 3: Lưu Template và tận hưởng
#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/AVvXsEhq37H7gSl5uyLaYZYNv1mE46eX4Ahkqabz1br46LHA5T0EXi4PLUWiv0NhwP0J4PPCpgcESSH7WEKU6qI96S2JKsHumATgdP_3iFMDUFb1ME3oG14vdKXSqKSguWqN8s33-Hz9ffdeUAlj/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/AVvXsEiO52bIPdjUuPmTfEMWtNeMHfo-gpUTYI8uFxtNvGl4vDI1JTeqC8DJ1myvTUhvesBqSmhl8ec8BBGVeLfSH45u1kbUDyRuyEQ4C6Z5uLUq1ahACMnkPn47ZDViVvLsJrKKDpOFZoRU56oH/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/AVvXsEh9KUGsQNyu3G2wM61y3UAbB99x_GipBNjRZoPNLYQ8SJCEwuiH59pzjQ25aTEaWMcEvlZKhuF73cqpUujmNLwUaK2RPFgl3ronpWBJqo0tlHg8bmINlTwXH2LNnNvzjq9DwP1PfpGfRGGC/s250/chuyenmuc-windows.png' style='float: left;width:100%;'/>
<div class='more'>
<span class='xem'>Xem ngay</span>
</div>
</a>
</li>
</div>
</div>
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!
No comments