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://dev.dascodes.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/AVvXsEhr_0OyFQQfSFuxSLwsdXRSsTtax0dNTn-V8Uyu9jqcA8QP3J1xBERn2FTq0lsFb3FLa3H1ewaTITYJQ3yFc6HTEVGAJc3CTbjBjpTFYU24k6_CX_s0bem_Qv8RGcYn_if7o4veMIANzcE5/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://dev.dascodes.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...

55 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. it's working and very nice. thanks

    ReplyDelete
  6. 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
  7. I'm glad that you guys like it :)

    Give me your blog link @Emily

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

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

    ReplyDelete
  10. 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
  11. Thank you so much for this post. I found it quite helpful during the restyling of my blog.

    ReplyDelete
  12. 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
  13. Nice tutorial, meaning I have to add a post for the picture first before I have the scripts running?

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

    Thanks

    ReplyDelete
  15. 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
  16. Hi,
    I need to kow how to center the post title. Thanks for the tutorials. Very excellent!

    ReplyDelete
  17. 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
  18. 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
  19. hello again. now its wormking. How i ad self target on script to open the pages in same window?

    ReplyDelete
  20. 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
  21. 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
  22. it's working and very cool. thanks Shuvojit Das

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

    ReplyDelete
  24. 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
  25. post title doesn't show, how to fix that? thanks before

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

    ReplyDelete
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. How can I have order of slides to be random?

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

    ReplyDelete
  36. Hi, was wondering if you could help me, I've used this slideshow several times and it's always worked but I a trying to add it to a new template I am making and when you hover over it it shifts left and enlarges, but cant see any code making this happen, any advice?? http://inbloomtemplate.blogspot.co.uk/

    ReplyDelete
  37. Perfect! It works, thanks a Lot.

    ReplyDelete
  38. Thank you. It is really helps me a lot. I am using free version of blogger theme when static slider but because of this tutorial it looks my theme a paid version. lol

    ReplyDelete
  39. Thanks bro... its working fine... its really good... but Thumbnail image quality is very poor... how to get HD Quality Thumbnail ???

    ReplyDelete
  40. easy and the best ever

    visit mywovenwords.com to see how it works

    ReplyDelete
  41. :) Thank you for the wonderful post (h)

    ReplyDelete
  42. please check my page http://www.atulgaurblog.com/p/gallery there are three symbols (>)appearing please advise how to get rid of them

    ReplyDelete
  43. (h) Mehn i really do appreciate more grease to your elbow.. if you got a youtube chanel would love to subscribe to it

    ReplyDelete
  44. It work for me perfectly however there is a thing that annoys me, the two dots at the bottom left of it. Let me show you: http://prntscr.com/h9kdu2 I would great appreciate if you will let me know how to remove those dots. Thanks

    ReplyDelete
  45. Very nice slider!
    Is there a way to show the snippet text?

    ReplyDelete

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