T?O SLIDE CHUY�N M?C TUY?T �?P (STYLE 2) - Admin �?c Blog ??

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/AVvXsEiKOPRd_KhtoF7VjW5j4zOImylyd_PLdiz0SSz_TXsnW0rNX-yYYjdD4z3Ipa-8RSkgs0suqmHWykOYpfJxuGwQW6a1GGnTvndgIsdwyTHkvTDFn3WcnmECoAwKew2r=s0-d");
}
.chuyenmuc-home ul li:nth-child(2){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEjlZYh0D3lyz83OKHE4z4OPE77yJVQfjAxVlG3RC7F-xZKz7D-5EZI7v9qzyFuNF3gvnC9kRysrYtmVMRT3RYF9UUJQXzMfT26JU55nNA5CBM_-SzEPM4D5ty0rhVmL=s0-d")
}
.chuyenmuc-home ul li:nth-child(3){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEhimk8BP3bu4UmtwoX9zPqeOqopb0jNFhmPAdBcaJyvHolTg3wbUo-ba7JokXLStn9kJOui1S5Y1lYj7zqn2jx8Mx1GAR9FtKlb-G5K9J6yMFr9Vq8kybvhdM6zIQsf=s0-d");
}
.chuyenmuc-home ul li:nth-child(4){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEilAmZTuEFtvi3jB3OatN49ZWUbM8Y0mL5oyFsX7fzNp6m3Ki0FlXYnW-nx6hxPLr9kqpfvUrmn6YF9UMsME0CW1lkv8F-5C8tHgxfA3xG-pKG-iDyYod0L13Kc8sP6=s0-d");
}
.chuyenmuc-home ul li:nth-child(5){
 background-image: url("https://blogger.googleusercontent.com/img/proxy/AVvXsEg7TWh4QbHPiZyrBswsXuQ04qyCr9ACidKAKGBRuIcOPppGWiYV6rBC0tkJr1C7N-VBWqFYZkGKJqsQ7zah5SVi0x1klsHEY_mTpzkThdiMTbfNKdIyU8ow3-WGPtqA=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