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 1:34:00 PM Rating: 5

6 comments:

  1. Tưởng nghỉ blog lâu rồi cơ mà nhỉ :D

    ReplyDelete
    Replies
    1. Em nghỉ lâu rồi bác, giờ online đi chém gió các kiểu thôi :D

      P/s: Blog vào hay bị văng ra thế :v

      Delete
    2. Bị chặn, phải có dns hoặc vpn mới vô đc :(

      Delete
    3. Vất vả thế bác :3

      Delete
  2. Cảm ơn những thông tin bổ ích của bạn, rất mong bạn tiếp tục chia sẻ thông tin đến bạn đọc

    Trân trọng. viec lam dong nai

    ReplyDelete
    Replies
    1. Cảm ơn bạn đã ghé thăm Blog. Chúc bạn 1 ngày làm việc vui vẻ và thành công :D

      Delete

- Bạn có thể nhận xét bằng Bất kì tài khoản nào mà bạn muốn.
- Khi viết nhận xét, bạn vui lòng gõ Tiếng Việt có dấu.
- Bạn có thể thêm biểu tượng cảm xúc như trên Facebook.

Powered by Blogger.