Thêm Slideshow trình chiếu hình ảnh bằng CSS đơn giản cho Blogspot

Gợi ý cho bạn

Trong bài viết này, thì mình sẽ mang đến các bạn một thủ thuật Blogspot đó là cách để trình chiếu hình ảnh tuyệt đẹp, đặc biệt là hoàn toàn bằng CSS khá đơn giản.

Mình có Demo ngay trong bài viết luôn nhé !!

Cách làm:

Bước 1. Copy đoạn CSS dưới đây và dán vào trước thẻ đóng ]]></b:skin>.

.slideshow-imgs {width:100%; height:400px; position:relative; overflow:hidden}
.slideshow-imgs .css-imgs {max-width:100%; position:absolute; left:0; right:0; opacity:0; -webkit-animation:slideshow-imgs-fade 15s linear infinite; -moz-animation:slideshow-imgs-fade 15s linear infinite; -ms-animation:slideshow-imgs-fade 15s linear infinite; animation:slideshow-imgs-fade 15s linear infinite}
.slideshow-imgs .css-imgs:nth-child(2) {-webkit-animation-delay:5s; -moz-animation-delay:5s; -ms-animation-delay:5s; animation-delay:5s}
.slideshow-imgs .css-imgs:nth-child(3) {-webkit-animation-delay:10s; -moz-animation-delay:10s; -ms-animation-delay:10s; animation-delay:10s}
@-webkit-keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}
@-moz-keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}
@-ms-keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}
@keyframes slideshow-imgs-fade {0%, 50%, 100% {opacity:0} 5%, 45% { opacity:1}}

Sau đó dán đoạn CODE này vào nơi bạn muốn hiển thị

<div class="slideshow-imgs">
<img class="css-imgs" src="link1" />
<img class="css-imgs" src="link2" />
<img class="css-imgs" src="link3" />
</div>

Vậy là đã xong rồi nhé! Đơn giản mà khá đẹp ^^

Lưu ý: Nếu bạn hiện thêm nhiều ảnh thì đơn giản chỉ cần thêm các phần tử CSS và HTML tương ứng
Ví dụ:
CSS Thêm

.slideshow-imgs .css-imgs:nth-child(4)..
.slideshow-imgs .css-imgs:nth-child(5)...
.slideshow-imgs .css-imgs:nth-child(6)...

Mình lưu Code này lâu rồi nên chả nhớ mình lấy ở đâu nữa. Nếu bạn nào biết hãy Comment để mình ghi nguồn nhé!