Hướng dẫn thêm Accordian Slider vào Blogger - Không sử dụng javascript

Đa số các Template Blogger hiện nay, phần slide được làm đẹp rất nhiều và cũng rất đơn giản. Nhưng cũng có một vài kiểu slide chuyên sử dụng js ( javascript) để xử lý nên việc dùng slide vào Blogger cũng thật sự ít đi, trừ những trang chuyên về tạp chí, làm đẹp hay bán hàng thì vẫn còn sử dụng. Vì thế, hôm nay - mình xin giới thiệu kiểu slide có tên là Accordian Slider , loại slide này xuất hiện đã lâu, vì thế hôm nay, mình chia sẻ đến các bạn, kiểu sử dụng chỉ có HTMLCSS, ngoài ra không có Javascript, nên các bạn yên tâm là có thể thoải mái sử dụng mà không làm giảm tốc độ tải trang của Blog.

Để đến với hướng dẫn, mời các bạn xem qua demo:



Chúng ta bắt đầu nhé.

1. Chèn đoạn code bên dưới vào sau thẻ div mà bạn muốn hiển thị, ở blog demo, mình chèn sau thẻ </header>
<div class="accordian">
    <ul>
        <li>
            <div class="image_title"> <a href="#">KungFu Panda</a> </div>
            <a href="#"> <img src="./img/3yiC6Yq.jpg" /> </a>
        </li>
        <li>
            <div class="image_title"> <a href="#">Toy Story 2</a> </div>
            <a href="#"> <img src="./img/40Ly3VB.jpg" /> </a>
        </li>
        <li>
            <div class="image_title"> <a href="#">Wall-E</a> </div>
            <a href="#"> <img src="./img/00kih8g.jpg" /> </a>
        </li>
        <li>
            <div class="image_title"> <a href="#">Up</a> </div>
            <a href="#"> <img src="./img/2rT2vdx.jpg" /> </a>
        </li>
        <li>
            <div class="image_title"> <a href="#">Cars 2</a> </div>
            <a href="#"> <img src="./img/8k3N3EL.jpg" /> </a>
        </li>
    </ul>
</div>
Thay đường dẫntitle vào các vùng chữ màu xanh nhé.

2. Tiếp tục chèn đoạn style bên dươi vào trước thẻ ]]></b:skin>
* {
    margin: 0;
    padding: 0;
}
body {
    background: #ccc;
    font-family: arial, verdana, tahoma;
}
.accordian {
    width: 805px;
    height: 320px;
    overflow: hidden;
    margin: 100px auto;
    box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -webkit-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
    -moz-box-shadow: 0 0 10px 1px rgba(0, 0, 0, 0.35);
}
.accordian ul {
    width: 2000px;
}
.accordian li {
    position: relative;
    display: block;
    width: 160px;
    float: left;
    border-left: 1px solid #888;
    box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -webkit-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    -moz-box-shadow: 0 0 25px 10px rgba(0, 0, 0, 0.5);
    transition: all 0.5s;
    -webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
}
.accordian ul:hover li {
    width: 40px;
}
.accordian ul li:hover {
    width: 640px;
}
.accordian li img {
    display: block;
}
.image_title {
    background: rgba(0, 0, 0, 0.5);
    position: absolute;
    left: 0;
    bottom: 0;
    width: 640px;
}
.image_title a {
    display: block;
    color: #fff;
    text-decoration: none;
    padding: 20px;
    font-size: 16px;
}
Lưu mẫu và xem kết quả. Bạn cũng có thể download source về xem tại đây.

DIRECT LINK DOWNLOAD 1                       DIRECT LINK DOWNLOAD 2
Hướng dẫn thêm Accordian Slider vào Blogger - Không sử dụng javascript Hướng dẫn thêm Accordian Slider vào Blogger - Không sử dụng javascript Reviewed by Hoàng Quang on 5/24/2016 Rating: 5