bdSlider aka Blogger Dynamic Slider is a simple yet powerful jQuery slider for b

logger. The slider content generates from blog's feed, based upon users settings
via jQuery Ajax Call. It is fully responsive. As it is a Dynamic Slider, the sl
ider content updates whenever a new post comes (if it match with user settings c
riteria).
Blogger Dynamic Slider(bdSlider) Features
Dynamic
Fully Responsive
Slider By a Specific Label
Slider By Recent Posts
Preloader Function
Lots of Customization Options
Easy Setup & Customization
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)

How It Works ?
The slider content generates from blogger blog's feed, dynamically by jQuery AJA
X 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 t
emplate: click anywhere in the code block and press Ctrl+F)
STEP - 4: Copy the following code below and paste just before </head>
<--! Start Coding -->
<!-- BloggerDynamicSlider Required Scripts & CSS -->
<!-- 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/flexs
lider/2.6.0/jquery.flexslider-min.js"></script>
<!-- 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/A
AAAAAAAFcM/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;
}
.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 jQuery bdSlider Script -->
<script type="text/javascript">
//<![CDATA[
/**
* jQuery BloggerDynamicSlider v1.0.0
* Copyright 2016 http://shuvojitdas.com
* Contributing Author: Shuvojit Das
* Plugin URL: https://github.com/shuvojit33/blogger-dynamic-slider
*
*/
;
(function($) {
$.fn.BloggerDynamicSlider = function(options) {
// Default settings/options
var settings = $.extend({
blogURL: "", // Your Blog URL. example: "http://imagesliderforblogge
r.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 "defau
lt, "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? (t
rue/false)
directionNav: true, // Previous/next navigation? (true/false)
pauseOnHover: false, // Pause slideshow when hovering over slider, t
hen 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)
}, options);

return this.each(function() {
var thisE = $(this),
sliderID = thisE.attr('id'),
feedURL = settings.blogURL + '/feeds/posts/summary/' + (settings
.labelName.length == 0 ? "" : '-/' + settings.labelName.replace(/\,(\s+)?/g, "/"
)) + '?max-results=' + settings.maxItem + '&orderby=published' + '&alt=json-in-s

cript';
$.ajax({
type: 'GET',
url: feedURL,
async: false,
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
var entries = json.feed.entry || [],
skeleton, i, j, post, postTitle, imgUrl, newImgUrl, link
s, postUrl, imgTag, pTitle, item;
skeleton = "";
skeleton += '<div class="flexslider loading" style="max-widt
h:' + settings.imageWidth + 'px">';
skeleton += '<ul class="slides">';
for (i = 0; i < entries.length; ++i) {
post = entries[i];
postTitle = post.title.$t;
imgUrl = post.media$thumbnail ? post.media$thumbnail.url
: 'http://3.bp.blogspot.com/-sWtp_qRPNT8/UZYmQq5sAdI/AAAAAAAAEec/7YDbpK4Q6g8/s2
00-c/default+image.png';
newImgUrl = imgUrl.replace('s200-c', 'w' + settings.imag
eWidth + '-h' + settings.imageHeight + '-c');
links = post.link || [];
for (j = 0; j < links.length; ++j) {
if (links[j].rel == 'alternate') break;
}
postUrl = links[j].href;
imgTag = '<img src="' + newImgUrl + '" width="' + settin
gs.imageWidth + '" height="' + settings.imageHeight + '"/>';
pTitle = settings.showPostTitle ? '<p class="flex-captio
n' + (settings.postTitleStyle == "default" ? "" : ' ' + settings.postTitleStyle)
+ '"><span>' + postTitle + '</span></p>' : '';
item = '<a href="' + postUrl + '" target="_blank">' + im
gTag + pTitle + '</a>';
skeleton += '<li>' + item + '</li>';
}
skeleton += '</ul></div>';
skeleton += '<style type="text/css">#' + sliderID + ' .flexs
lider.loading {min-height:' + settings.imageHeight + 'px !important;}</style>';
thisE.append(skeleton);
}, // success function end
error: function(xhr, status, error) {
thisE.append('<div class="error"><p>No Result! Or Error Load
ing Feed</p></div');
}, // error function end
complete: function() {
// initialize the flexSlider
$('#' + sliderID + ' .flexslider').flexslider({
animation: settings.animation,

controlNav: settings.controlNav,
directionNav: settings.directionNav,
pauseOnHover: settings.pauseOnHover,
slideshowSpeed: settings.slideshowSpeed,
animationSpeed: settings.animationSpeed,
animationLoop: settings.animationLoop
});
// when all images loaded; reset the slider to 'slide 0'
and hide the preloader
var sliderImages = $("#" + sliderID + ' .flexslider ul.s
lides li a img'),
index = 0;
// check if all images loaded..
sliderImages.on('load', function() {
index++;
if (index == sliderImages.length - 1) {
// Catch the flexslider context
var slider = $("#" + sliderID + ' .flexslider').
data("flexslider");
slider.animating = false; // Unset the animating
flag
slider.flexAnimate(0); // Move to the first slid
e
// hide the preloader
$("#" + sliderID + ' .flexslider').removeClass('
loading');
}
});
} // complete function end
});
});
};
})(jQuery);
//]]>
</script>
<--! End Coding Coding -->
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 p
age.
Well, just copy the code below and paste in a HTML Gadget or Post or Page
<--! Starting Code -->
<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#slider1").BloggerDynamicSlider({

imageWidth: 636,
imageHeight: 398,
maxItem: 6,
animation: "slide",
});
});
</script>
<--! End Code -->
STEP - 6: Save & Done! Pretty Simple & Dynamic.
Check these demos again and see their respective code below them to see what bdS
lider can provide, And build your very own slider :)
All the options of 'Blogger Dynamic Slider'
<--! Starting Code -->
$("#slider1").BloggerDynamicSlider({
blogURL: "", // Your Blog URL. example: "http://imagesliderforblogger.blogsp
ot.com"; Only need to specify when fetching slider content from another blog
labelName: "", // Show posts from specific Label. Specify a 'Label', or leav
e 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, "ove
rlayDark" 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/fals
e)
directionNav: true, // Previous/next navigation? (true/false)
pauseOnHover: false, // Pause slideshow when hovering over slider, then resu
me when no longer hovering (true/false)
slideshowSpeed: 7000, // Set the speed of the slideshow cycling, in millisec
onds
animationSpeed: 600, // Set the speed of animations, in milliseconds
animationLoop: true, // Should the animation loop? (true/false)
});
<--! Ending Code -->
## -- Opsi Slider 1-- ##
<--! Starting Code -->
<div id="slider1"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#slider1").BloggerDynamicSlider({
blogURL: "http://labelpost.blogspot.com/", // Your Blog URL. example: "h
ttp://imagesliderforblogger.blogspot.com"
});
});
</script>
<--! Ending Code -->
## -- Opsi Slider 2-- ##
<--! Starting Code -->
<div id="slider2"></div>
<script type="text/javascript">
$(document).ready(function() {

$("#slider2").BloggerDynamicSlider({
blogURL: "http://labelpost.blogspot.com/", // Your Blog URL. example: "h
ttp://imagesliderforblogger.blogspot.com"
labelName: "Demo Photo", // Show posts from specific Label. Specify a 'L
abel', or leave it empty to fetch from all recent posts
maxItem: 9, // Max number of Slider Posts to show
showPostTitle: true, // Show post title as Caption ? (true/false)
postTitleStyle: "overlayDark", // Select post title/caption style "defau
lt, "overlayDark" or "overlayLight"
imageWidth: 704, // Image width in px value
imageHeight: 440, // Image height in px value
});
});
</script>
<--! Ending Code -->
## -- Opsi Slider 3-- ##
<--! Starting Code -->
<div id="slider3"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#slider3").BloggerDynamicSlider({
blogURL: "http://labelpost.blogspot.com/", // Your Blog URL. example: "h
ttp://imagesliderforblogger.blogspot.com"
labelName: "Delicious Cake", // 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: false, // Show post title as Caption ? (true/false)
imageWidth: 800, // Image width in px value
imageHeight: 500, // Image height in px value
animation: "slide", // Select your animation type, "fade" or "slide"
controlNav: false, // Navigation for paging control of each slide? (true
/false)
});
});
</script>
<--! Ending Code -->
## -- Opsi Slider 4-- ##
<--! Starting Code -->
<div id="first-slider"></div>
<div id="second-slider"></div>
<script type="text/javascript">
$(document).ready(function() {
// first-slider
$("#first-slider").BloggerDynamicSlider({
blogURL: "http://labelpost.blogspot.com/",
labelName: "Delicious Cake",
maxItem: 4,
showPostTitle: false,
animation: "slide",
});
// second-slider
$("#second-slider").BloggerDynamicSlider({
blogURL: "http://labelpost.blogspot.com/",
labelName: "Demo Photo",
maxItem: 7,
showPostTitle: true,

animation: "fade",
postTitleStyle: "overlayLight",
imageWidth: 800,
imageHeight: 500,
});
});
</script>
<--! Ending Code -->