Tổng hợp các kiểu slider bài viết blogger

Hello các bạn đã lâu không viết bài về thủ thuật blogspot. Hôm nay rãnh rỗi search trên google thấy mấy code slider bài viết blogspot khá hay với nhiều kiểu hiệu ứng cũng như tùy biến khá hay nên muốn chia sẽ cho các bạn nào cần nhu cầu sử dụng.

Tổng hợp các kiểu slider bài viết blogger 

Thực hiện các bước như tôi hướng dẫn dưới đây

Bước 1:  Đăng nhập vào Blogger - Chủ đề - Chỉnh sửa HTML
Bước 2: Copy toàn bộ đoạn code bên dưới dán vào trước thẻ đóng </head>

<!-- BloggerDynamicSlider Basic CSS -->
<style type="text/css">
/**
 *  jQuery BloggerDynamicSlider v1.0.0
 *  Copyright 2016 http://shuvojitdas.com
 *  Contributing Author: Shuvojit Das
 *  Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
 *
 */
@import url(https://fonts.googleapis.com/css?family=Open+Sans:300,400);
@import url("https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/flexslider.min.css");
/* Preloader */
.flexslider.loading:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background: url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEikNDLBZ0buC0jyYMhWBiRSGg_q2yrz4YOndK9R7Ucl-9K1GbnK_JGHlCuYNOWyg86d-NHfIcfccbqU2ovCUpcjSiclgxHA_exBLqOaLx-Dcg2Bb01UYnGNWYd2IIOtWgBA9XY9gvKVUn4s/h120/loader.gif) no-repeat center center;
    background-color: rgba(255, 255, 255, 0.9);
    z-index: 9999;
}
.flexslider.loading ul.flex-direction-nav,
.flexslider.loading ol,
.loading .flex-caption {
    display: none;
}
.flexslider {
    border: 1px solid #cacaca;
    padding: 4px;
    margin: 0 auto 60px auto;
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -webkit-border-radius: 0;
    -moz-border-radius: 0;
    border-radius: 0;
}
.flexslider a {
    text-decoration: none;
}

/* Caption/Post Title */
.flex-caption {
    position: relative;
    padding-left: 15px;
    padding-right: 10px;
    height: 60px;
    background: #FFFFFF;
    color: #1C1C1C;
    font-family: 'Open Sans', sans-serif;
    font-weight: 300;
    font-size: 26px;
    line-height: 26px;
    margin: 0;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
}
.flex-caption span {
    display: table-cell;
    vertical-align: middle;
    height: 60px;
}
.flex-caption.overlayDark,
.flex-caption.overlayLight {
    margin-bottom: -60px;
    bottom: 60px;
    position: relative;
}
.flex-caption.overlayDark {
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
}
.flex-caption.overlayLight {
    background: rgba(255, 255, 239, 0.9);
    color: #000;
}
ul.slides li a {
    display: block;
    overflow: hidden;
}

/* blogger css conflicts fix */
.flexslider ul {
    margin: 0 !important;
    padding: 0 !important;
    line-height: initial !important;
}
.flexslider ul.flex-direction-nav li {
    margin: 0;
    padding: 0;
    line-height: initial;
}
.flexslider ul li {
    margin-bottom: 0 !important;
}
.flexslider img {
    padding: 0;
    border: none;
    -webkit-box-shadow: none;
    box-shadow: none;
}
ul.flex-direction-nav {
    position: static;
}
ul.flex-direction-nav li {
    position: static;
}
.error {
    font-family: monospace, sans-serif;
}
@media (max-width: 600px) {
    .flex-caption {
        font-size: 20px;
        line-height: 20px;
        font-weight: 400;
    }
}
</style>
<!-- Include Dependency Script -->
<script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.0/jquery.flexslider-min.js"></script>
<script type="text/javascript" src="http://shuvojitdas.com/script/jquery.bdslider.min.js"></script>

Bước 3: Tìm một nơi đẹp để đặt vị trí slider bài viết mà bạn muốn hiển thị thường code này hay để dưới header của blog. Tùy bạn có thể chọn nơi khác để đặt code. Ở đây tôi chia sẻ 3 code với tùy chỉnh khác nhau:

Code 1

<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        blogURL: "https://www.longanit.com/", // thay địa chỉ url thành địa chỉ blog của bạn
    });
});
</script>

Code 2:

<div id="slider2"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider2").BloggerDynamicSlider({
        blogURL: "https://www.longanit.com/", // thay url thành địa chỉ blog của bạn
        labelName: "nhãn của bạn", // Thay nhãn của bạn muốn hiển thị
        maxItem: 9, // Số bái viết tối đa cần hiển thị
        showPostTitle: true, // Hiển thị tiêu đề bài viết (true/false)
        postTitleStyle: "overlayDark", // Các kiểu hiển thị  "default, "overlayDark" or "overlayLight"
        imageWidth: 704, // Độ rộng ảnh bài viết
        imageHeight: 440, // Chiều cao ảnh hiển thị tính bằng px
    });
});
</script>

Code 3:

 <div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Chiều rộng ảnh tính bằng px
        imageHeight: 398, // Chiều cao ảnh tính bằng px
        maxItem: 6, // Số bài viết tối đa cần hiển thị
        animation: "slide", // Lựa chọn kiểu slider "fade" or "slide"
        showPostTitle: true, // Hiển thị tiêu đề bài viết  (true/false)
        postTitleStyle: "overlayLight", // Hiển thị kiểu khung slider "default, "overlayDark" or "overlayLight"
    });
});
</script>

Trường hợp bạn muốn đưa tất cả vào một Widget thì copy toàn bộ các code trên vào chung cũng được nhé. Chú ý là phần code 1, code 2 và code 3 bạn chỉ chọn 1 trong 3 code thôi.

Nếu trong quá trình thực hiện báo lỗi hay gặp khó khăn vui lòng để lại bình luận bên dưới để được hỗ trợ nhé. Chúc các bạn SEO nhanh lên top.