Blogger Dinamis Slider Responsif oleh Label / Tulisan Terbaru

"Blogger Dinamis Slider" adalah slider otomatis sederhana namun kuat untuk blogger. Konten slider menghasilkan dari feed blog ini secara dinamis, berdasarkan pengaturan pengguna melalui jQuery Ajax panggilan. Hal ini sepenuhnya responsif. Karena merupakan Dinamis Slider, update konten slider setiap kali posting baru datang (jika cocok dengan kriteria pengaturan pengguna).

Blogger Dinamis Slider (bdSlider) Fitur

• Dinamis - Slider Content Menghasilkan otomatis
• sepenuhnya Responsif
• Slider Oleh Label Tertentu
• Slider Dengan Tulisan Terbaru
• preloader Fungsi
• Banyak Kustomisasi Pilihan
• Mudah Pengaturan & Customization

Pengujian Alat untuk Blogger Dinamis Slider

Nah sekarang baru posting slider otomatis ini memiliki alat uji mana Anda dapat memasukkan URL blog Anda dan melihat bagaimana Dinamis itu menghasilkan slider dari feed blog Anda. alat ini memiliki pilihan dasar lain seperti Image Size, Max Item, Label (Anda dapat menentukan label untuk menghasilkan slider dari. Meskipun itu adalah opsional). Lihat Live Pengujian Alat.

Demo/ Examples

• Blogger Demo
• Static Demo (Yes it supports cross domain too!)
  • DEMO 1: (Default Slider)
  • DEMO 2: (Custom sized slider by a specific Label)
  • DEMO 3: (Animation: Slide, No Caption, No controlNav etc.)
  • DEMO 4: (Multiple Slider in a page with different Settings)

Bagaimana itu bekerja ?

Konten slider menghasilkan dari umpan blogger blog, dinamis oleh jQuery AJAX panggilan, dan kemudian FlexSlider berlaku dan mengurus fitur sliding. Bahwa, tidak ada yang mewah tapi sangat berguna untuk pengguna blogger.

Petunjuk pemasangan

LANGKAH - 1: Pergi ke Blog Anda Home> Template (Backup template Anda aman)
LANGKAH - 2: Edit HTML
LANGKAH - 3: Cari menutup kepala: </ head> di template (Petunjuk: untuk mencari template: klik di mana saja di blok kode dan tekan Ctrl + F)
LANGKAH - 4: Salin kode berikut di bawah ini dan paste tepat 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/AVvXsEiNiJ_86jngrkBmyeSfHSSc1WrGjH39HaNLt4-DTzf46KB1UQj1Dlpj10xWgGXauP5SkomKCqEME0jNX2qTPY_LEmPS9jhkrlwHsB6-39FBsRfcpGyBVe_KEr0nhFuXqyfV3S1x9qLU_NsT/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 sudah menambahkan jQuery js ke template blog Anda maka jangan tambahkan lagi karena kadang-kadang beberapa jQuery reruntuhan semuanya. Berikut tag script jQuery terletak di bagian paling pertama blok kode ini di atas.


LANGKAH - 5: Jadi sekarang script engine slider diinstal, Anda siap untuk menambahkan slider (s) di mana saja di blog Anda, termasuk gadget, posting atau halaman. Nah, hanya menyalin kode di bawah ini dan paste di Gadget HTML atau Post

<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>

LANGKAH - 6: Simpan & Selesai! Cukup Sederhana & Dinamis.

Check these demos lagi dan melihat kode masing-masing di bawah mereka untuk melihat apa yang dapat memberikan bdSlider, Dan membangun slider Anda sendiri.

Semua pilihan dari 'Blogger Dinamis 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 untuk semua cinta dan dukungan.