Blogger Dynamic Slider by Label / Recent Posts

blogger dynamic slider


"Blogger Dynamic Slider" is a simple yet powerful automatic slider for blogger. The slider content generates from blog's feed dynamically, based upon users settings via jQuery Ajax Call. It is fully responsive. As it is a Dynamic Slider, the slider content updates whenever a new post comes (if it fits with user settings criteria).


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

Live Testing Tool for Blogger Dynamic Slider

Well now this automatic recent post slider have a testing tool where you can enter your blog URL and see how Dynamically it generate a slider from your blog's feed. This tools have other basic options like Image Size, Max Item, Label (you can specify a label to generate slider from. Though it is optional). Check out the Live Testing Tool.


Demo/ Examples



How It Works ?

The slider content generates from blogger blog's feed, dynamically by jQuery AJAX call, and then FlexSlider takes effect and take care of the sliding features. That it, nothing fancy but very useful for blogger users.


Installation Guide

STEP - 1: Go to Your Blogs Home > Template (Backup your template to be safe)
STEP - 2: Edit HTML
STEP - 3: Search for closing head: </head> in the template (Hint: to search on template: click anywhere in the code block and press Ctrl+F)
STEP - 4: Copy the following code below and paste just before </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://lh3.googleusercontent.com/-WWve06d4dB4/Vq28tN4LMUI/AAAAAAAAFcM/k8IQajpDnS4/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>

Note: If you had already added jQuery .js into your blogs template then don't add it again as sometimes multiple jQuery ruins everything. Here jQuery script tag is located at the very first of this code block above.


STEP - 5: So now the slider engine scripts are installed, you are ready to add slider(s) anywhere in your blog including gadget, post or page. Well, just copy the code below and paste in a HTML Gadget or Post or 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>

STEP - 6: Save & Done! Pretty Simple & Dynamic.


Check these demos again and see their respective code below them to see what bdSlider can provide, And build your very own slider :)


All the options of '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)
});


Thank you all for your love and support :) 
Share this post
  • Share to Facebook
  • Share to Twitter
  • Share to Google+
  • Share to Stumble Upon
  • Share to Evernote
  • Share to Blogger
  • Share to Email
  • Share to Yahoo Messenger
  • More...

43 comments

  1. Replies
    1. Sorry jesi how do I add images
      Thanks a lot
      Fabrizio

      Delete
    2. You don't have to or can't add images manually in this slider, slider images will be generated automatically from post feed.

      I hope you found your answere. Thanks for visiting :)

      Delete
  2. Can each image in the slider have a different link? Like, if I wanted to use this on the top to direct people to my blog posts?

    ReplyDelete
    Replies
    1. Yes, each image has their respective post link. Thanks for visiting @Pitch and Paddle

      Delete
  3. How do I include the options of this slider?

    ReplyDelete
  4. THanks for this. A life saver. Question though, the buttons at the bottom of the slideshow don't look the same on my blog as it does on your slideshow. How can I fix the appearance of those?

    ReplyDelete
  5. thanx brother you the best (k) :)

    ReplyDelete
  6. it's working and very nice. thanks

    ReplyDelete
  7. This is awesome, thanks so much! Is there a way to align the post title center instead of left on the slider? I tried text-align in a few areas in the code but it's not working.Thanks again :)

    ReplyDelete
  8. I'm glad that you guys like it :)

    Give me your blog link @Emily

    ReplyDelete
  9. thank u very much Shuvojit Das . all congratulations , it works to hell :-d

    ReplyDelete
  10. Thanks it worked perfectly well on my live football blog www.famefoot.blogspot.com

    ReplyDelete
  11. Hi I tried many times but it still can not solved the problem, it keep on floating to right, no image and font too big. my website http://propertybooth.blogspot.my/
    Thanks in advanced

    ReplyDelete
  12. Thank you so much for this post. I found it quite helpful during the restyling of my blog.

    ReplyDelete
  13. Thanks for sharing this!

    Could you please tell me how to align this on the left hand side and on the right hand side the post along with its description?

    ReplyDelete
  14. Nice tutorial, meaning I have to add a post for the picture first before I have the scripts running?

    ReplyDelete
  15. How do I make the slider appear at the top of my page? Right now it's at the bottom.

    Thanks

    ReplyDelete
  16. Hi there! Thanks a lot for using your knowledge to bless us. The live tool to see how it would look on my blog isn't working for me.

    ReplyDelete
  17. Hi,
    I need to kow how to center the post title. Thanks for the tutorials. Very excellent!

    ReplyDelete
  18. Is there anything I have to change on any of that code...I've inserted both but it's not yet displaying, what do I do please

    ReplyDelete
  19. Its not working for me..I did it step for step and the space where it should be showing pics only shows this: ?orderby=published&alt=json-in-script&callback=showgalleryposts&max-results=80\"><\/script>");

    what am I doing wrong? thanks for the help, I"m a newbie!

    ReplyDelete
  20. hello again. now its wormking. How i ad self target on script to open the pages in same window?

    ReplyDelete
  21. Fantastic slider. My only issue is that it appears on all posts and pages. Is there a way I can stop it from appearing on pages, and only show up on posts?

    ReplyDelete
  22. Hello! This is a great feature to my blog, but I'm wondering if there is a way to expand it horizontal on my blog? I'm wanting it to show 3 blog post at the same time :)

    ReplyDelete
  23. it's working and very cool. thanks Shuvojit Das

    ReplyDelete
  24. This works perfectly!!!!!! thank you so much!!!!!!!!!!!!!!!

    ReplyDelete
  25. Hello,

    Your slider looks great. It is much more straightforward than my current slider widget.

    Unfortunately it didn't work with my template ... The slider kept drifting farther to the right with each post (this happened on both the fade or slide option). Centering and margins/borders did not help.

    I had no choice but to go back to my standard slider widget.

    http://www.fashionnts.com

    ReplyDelete
  26. post title doesn't show, how to fix that? thanks before

    ReplyDelete
  27. Hi, How do we make it work with HTTPS blogspot website?

    ReplyDelete
  28. It constantly gives me error
    Error parsing XML, line 1029, column 7: The element type "style" must be terminated by the matching end-tag "style". Hide notification
    I did put the end style code before head tag. But that also does not work. Can you please help?

    ReplyDelete
  29. This is great, thank you, works well for My Yellow Bells. Check out my blog now, so pretty with your slider http://www.myyellowbells.com/

    ReplyDelete
  30. This is great! My only problem is the size. Some of my posts are vertical and some are horizontal. It's fitting the horizontal ones pretty well but it cuts off the vertical ones. How do I change the measurements?

    ReplyDelete
  31. Love it, I noticed that I cant use the slider on 2 different positions on my blogger page. one would stop one from working

    ReplyDelete
    Replies
    1. @Talkactive give them different id; for example -

      <div id="slider1"></div>
      <div id="slider2"></div>

      <script type="text/javascript">
      $(document).ready(function() {
      $("#slider1").BloggerDynamicSlider({});
      $("#slider2").BloggerDynamicSlider({});
      });
      </script>

      Delete
  32. thanks a lot! one more question, how can i make posts that have more than one picture display as slider? Because what happens is that when my blog delays in loading on a browser it actually shows posts with multiple pictures as slider and that looks awesome. But normally posts with more than one image does not display picture at all because of the slider. Any help on this will be highly appreciated. the blog URL is www.talkactive.tv Thanks Genus!

    ReplyDelete
  33. Hello again. I was able to make the slider work. The blog had to be made public for the /feeds/summary to be visible to the script.
    Thank you.


    By the way, I am now figuring how to remove the 'dots' at the bottom.

    ReplyDelete
  34. Dear Sir,

    Blogger Dynamic Slider by Label / Recent Posts is so great and I love it! However, for every slide in the slider, I need to make new post, attach that image and tag with respective label. Is there anyway to add all images in one post and use one label only?


    Thanks and best regards,

    Cruz

    ReplyDelete
  35. How can I have order of slides to be random?

    ReplyDelete
  36. hi! how can I make the links open on the same window and not launch a new one? Thanks!

    ReplyDelete

:) :-) :)) =)) :( :-( :(( :d :-d @-) :p :o :>) (o) [-( :-? (p) :-s (m) 8-) :-t :-b b-( :-# =p~ :-$ (b) (f) x-) (k) (h) (c) cheer

 
© 2013- Image Slider For Blogger
Created & Maintained by Shuvojit Das
Powered by blogger.com
Privacy Policy | Contact Me
Back to top