TẠO SLIDE CHUYÊN MỤC TUYỆT ĐẸP (STYLE 3)

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/AVvXsEiMX6YUODyg1OuUQb1rt6-U5vpBZLxNJpg9wYgIseWwu35Wln-6R4c6761Tax38BFguzMesiQXAIGb0YxZXLjORY6Hi9UK1YY_uk2goiLX_HeAYDxh4E8ttJYHgzzfZChyZT3TmU_Kz-ksm/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/AVvXsEhPQ_cNCospITnSx97v0SUIJ2Ve4uZyyi5cFQyhqPCyQFTQ8k96dEg7t06rr_DHjjo9H4Fo0vM6bq7ZdGJnV2KVLWJTYdC_vhvWV7Ef90QQDQQextxY_jdNwUp3X3ugbypgA8oPFSl1Cg6n/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/AVvXsEip6QzZbwpWkajj7wrlDYuAfZoIY6s-hoStheVeqaSZwha0XXyGppycJxZ0fsteiLpCmonf8Q5vvdgEuQs5tzDT-v86AV1yXfu8TdDPVMGy4YG6DU1rWxRoDdIzecXc7nN7owVvxAoFDUuF/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!