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

Chào các bạn, trong bài trước mình có hướng dẩn các bạn tạo Slide Label khá là đẹp lấy từ bên BSW, trong hôm nay mình làm tiếp style 2, hiệu ứng trượt rất là ngầu luôn :))

DEMO

CÁC BƯỚC THỰC HIỆN

Bước 1: Chèn Đoạn Code bên dưới vào trước ]]></b:skin>

/* Chuyên mục home */
.chuyenmuc   { background: #fff;
    padding: 25px 0;
}
.chuyenmuc-home{
 width: 100%;
 max-width: 1200px;
 height: 250px;
 overflow: hidden;
 margin:auto;
}
.chuyenmuc-home ul{
 width: 100%;
 display: table;
 table-layout: fixed;
 margin: 0;
 padding: 0;
}
.chuyenmuc-home ul li{
 display: table-cell;
 vertical-align: bottom;
 position: relative;
 width: 16.666%;
 height: 250px;
 background-repeat: no-repeat;
 background-position: center center;
 transition: all 500ms ease;
}
.chuyenmuc-home ul li div{
 display: block;
 overflow: hidden;
 width: 100%;
}
.chuyenmuc-home ul li div a{
 display: block;
 height: 250px;
 width: 100%;
 position: relative;
 z-index: 3;
 vertical-align: bottom:
 padding: 15px 20px;
 box-sizing: border-box;
 color: #fff;
 text-decoration: none;
 transition: all 200ms ease;
}
.chuyenmuc-home ul li div a *{
 opacity: 0;
 margin: 0;
 width: 100%;
 text-overflow: ellipsis;
 position: relative;
 z-index: 5;
 white-space: nowrap;
 overflow: hidden;
 -webkit-transform: translateX(-20px);
 transform: translateX(-20px);
 -webkit-transition: all 400ms ease;
 transition: all 400ms ease;
}
.chuyenmuc-home ul li div a h2{
 text-overflow: clip;
 font-size: 24px;
 text-transform: uppercase;
 margin-bottom: 2px;
 top: 160px;
 margin-left: 20px;
}
.chuyenmuc-home ul li div a p{
 top: 160px;
 font-size: 16px;
 margin-left: 20px;
}
.chuyenmuc-home ul li:nth-child(1){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEgmAZi-FHc0itHU_QeiQG-ehn-40mJHGq2VNWquM70wHAAMY67Fnl-PLHwVXqEf7-ST_Ld9hBwJF6rq1NXaT8NoKkqL2Zr7C9aw_WHNl1PjTVYpeIye1g0g42H_iYFm=s0-d");
}
.chuyenmuc-home ul li:nth-child(2){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEg5dTsN_3N84Z_3_kOcwdrGW4vRGDNrC4FuUo40umUDvoYeKiEj_IzZGB2i8ZMckSWjE97KJIoTRZrcTPk9UaL7TJiOsMzXh8FOufaGy5bFWxTLPDru1aXzExq19Fqd=s0-d")
}
.chuyenmuc-home ul li:nth-child(3){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEh_Uu754RAaML-ZUREmKX5-n4OdvFYgLfqSn9ITGeiWfxpeXFHa-BSPpICfpfFgQEF9KPlz4i0I6N7FlHpcq_ZnE7AWS3_IbI0uLahnXVksCAJLu8Ra8PzXjvSbOIM0=s0-d");
}
.chuyenmuc-home ul li:nth-child(4){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEh3zyYWKiHvbc6TOl6fbNgpiLZPd7H31A4U43UnBNo2PABMbWP_Z1q95jIb4XQutGcrW-8hYhXVNVLlMDsEYlnS-kR0LUhTBCSbLXHZVfIeaQ1fv7QifDMdd1J1TGEs=s0-d");
}
.chuyenmuc-home ul li:nth-child(5){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEjy2JT1WIDc5_Jh9K2EJTBEfwWx94BdJma5lX-EgW3AKEohKhK7BaQ-chbkqRLB7GbkqEACcoQ9oGyTaYyA4aNP__LhU2ipCO_FSqLA9Hc5Ipg4h-3qnAbJv3tb3h6o=s0-d");
}
.chuyenmuc-home ul:hover li{
 width: 8%;
}
.chuyenmuc-home ul:hover li:hover{
 width: 40%;
}
.chuyenmuc-home ul:hover li:hover a{
 background: rgba(0, 0, 0, 0.4);
}
.chuyenmuc-home ul:hover li:hover a *{
 opacity: 1;
 -webkit-transform: translateX(0);
 transform: translateX(0);
}

Bước 2: Chèn Đoạn Code sau vào nơi bạn muốn hiển thị, nên để trên bài viết hoặc dưới menu

<div class="chuyenmuc">
<div class="chuyenmuc-home">
<ul>
<li>
<div>
<a href="/search/label/Blogger" onclick="document.getElementById('id01').style.display='block'" target="_blank">
<h2>Blogger</h2>
<p>Thủ thuật Blogger</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Facebook" onclick="document.getElementById('id02').style.display='block'" target="_blank">
<h2>Facebook</h2>
<p>Thủ thuật Facebook</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Photoshop" onclick="document.getElementById('id03').style.display='block'" target="_blank">
<h2>Photoshop</h2>
<p>Thủ thuật Photoshop</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Youtube" onclick="document.getElementById('id04').style.display='block'" target="_blank">
<h2>Youtube</h2>
<p>Thủ thuật Youtube</p>
</a>
</div>
</li>
<li>
<div>
<a href="/search/label/Windows" onclick="document.getElementById('id05').style.display='block'" target="_blank">
<h2>Windows</h2>
<p>Thủ thuật Windows</p>
</a>
</div>
</li>
</ul>
</div>
</div>

Bước 3: Lưu Template Và Tận Hưởng

LỜI KẾT

Như vậy là mình vừa Hướng dẩn cho các bạn xong cách tạo slide chuyên mục tuyệt đẹp (style 2), các bạn hãy chỉnh những từ mình in đậm trong code lại thành đúng đường link trỏ về các chuyên mục của blog các bạn nhé, nếu có gì thắc mắc hãy để lại comment bên dưới, mình sẽ trả lời nhanh nhất có thể cho các bạn!

Chúc các bạn thành công!

view-source: khophimplus.net