Bách Hiểu Sinh

Chào các bạn, tiếp nối Series Slide Chuyên Mục cho Blogspot, thì hôm nay mình xin mang đến cho 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 Cho Blogspot (Style 3)

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/AVvXsEjW7O2m8-4m3rc6HPzOSz9VQA9QWFSUJEqvWYrfrc0EtEkLqlHpq0tN72fMn6_d5c5yF7l9yzd7MnOEVeIXl2kA6vtxjWr35ifKvOZA0Vxcw0jspWIp6VimaXe_GdSuiKM8loDy_j5txY9q/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/AVvXsEhly-DoTnu-r1tRV_roVOmqwURyNN01YACGWhJ8jLjM0FmeTFOJRbTIAaBP6TVupqvaSGz7AgIWu9TvnBxO64rqB0lPNJTEuMfxMK-4RKt5ju70KpPjphQMmZ9bLLEnnD9-fWGhXw_PFJBO/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/AVvXsEgnZeFcr4jBNFGoNJuWuI6dpS3PRGpNThyphenhyphen9hhmNWUG_ZiQz0hP7IG6QY-FfFmYIJnWmDajy08ZT3QSXRG7W6bEEuUAXupFMVO4OCiPL0nG7TxnXYNW9jazuAA_TEv0eqRD9-JsVT73-NxGr/s250/chuyenmuc-windows.png' style='float: left;width:100%;'/>
<div class='more'>
<span class='xem'>Xem ngay</span>
</div>
</a>
</li>
</div>
</div>