Car Reviews

Auto Show

Sự kiệnThông tinChi tiết
Vietnam Motor Show 20165/10 đến 9/10 tại I.C.E, 91 Trần Hưng Đạo, Hà Nội Tham gia
Vietnam International Motor Show 201626/10 đến 30/10 tại SECC, 799 Nguyễn Văn Linh, Sài Gòn Tham gia

Tuesday, August 13, 2013

CSS3 slider trình diễn đẹp cho blogger v4

giới thiệu đến cho các bạn một slider trình diễn hảnh cực đẹp, 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.

Chia sẻ:
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.

28 nhận xét:

  1. còn một điều này nữa mình muốn bỏ cái tam giác lọn ngược ở menu thì phải làm thế nào bạn nhỉ.link:http://age88.blogspot.com/

    ReplyDelete
    Replies
    1. Bạn xóa tất cả các đoạn <font size='1'>&#9660;</font> nằm ngay sau tên của mỗi menu con đó,

      Delete
    2. đã xong,bạn thật nhiệt tình.Thanks

      Delete
  2. Muốn cho nó chạy tự động thì làm sao hả Nam?
    Chạy tự động sẽ đẹp hơn đó.
    Cám ơn nhiều nhé

    ReplyDelete
    Replies
    1. Để nó chạy tự động bạn phải viết thêm CSS cho mỗi vòng chạy của mỗi slider. Và số lượng các thuộc tính phụ thuộc vào tốc độ. Mỗi vòng được tính 100%.

      @keyframes slide {
      0% {left:0}
      25% {left:-300px}
      50% {left:-600px}
      75% {left:-900px}
      100% {left:0}
      }


      animation:slide 4s ease-in-out infinite;

      Bạn có thể xem demo: DEMO

      Delete
    2. bác hướng dẫn cái này cụ thể chút được ko bác

      Delete
    3. :D em xem rồi nhưng không hiểu.
      Bác bảo em thay đoạn vào đoạn nào thì em còn biết chứ cái môn này là em dốt lắm.
      Mà tiện cho em hỏi cái blog của em sao nó ko hiện nút share ở dưới mục bài viết bác nhỉ.
      tks

      Delete
    4. http://thietbisieuthigiare.blogspot.com/
      blog của em đây

      Delete
    5. Bạn xem bài viết này nha: http://namkna.blogspot.com/2011/08/tao-bookmark-sharing-is-sexy.html

      Trong ves mới mình sẽ cập nhaatk.

      Delete
  3. Cám ơn Nam đã hồi âm.
    Mình vừa tải được một temp blogger rất giống site vnexpress.net. Nhưng khi dùng nó bị lỗi tùm lum.
    Nam xem thử và chỉnh giúp mình với. Nam xem Tại đây sẽ biết

    ReplyDelete
  4. Mai Nam có rảnh không? Khoảng 8 - 9h sáng mai, Nam rảnh thì teamview giúp mình nhé.
    Cám ơn Nam nhiều

    ReplyDelete
  5. Nam có thích coi bóng đá Ngoại hạng Anh không? Mình gửi Nam lịch thi đấu bằng Excel mùa giải 2013-2014 để tiện theo dõi. Nam tải tại đây nhé

    ReplyDelete
    Replies
    1. mình đang cần cái này,cảm ơn bạn .à về cái temp vnexpress mình có nhân xét thế này : bố cục rất giống ,thêm css vào cho nó giống y đúc luôn thì không khó ,chỉ cần biết một chút xíu skin của blog là ok ,nhưng mà trang đấy nó nổi tiếng rồi ...bạn nên kiếm cái nào nó đơn giản và mình tự trang trí thì đẹp hơn..và lại ý nghĩa nữa.

      Delete
    2. cuối tuần lại xem chelsea đá rồi,không biết bạn thích đội nào

      Delete
  6. Mình cũng biết vậy, nhưng mình còn "gà" lém, bạn biết có thể hướng dẫn mình chút nhé

    ReplyDelete
  7. Zay là mình cùng fan của chel rồi

    ReplyDelete
    Replies
    1. nếu bạn dùng firefox thì bạn click phải tìm " thăm dò phân tử trang" còn dùng chrome thì clik chuột phải vào " kiểm tra phần tử" tìm cái kính lúp và click vào đấy và di chuyển đến chỗ cần thêm màu ,bạn lấy mã màu html và tiến hành thêm thôi,còn thêm thế nào thì bạn tìm trên google " code html cơ bản namk blog" là biết liền mà,ngoài ra bạn cần chú ý là đối với firefox thì hiện thị màu là background: -moz-linear-gradient còn chrome là background: -webkit-gradient.bạn cứ sửa ở công cụ của trình duyệt rồi thấy đẹp thì vào mầu temp chính đúng như thế

      Delete
    2. HÌ dạo này phải làm báo cáo cuối quý hết cả time online :)

      Delete
  8. anh Nam giúp em sửa lỗi này với ạ
    http://share68.blogspot.com/p/chelsea-tv.html

    template này của em k xem được ở dạng này

    ReplyDelete
    Replies
    1. Em chưa chèn nội dung vào trang đó mà.

      Delete
    2. không phải đâu anh ơi.. nếu thay template khác vào thì vẫn hiển thị bt.. nhưng mà template này k đc

      Delete
    3. Em gửi template đó vào mail tavannam01 để anh kiểm tra xem sao nhé/

      Delete
    4. em gửi rồi ạ.. mong anh sớm giúp đỡ

      Delete
  9. Cái hiệu ứng chuyển ảnh xoay tròn hơi đau mắt, có cách nào chuyển nó thành hiệu ứng fade nhẹ nhàng không admin?

    ReplyDelete
    Replies
    1. Bạn xóa các đoạn xoay tròn sau đi là được nhà:

      -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);



      -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);

      Có thể thay thế nó thành: opacity ví dụ:

      -webkit-transform:opacity(0deg) scale(0);
      -moz-transform:opacity(0deg) scale(0);
      -ms-transform:opacity(0deg) scale(0);
      -o-transform:opacity(0deg) scale(0);
      transform:opacity(0deg) scale(0);

      -webkit-transform:opacity(720deg) scale(1);
      -moz-transform:opacity(720deg) scale(1);
      -ms-transform:opacity(720deg) scale(1);
      -o-transform:opacity(720deg) scale(1);
      transform:opacity(720deg) scale(1);


      với (1) là rõ nhất và (0) là mờ nhất.

      Delete