Slidebox css đẹp cho Blogger

Hôm nay mình xin giới thiệu với các bạn một mẫu slidebox có hiệu ứng đóng mở bằng hình ảnh rất đẹp. Nó cũng rất đa năng, có thể dùng làm khung tác giả hay để chứa nội dung trong bài viết.

#DEMO

Tôi là một Blogger nghiệp dư chuyên chia sẻ các thủ thuật blog!!!

#Thêm css

1. Đăng nhập blogger

2. > Mẫu > Chỉnh sửa HTML 

3. > Tìm thẻ ]]></b:skin> và thêm code dưới vào trên thẻ vừa tìm được.

.Slidebox{
float:center;
}
.cover {
position: relative;
width: 590px;
height: 282px;
margin: 20px auto;

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/AVvXsEh1vevD6OaEiccGequ5shiJxZn0XozlAhZ9tLzjCJsuruOsb4wX7RYfzejHR51IycZUtANGhUJlyqBAZGH1tmB_1ek0UPhx33I6r9PRmwY7cMfDnUH8sUeniAhoHDciFqC5RbyY0Mu4qR4z/s320/right+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.slide_in .right_gate {
background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsDTw4V0EAopKFEjlX2qvcm8oPq6VZdD87yMU5UEiTK6zCF97uwCseT0Jir8fZY06g2HHZraq4ZERv6WZ2EK76nQLQb9atRAOSWL9M_AlGvtfJEllCSbW4WkhY98eA9TFLrvysOYEmEsge/s1600/left+gate.png)#DBDCDE;
border:1px solid #F0F0F0;
}
.cover img {
margin-top: 15px;
}

Đoạn màu đỏ là link ảnh, nếu bạn muốn thay thế thì hãy sử dụng ảnh có chiều rộng là 303px và chiều cao là 302px.
Đoạn màu xanh là chiều cao và màu tím là chiều rộng phần khung nội dung.

#Sử dụng

• Khi đăng bài hoặc dùng cho trang (page)

Khi muốn thêm khung này vào bạn chỉ việc chuyển sang chế độ HTML và dán code dưới vào, thay đoạn màu đỏ cho phù hợp.

<div class="Slidebox">
<div class="cover slide_in">
Tôi là một Blogger nghiệp dư chuyên chia sẻ các thủ thuật blog!!!
<div class="left_gate">
</div>
<div class="right_gate">
</div>
</div>
</div>

• Sử dụng làm khung author đơn giản

Tìm thẻ <div class='post-footer'> ( chúng ta cần đoạn thứ 2 ) và dán code dưới vào dưới thẻ vừa tìm

<div class="Slidebox">
<div class="cover slide_in">
Tôi là một Blogger nghiệp dư chuyên chia sẻ các thủ thuật blog!!!
<div class="left_gate">
</div>
<div class="right_gate">
</div>
</div>
</div>

• Bạn có thể sử dụng cả hai cách trên cùng lúc