Các bước Tạo Slide ảnh sử dụng thư viện Slick cho blogspot như sau:
Bước 1: Mình dùng thư viện Font làm Icon, các bạn copy dán trước thẻ đóng </head>
<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css' rel='stylesheet'/>
Bước 2: Thêm CSS trước thẻ đóng </b:skin>
.section-slider .home-slider{border-radius:10px;overflow:hidden}
.slick-slider{position:relative;display:block;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-slider .slick-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:99;font-family:"Font Awesome 5 Free";font-weight:900;font-size:0;background:#f26d7d;border:1px #f26d7d solid;height:30px;width:30px;transition:0.3s all;opacity:0;overflow:hidden}
.slick-slider .slick-arrow.slick-next{right:-30px}
.slick-slider .slick-arrow.slick-next:before{content:"\f054";font-size:11px;color:#fff}
.slick-slider .slick-arrow.slick-prev{left:-30px}
.slick-slider .slick-arrow.slick-prev:before{content:"\f053";font-size:11px;color:#fff}
.slick-slider .slick-arrow:hover{background:#FFF}
.slick-slider .slick-arrow:hover:before{color:#f26d7d}
.slick-slider:hover .slick-arrow{opacity:1;overflow:visible}
.slick-slider:hover .slick-arrow.slick-next{right:0}
.slick-slider:hover .slick-arrow.slick-prev{left:0}
.slick-list{position:relative;overflow:hidden;display:block;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer;cursor:hand}
.slick-slider .slick-track,.slick-slider .slick-list{-webkit-transform:translate3d(0,0,0);-moz-transform:translate3d(0,0,0);-ms-transform:translate3d(0,0,0);-o-transform:translate3d(0,0,0);transform:translate3d(0,0,0)}
.slick-track{position:relative;left:0;top:0;display:block;margin-left:auto;margin-right:auto}
.slick-track:before,.slick-track:after{content:"";display:table}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{float:left;height:100%;min-height:1px;outline:none;display:none}
[dir="rtl"] .slick-slide{float:right}
.slick-slide img{display:block;width:100%}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}
Bước 3: Thêm đoạn code bên dưới trước thẻ đóng </body>
<script src='https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js'></script>
<script>
$('.home-slider').slick({
autoplay: true,
autoplaySpeed: 3000,
fade: false,
cssEase: 'linear',
dots: false,
arrows: true,
infinite: true
});
</script>
Bước 4: Thêm HTML vào vị trí cần hiển thị trên blogspot của bạn
<section class='section-slider'>
<div class='home-slider'>
<div class='item'>
<a class='clearfix' href='#LINK' title='Template blogspot Giaodien.blog'>
<img alt='Template blogspot Giaodien.blog' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiYNP8FaV3otm22q0cH9V_f0HBjKJNxpBU0JVmJmCvisQW8tlHth6uT5jt0HPFJkB3C36h2HVvmIocHT395WVUZ1glDBWcpE-x6XvfcsMmd0yf_R27JFdBlnY35rU-9qiOvPiy0wYAZK0w/s16000/slider_1.jpg' />
</a>
</div>
<div class='item'>
<a class='clearfix' href='#LINK' title='Template blogspot Giaodien.blog'>
<img alt='Template blogspot Giaodien.blog' class='img-responsive' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhGLub2LVBvytqlHFoXCpwy_hpbrMvo408c8fT53xJuWO7_WXbaNrPiFJKaVlCfbjCDYibbYGLfGiFburaBJVZ1nfy4fSafcp0xmBnR6QizJGPFesiMZxOuw2UfLYpF0R2PRFqFk-Q6IHo/s16000/slider_2.jpg' />
</a>
</div>
</div>
</section>
Lưu ý blogspot của bạn phải sử dụng thư viện jQuery
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js'></script>
Sau khi cài đặt xong các bạn lưu lại và kiểm tra kết quả.
Chúc các bạn Thành công! Nếu thấy hữu ích, hãy like và share ! Thanks you.
