Tiếp theo loạt bài về các slider không dùng javarscripts. Hôm nay namkna sẽ giới thiệu đến cho các bạn một slider trình diễn hảnh cực đẹp của DTE, và điều đặc biệt là nó cấu tạo hoàn toàn từ CSS3, do vậy bạn không phải lo nó làm chậm blog của bạn. Slider này được tích hợp thêm hiệu ứng xoay tròn khi chuyển tiếp giữa 2 bức ảnh giúp blog của ban thêm sinh động hơn.
Bạn có thể xem ảnh minh họa.

VIEW DEMO

¤ Thêm slider CSS3 ves 3 này vào blog.

1- Đăng nhập vào blog
2- Vào Mẫu (template) => Chỉnh sửa HTML (Edit HTML).
3- Thêm đoạn mã CSS3 bên dưới vào trước dòng ]]></b:skin> .
/*
 * Pure CSS3 Slideshow Without Page Jump by Taufik Nurrohman
 * 26 April 2012
 * http://namkna.blogspot.com/2013/08/css3-slider-trinh-dien-dep-cho-blogger.html
 */

/* General */
#css3-slider {
  margin:30px auto;
  padding:0px 0px;
  width:448px;
  height:286px;
  position:relative;
}

#css3-slider li {
  list-style:none;
  margin:0px 0px;
  padding:0px 0px;
}

/* Navigation */
#css3-slider li input + label {
  position:absolute;
  bottom:5px;
  left:10px;
  z-index:999;
  font:bold 11px/16px Arial,Sans-Serif;
  background-color:black;
  color:white;
  padding:0px 0px;
  width:16px;
  text-align:center;
  cursor:pointer;
}

#css3-slider li:nth-child(2) label {left:28px;}
#css3-slider li:nth-child(3) label {left:46px;}
#css3-slider li:nth-child(4) label {left:64px;}
#css3-slider li:nth-child(5) label {left:82px;}

/* Images */
#css3-slider li img {
  border:none;
  outline:none;
  position:absolute;
  top:50%;
  left:50%;
  width:0px;
  height:0px;
  visibility:hidden;
  opacity:0;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
  -webkit-transform:rotate(0deg) scale(0);
  -moz-transform:rotate(0deg) scale(0);
  -ms-transform:rotate(0deg) scale(0);
  -o-transform:rotate(0deg) scale(0);
  transform:rotate(0deg) scale(0);
}

/* Captions */
#css3-slider a {
  text-decoration:none !important;
}

#css3-slider li a span {
  display:block;
  position:absolute;
  right:0px;
  bottom:0px;
  left:0px;
  background-color:rgba(0,0,0,0.8);
  font:normal 11px/26px Arial,Sans-Serif;
  color:white;
  padding:0px 10px;
  text-align:right;
  opacity:0;
  viibility:hidden;
  -webkit-transition:all 2s ease-in-out;
  -moz-transition:all 2s ease-in-out;
  -ms-transition:all 2s ease-in-out;
  -o-transition:all 2s ease-in-out;
  transition:all 2s ease-in-out;
}

/* Active navigation */
#css3-slider li input:checked + label {
  background-color:#39f;
  color:white;
}

/* Show the image with transition */
#css3-slider li input:checked ~ img,
#css3-slider li input:checked ~ a img {
  top:0%;
  left:0%;
  width:448px;
  height:286px;
  visibility:visible;
  -webkit-transform:rotate(720deg) scale(1);
  -moz-transform:rotate(720deg) scale(1);
  -ms-transform:rotate(720deg) scale(1);
  -o-transform:rotate(720deg) scale(1);
  transform:rotate(720deg) scale(1);
  opacity:1;
  z-index:99;
}

/* Show the caption with fade effect */
#css3-slider li input:checked ~ a span {
  opacity:1;
  z-index:100;
}

/* Hide the radio */
#css3-slider input {
  display:none;
}
» Tùy chỉnh:
  • width:448px; là chiều rộng của ảnh trong slider có 2 lần thay đổi.
  • height:286px; là chiều cao của ảnh trong slider có 2 lần thay đổi.
4- Lưu mẫu lại và tiến hành bước tiếp theo.

5- Vào Bố cục (layout). => Tạo một widget HTML/Javascripts và dán code vào.  
<ul id='css3-slider'>
    <li>
        <input type='radio' id='s1' name='num' checked='true' />
        <label for='s1'>1</label>
        <a href='#'>
            <img src='Link ảnh 1' />
            <span>Why do you put the egg yolks on your eyes?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s2' name='num' />
        <label for='s2'>2</label>
        <a href='#'>
            <img src='Link ảnh 2' />
            <span>How can you look ahead if your eyes are on the side?</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s3' name='num' />
        <label for='s3'>3</label>
        <a href='#'>
            <img src='Link ảnh 3' />
            <span>Keep praying to God</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s4' name='num' />
        <label for='s4'>4</label>
        <a href='#'>
            <img src='Link ảnh 4' />
            <span>Stay relaxed</span>
        </a>
    </li>
    <li>
        <input type='radio' id='s5' name='num' />
        <label for='s5'>5</label>
        <a href='#'>
            <img src='Link ảnh 5' />
            <span>And you will forever be relaxed</span>
        </a>
    </li>
</ul>
» Tùy chỉnh: 
  • Thay Link ảnh 1,2,3,4,5 thành link ảnh của bạn lưu ý các link ảnh phải có độ rộng đúng với những thiết đặt width và height ở bước 3. Trong ví dụ này thì chiều rộng của ảnh 448px là và chiều cao của ảnh là 286px.
  • Thay các dấu thăng màu đỏ (#) thành liên kết tới các blog hoặc bài viết tương ứng với từng bức ảnh.
  • Thay các phần màu xanh nhạt thành tiêu đề hoặc mô tả của các bức ảnh tương ứng (Không nên viết quá dài sẽ không đẹp.
  • Các số màu vàng 1, 2, 3, 4, 5 sẽ là phần số hiển thị mà khi bạn bấm chuột vào đó sẽ tạo ra hiệu ứng chuyển tiếp giữa 2 ảnh liền kề nhau.
  • Bạn có thể thêm nhiều ảnh khác bằng cách dán code bên dưới vào trước thẻ đóng </ul>.
    <li>
<input type='radio' id='sn' name='num' />
   <label for='sn'>n</label>
    <a href='#'>
      <img src='Link ảnh n' />
       <span>And you will forever be relaxed</span>
    </a>
</li>
    Và khai báo thêm phần CSS nữa nha.ví dụ:
    #css3-slider li:nth-child(6) label {left:100px;}
#css3-slider li:nth-child(7) label {left:118px;}
#css3-slider li:nth-child(8) label {left:136px;}
#css3-slider li:nth-child(9) label {left:154px;}
6- Lưu lại và xem kết quả nha.