CSS Slide Box đẹp mắt cho website/blog

LIVE DEMO

Bài viết này mình sẽ chia sẻ một thủ thuật hay dành cho website/blog, đó là tạo một box thông tin dạng slide ẩn hiện khi rê chuột bằng CSS. Sau đây là các bước thực hiện đối với Blogger/Blogspot:

Bước 1: Tại trang quản trị blog, các bạn vào Bố cục, tạo một tiện ích HTML/Javascript.
Bước 2: Paste đoạn code sau vào phần nội dung:

<!--Slide Box by kjmagic.blogspot.com-->
<style type="text/css">
.kjslidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20px auto;
background-color: #f7f7f7;
z-index: 1;
padding: 10px;
-webkit-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
-mox-box-shadow: 0 2px 10px rgba(0,0,0,0.3);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
.left_gate{
position: absolute;
background: #DBDCDE;
bottom: 0; right: 50%;
left: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition:all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .left_gate{
right: 100%;
left: -50%;
}

.right_gate{
position: absolute;
background: #DBDCDE;
bottom: 0;
left: 50%;
right: 0;
top: 0;
border:1px solid #F0F0F0;
-webkit-transition: all 0.5s ease-out;
-moz-transition: all 0.5s ease-out;
-ms-transition: all 0.5s ease-out;
-o-transition: all 0.5s ease-out;
transition: all 0.5s ease-out;
}
.cover:hover .right_gate{
left: 100%;
right: -50%;
}
.slide_in {
overflow: hidden;
}
.slide_in .left_gate {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjxCexS0ryAyS6LWeZNsHcUmunkae7C1UxzvwuAyxIy80oW4CtiEu38QBDP3K_R-Fx69trQfdKtGPSU6oDTSt5aNLnMhsLsLGMPiaLcJ53K0cG0KUYCHbjrrAI4homscOyUVgdOcXeIATg/s320/right+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjUlagFnPQErZulN6X67jRIe8b0bofxA0xLlqvSbZlNFvm4y5cWogxFnP8oZy-hU9x19Pl1NQ1apzu8pKWMU6b8FB3le5v3eu5nlg2f18fC4WEnJ-kDDZFTX1JwT8d7N_t15jTOvpsksHw/s1600/left+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}
/* Slide Box :: kjmagic.blogspot.com */
</style>
<div class="kjslidebox">
<div class="cover slide_in">
<div class="left_gate">
</div>
<div class="right_gate">
</div>
Nội dung box của bạn
</div></div>
<!--/Slide Box by kjmagic.blogspot.com-->

- Trong đó những dòng in đậm là link ảnh của bạn.
- Dòng màu đỏ là nội dung/HTML box của bạn.

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