Code Blogspot Lập Trình & Seo 

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

Chia sẻ đoạn code slideshow trình chiếu ảnh cho blogspot rất đẹp, phù hợp với cả các website và các mã nguồn mở khác.
SlideShow trình chiếu ảnh blogspot
Với hiệu ứng chuyển động mượt mà, khá nhẹ nhàng và dễ tuỳ biến

Hướng dẫn chèn code slideshow trình chiếu ảnh vào blogspot:

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

Để 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!


thiết bị phòng chụp | bán chân đèn flash | bán đèn chụp ngoại cảnh | bán đèn quay phim | bán đèn chụp sản phẩm | remote trigger godox | đèn flash canon speedlite | đèn led chụp hình sản phẩm | bóng đèn flash | túi đựng máy ảnh | phụ kiện máy ảnh | bàn chụp sản phẩm | thiết bị chống rung máy quay phim | máy ép PLASTIC | thang chụp hình | máy chụp hình sản phẩm | máy in ảnh hiti | chân máy ảnh chụp hình | pin sạc máy ảnh | máy đo sáng | tủ chống ẩm máy quay phim | bán đèn flash | đèn flash hylow | Đèn Flash studio | đèn flash Jinbei | đèn flash photon | bộ kít đèn flash Jinbei | bộ kít đèn flash | Chân máy ảnh | setup phòng chụp sản phẩm | softbox | tấm hắt sáng | bán chân đèn studio | dàn treo đèn | chóa đèn tổ ong | phông nền 3d | dù chụp hình | giá treo phông chụp hình | thanh trượt dolly | tay cầm máy quay phim | phông chụp hình 3d | phòng chụp đám cưới |

Leave a Comment