Cara Memasang Blogger Dynamic Slider oleh Label / Recent Posts

"Blogger Dynamic Slider" adalah slider otomatis yang sederhana namun ampuh untuk blogger. Konten slider menghasilkan umpan blog secara dinamis, berdasarkan setelan pengguna melalui Panggilan Ajax Ajax. Ini sangat responsif. Karena ini adalah Slider Dinamis, konten slider akan diperbarui setiap kali ada entri baru (jika sesuai dengan kriteria pengaturan pengguna).

Blogger Dynamic Slider(bdSlider) Features

• Dynamic - Slider Content Generates Automatically
• Fully Responsive
• Slider By a Specific Label
• Slider By Recent Posts
• Preloader Function
• Lots of Customization Options
• Easy Setup & Customization

Nah sekarang slider post terbaru otomatis ini memiliki alat uji dimana Anda bisa memasukkan URL blog Anda dan melihat bagaimana Dinamis menghasilkan slider dari umpan blog Anda. Alat ini memiliki opsi dasar lainnya seperti Image Size, Max Item, Label (Anda dapat menentukan label untuk menghasilkan slider. Meskipun opsional). Lihat Saja Disini.

Bagaimana Cara Memasangnya ?

Konten slider menghasilkan umpan dari blog blogger, secara dinamis oleh panggilan jQuery AJAX, dan kemudian FlexSlider mulai berlaku dan merawat fitur geser. Itu, tidak ada yang mewah tapi sangat berguna bagi pengguna blogger.

Cara Memasangnya ?

1: Pergi ke Rumah Blog Anda> Template (Backup template Anda agar aman)
2: Edit HTML
3: Cari kepala penutup: </ head> di template (Petunjuk: untuk mencari di template: klik di manapun di blok kode dan tekan Ctrl + F)
4: Salin kode berikut ini dan tempelkan sebelum </ 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/AVvXsEiY6abiY-Pfdb8gN42nPqZm1Tzx0E1thWmNmqPOXMawVw-mRQbv4-Hm7oYuScz8lx5FBYcwDgC08a70DnqJLuJJPsr9Y4_0CbDx9oVbPRzOZFBwVAx355xqo7-O2TUM-oayTeiwwVqBhVgN/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>

Catatan: Jika Anda telah menambahkan jQuery .js ke dalam template blog Anda, jangan menambahkannya lagi karena terkadang beberapa jQuery merusak semuanya. Berikut tag jQuery script yang berada pada blok kode pertama di atas.

LANGKAH - 5: Jadi sekarang skrip mesin slider dipasang, Anda siap menambahkan slider di manapun di blog Anda termasuk gadget, pos atau halaman. Baik, cukup salin kode di bawah ini dan tempel di Gadget HTML atau Post atau Page

<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
    $("#slider1").BloggerDynamicSlider({
        imageWidth: 636, // Image width in px value
        imageHeight: 398, // Image height in px value
        maxItem: 6, // Max number of Slider Image to show
        animation: "slide", // Select your animation type, "fade" or "slide"
        showPostTitle: true, // Show post title as Caption ? (true/false)
        postTitleStyle: "overlayLight", // Caption style: "default, "overlayDark" or "overlayLight"
    });
});
</script>

6: Simpan & Selesai! Cukup Sederhana & Dinamis.

Periksa demo ini lagi dan lihat kode masing-masing di bawahnya untuk melihat apa yang bisa diberikan oleh bdSlider, Dan buat slider Anda sendiri :)

Semua pilihan 'Blogger Dynamic Slider'

$("#slider1").BloggerDynamicSlider({
    blogURL: "", // Your Blog URL. example: "http://imagesliderforblogger.blogspot.com"; Only need to specify when fetching slider content from another blog
    labelName: "", // Show posts from specific Label. Specify a 'Label', or leave it empty to fetch from all recent posts
    maxItem: 6, // Max number of Slider Posts to show
    showPostTitle: true, // Show post title as Caption ? (true/false)
    postTitleStyle: "default", // Select post title/caption style "default, "overlayDark" or "overlayLight"
    imageWidth: 544, // Image width in px value
    imageHeight: 280, // Image height in px value
    animation: "fade", // Select your animation type, "fade" or "slide"
    controlNav: true, // Navigation for paging control of each slide? (true/false)
    directionNav: true, // Previous/next navigation? (true/false)
    pauseOnHover: false, // Pause slideshow when hovering over slider, then resume when no longer hovering (true/false)
    slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in milliseconds
    animationSpeed: 600, // Set the speed of animations, in milliseconds
    animationLoop: true, // Should the animation loop? (true/false)
});

Terima kasih. Jika ada kritik dan saran silahkan komen di bawah :)