Like Page để cập nhật tin mới ngay trên facebook nhé

SlideShow trình chiếu ảnh với hiệu ứng tuyệt đẹp cho blogspot /blogger

Chào các bạn hôm nay mình có ghé thăm trang NONSTOPVIET.COM thấy có một slideshow ảnh rất đẹp nên mình có mang về để chia sẻ cho những ai cần sử dụng dạng slide này để trình chiếu ảnh, hoặc banner đều rất phù hợp.
SlideShow trình chiếu ảnh với hiệu ứng tuyệt đẹp cho blogspot /blogger
Với hiệu ứng chuyển động mượt mà, khá nhẹ nhàng và dễ tuỳ biến.

Hướng dẫn cách làm:

Bước 1: Bạn đăng nhập Blogger -> Mẫu -> Nhấn tổ hợp phím Ctrl F và tìm đến thẻ ]]></b:skin sau đó dán đoạn CSS sau lên phía trên
img{max-width:100%}
.sliderz-wrapper{overflow:hidden;width:100%;max-width:1340px;max-height:400px;margin:auto;position:relative;margin-bottom:20px}
.sliderz-entry-list-wrapper{position:relative;width:100%;height:0;padding-top:30%;left:0;transition:.5s all cubic-bezier(0.78,-0.1,0.58,1)}
.sliderz-entry-list{display:flex;justify-content:space-around;position:absolute;width:100%;height:100%;top:0;left:0}
.sliderz-entry{width:33%;height:100%;box-sizing:border-box}
.sliderz-preview-img{width:100%;height:100%}
.sliderz-prev,.sliderz-next{width:50px;height:100%;position:absolute;z-index:2;opacity:.1;transition:.5s all ease-out;cursor:pointer}
.sliderz-next{right:-20px;top:0}
.sliderz-wrapper:hover .sliderz-prev,.sliderz-wrapper:hover .sliderz-next{opacity:1}
.sliderz-prev-btn,.sliderz-next-btn{font-size:40px;position:absolute;top:46%;width:50px;height:50px;z-index:3;color:#fff;transition:.5s all ease-out}
.sliderz-wrapper .sliderz-prev-btn{left:-30px}
.sliderz-wrapper .sliderz-next-btn{right:-30px}
.sliderz-wrapper:hover .sliderz-prev-btn{left:10px}
.sliderz-wrapper:hover .sliderz-next-btn{right:10px}
.sliderz-pick{position:absolute;top:10px;right:10px;display:flex}
.sliderz-pick > .sliderz-number{width:14px;height:14px;margin:4px;background:rgba(255,255,255,0.78);display:block;border-radius:50%;cursor:pointer;transition:.5s all ease-out}
.sliderz-pick > .sliderz-number:hover,.sliderz-pick > .sliderz-number.open{background:#f5003a}
Bước 2: Để hiển thị Slider này bạn sử dụng đoạn Code sau và dán vào nơi muốn hiển thị
<div class="sliderz-wrapper">
<div class="sliderz-prev" onclick="sliderz_goto(-1)"><i class="fa fa-chevron-left sliderz-prev-btn" aria-hidden="true"></i></div>
<div class="sliderz-entry-list-wrapper"><div class="sliderz-entry-list"></div></div>
<div class="sliderz-next" onclick="sliderz_goto(-2)"><i class="fa fa-chevron-right sliderz-next-btn" aria-hidden="true"></i></div>
<div class="sliderz-pick"></div>
</div>
<script>
var slider_entry = [
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"],
["title ảnh","Link tới","Link ảnh"]
];


var slider_width = 100; // Chiều rộng slide (%)
var sliderz_time = 2000; // Thời gian chuyển slide (s)
   
var entry = "",pick="", slider_entry_len = slider_entry.length;
for (var i = slider_entry_len-1; i>=0; i--)
{
  entry += '<div class="sliderz-entry" style="width:'+100/slider_entry_len+'%"><a class="sliderz-preview" href="'+slider_entry[i][1]+'" target="_blank"><img class="sliderz-preview-img" src="'+slider_entry[i][2]+'" alt="'+slider_entry[i][0]+'"/></a></div>';
  pick = '<span class="sliderz-number" data-slide-number='+i+' onclick="sliderz_goto(event)"></span>'+pick;
}
var slider_entry_wrapper = document.getElementsByClassName("sliderz-entry-list-wrapper")[0];
slider_entry_wrapper.style.width = slider_entry_len*slider_width + '%';
document.getElementsByClassName("sliderz-entry-list")[0].innerHTML = entry;
document.getElementsByClassName("sliderz-pick")[0].innerHTML = pick;

var slider_wrapper = document.getElementsByClassName("sliderz-wrapper")[0];
var sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time);
slider_wrapper.addEventListener("mouseenter", function(){clearInterval(sliderz_timer);});
slider_wrapper.addEventListener("mouseleave", function(){sliderz_timer = setInterval(function(){sliderz_goto(-2);}, sliderz_time);});

var sliderz_goto = (function () {
 var slider_ctrl = document.getElementsByClassName("sliderz-entry-list-wrapper")[0];
 var curpos = 0, range = slider_entry_len, slider_wid=slider_width;
 var pickls = document.getElementsByClassName("sliderz-number");
 return function(pos)
 {
  if (pos==event) curpos = pos.target.dataset.slideNumber;
  else if (pos==-1) { curpos = --curpos%range; curpos=curpos<0?range-1:curpos; }
  else if (pos==-2) curpos = ++curpos%range;
  slider_ctrl.style.left = -curpos*slider_wid+"%";
  for (var i = pickls.length-1; i>=0; i--) pickls[i].classList.remove("open");
  pickls[curpos].classList.add("open");
 }
})();
slider_entry = ""; entry = ""; slider_entry_wrapper = ""; slider_wrapper = ""; pick = ""; 
slider_width = 0; slider_entry_len=0;
</script>

Chỉnh sửa:

title ảnh: tên của ảnh
Link tới: Link hoặc đường dẫn
Link ảnh: Linh ảnh sử dụng định dạng JPG, PNG,...
Chiều rộng slide (%): Phần trăm
Thời gian chuyển slide (s): Giây

Nâng cao:

Để thêm một slide ảnh nữa bạn thêm một code sau vào cùng chỗ title ảnh, link ảnh,...
["title ảnh","Link tới","Link ảnh"],

Kết luận:

Chỉ với vài bước đơn giản bạn đã có một slide trình chiếu ảnh tuyệt đẹp cho website/blog của bạn. Chúc bạn thành công!

6 nhận xét:

  1. else if (pos==-1) { curpos = --curpos%range; curpos=curpos<0?range-1:curpos; } bị lỗi dòng này

    Trả lờiXóa
    Trả lời
    1. Bạn sử dụng công cụ sau http://www.blogchiasethuthuat.com/p/converter-adsense.html rồi copy đoạn JS thôi nhé!

      Xóa
  2. Nay lên site e chơi, nhiều tuts ngon gê trước muốn làm mà làm biếng kiếm code gê :))

    Trả lờiXóa
  3. title ảnh ko hoạt động bạn ak,

    Trả lờiXóa
  4. có thể cho ảnh cao hơn ko, title ko hiện

    Trả lờiXóa
  5. có thể cho ảnh cao hơn ko, title ko hiện

    Trả lờiXóa

- Bình luận của bạn sẽ được kiểm duyệt trước khi xuất bản

- Những bình luận mang tính xây dựng đóng góp bài viết mới được duyệt

- Vui lòng KHÔNG bình luận thô tục, không dấu, chèn các liên kết bên ngoài, bình luận không liên quan hoặc quá ngắn

- Hãy là con người văn minh từ những câu nói