Tạo side Label ngang dạng Thumbnail cực đẹp (Style 2) cho Blogspot

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, trong hôm nay mình làm tiếp style 2, hiệu ứng trượt rất là ngầu luôn :))

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/AVvXsEhHPtJFciK_T96fQLrgBud4w-SAa_e-sbj84ggDfejxIjh9q0TLm3HVhH488O8YJljOarZJFlX6XhIJ0Y-RDUu6eUsW0lgRZISA4wilO7lFpAAJ3dAeXQy3EbBnIOEO=s0-d");
}
.chuyenmuc-home ul li:nth-child(2){
background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEgv1KT_d2-3hbtXOGmmFg2VUDVRp4Ctx1CkFIr0bPnmZEJ5MCfWcZiowdgNSIa0FJH_zSHfNN6iyM5-WOUPGrjt60e4e3J4Cb7_ZqGbCLnKYwMph5AKLWkegMbYG9ir=s0-d")
}
.chuyenmuc-home ul li:nth-child(3){
background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEjyEQhxltnewmSwWsEteKFOw75ByIE-_jrpJOD7XNfOfFoFqTJxUeVjBItVAs4qgNkCTTRc5lafe_bbndPjNiIx_npTt0wMLncJ1vHZsD5vS00wVJ59I3t5mN6otm33=s0-d");
}
.chuyenmuc-home ul li:nth-child(4){
background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEjQ0jfIj8uwU7EEVr4mDzE1qpIoY7TwPBv5dojyOctUigDHp9oa_bLRhe4wASO8fW3x7BwAV1GCIPRktG8laZZTKtXF2f9cZqsofOUJ8HeCOkquB45j0UeY3c6dpd6A=s0-d");
}
.chuyenmuc-home ul li:nth-child(5){
background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEhh7IeEah1AEmZQj3WTGM6ak3lATVPM80w5b6QOlJ4oKvU_6-QTiHKsPqwnLwzDYy2YPnhk9ZIFqLMR_037O_rR2Lcfa4MsSE0yLgkQvqP84im3iMEb1hhwjPj7Sdi3=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!

• Tweet
• Share
• Share
• Share
• Share

About Nguyễn Gia 2017

Bài viết sưu tầm từ nhiều nguồn trên mạng, hy vọng nó sang mang đến thông tin hữu ích cho bạn. Chúc các bạn vui vẽ ngày mới!

Related Post