Blog Manh Hai |ManhhaiblogThủ Thuật Blog

Slide Show trình chiếu ảnh với hiệu ứng mượt mà dành cho bloggspot

<div dir="ltr" style="text-align: left;" trbidi="on">
Chào các bạn hôm nay manhhaiblog chia sẻ thêm một thủ thuật nữa dành cho bạn nào đam mê bloggspot hay những bạn nào mới lập blog riêng cho mình. Slide show trình chiếu này rất mượt mà nhẹ load rất ổn là một tiện ích wegdet ở trang chủ thì rất đẹp nhất là bạn nào dùng blog dành cho allbum ảnh hay tin tức.thôi mình cũng không nói dài dòng nữa mình cứ chia sẻ ra đây ai thích thì cứ lấy về xài nhé. 1 Tài khoản Blogger --> Tổng quan --> Chủ đề -->Chỉnh sửa HTML --->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 thẻ vừa tìm được. 
<div style="text-align: center;">
<a href="https://demomanhhaiblog.blogspot.com/2017/09/slide-show-trinh-chieu-anh-voi-hieu-ung.html" target="_blank">( Ảnh Demo )</a></div>
<div class="separator" style="clear: both; text-align: center;">
<img alt="Slide Show trình chiếu ảnh với hiệu ứng mượt mà dành cho bloggspot" border="0" data-original-height="424" data-original-width="1027" height="264" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhWAatTKw6pLqEfTpRvkbBZPHx0MJA46LbUMsp1IarpXt3M8yL0M-8Je3ieqq-Z3P6_-1h5iKKRDqBDOAoXMM0xDEO0zuKr6vl7TEVwjvixp1qQXBpLCX4Mr2epS_RRNUJtHQeuT7qer7YA/s640/slide1.png" title="Slide Show trình chiếu ảnh với hiệu ứng mượt mà dành cho bloggspot" width="640"></div>
 
 
<div style="height: 488px; overflow: scroll; width: 660px;">
 
/*########Slide Show trình chiếu ảnh với hiệu ứng mượt mà dành cho bloggspot.manhhaiblog#########*/ 
 
img{max-width:100%} 
 
.sliderz-wrapper{overflow:hidden;width:100%;max-width:1040px;max-height:600px;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} 
 </div>

 2 .Lưu mẫu lại và quay lại phần bố cục hoặc các bạn có thể để ở bài viết dạng html. 
</div>

Slide Show trình chiếu ảnh với hiệu ứng mượt mà dành cho bloggspot

Chào các bạn hôm nay manhhaiblog chia sẻ thêm một thủ thuật nữa dành cho bạn nào đam mê bloggspot hay những bạn nào mới lậ...