Responsive Header/Footer Slider For Blogger

A slider is useful when you want to show some pictures on your blog. There are many web slider websites offering slider widgets but the problem with those widgets is that they have a watermark on it that you can't remove.

And in blogger, there is no widget that can be used to showcase your photos on your blog. This is the reason bloggers search for photo slider. Some of them don't care if the slider has a watermark or not. So here I'm posting a tutorial on how to make your own slider on blogger.

This slider is very easy to install and you would not face a single issue if you follow all the steps carefully.

For those who are looking for something similar, I have some other sliders here for you:-

Make slideshow in Blogger

Easy CSS slider for blogger

Click here if you want to install slider in post on Blogger

Features

Easy to install
Responsive which makes it look good on mobile devices too
Easy to customize
Many styles

So let's start

Steps to follow

Open blogger
Go to 'Layout' and click on 'Add a gadget' and choose 'HTML/Javascript' gadget
Copy this paste this code in that gadget

<!--  Camera_Slideshow Styles  -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
transPeriod: 1200, // length of the sliding effect in milliseconds
thumbnails: false, // thumnails & tooltip is controlled by it
pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
hover: false, // Pause on hover
height: '50%' // slideshow height (50% is default)
});
});
</script>
<style type="text/css">
.fluid_container {
margin: 0 auto;
/* aling centered */
width: 100%;
max-width: 900px;
overflow: hidden;
}

/* Blogger CSS Conflict Fix */
.camera_pag_ul {
border: none !important;
background: none !important;
}
.camera_pag_ul li {
float: inherit !important;
padding: inherit !important;
}
.camera_pag_ul {
margin: 0 !important;
border: 0 !important;
}
</style>
<div class="fluid_container">
<!-- camera_slideshow camera_wrap-->
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
</div>
<!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

Now save gadget and you're done.

Customise

To change images, thumbnails and link. Please change the settings in the highlighted area. I'd suggest you to use similar size images.

<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="IMAGE LINK HERE">

Your link here:- This is the link which will redirect user when clicked on any image
Image link here:- This is the link of image that will appear on your blog
Caption:- The text that will appear on images

http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg:- This is thumbnail by default thumbnails are not going to appear but if you want you can change settings and change the thumbnails with your thumbnails. Please don't play with this if you don't have basic HTML knowledge.

Thumbnails settings can be changed by changing the code in red color above.

To install gadget in post or page

Open blogger
Make/edit a new post or page
Copy this code and paste in HTML mode

<div class="fluid_container">
<!-- camera_slideshow camera_wrap-->
<div class="camera_wrap" id="camera_wrap_1">
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/1.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/2.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/3.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/4.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
<div data-link="YOUR LINK HERE" data-thumb="http://project.dimpost.com/camera-slideshow/images/slides/thumbs/5.jpg" data-src="IMAGE LINK HERE">
<div class="camera_caption fadeFromBottom">
Caption</div>
</div>
</div>
<!-- #camera_wrap_1 -->
</div>
<!-- .fluid_container -->

Now go to 'Layout' and click on 'Add a gadget' and choose 'HTML/Javascript' gadget
Paste this code in that gadget and click 'Save'

<!--  Camera_Slideshow Styles  -->
<link rel='stylesheet' id='camera-css' href='http://project.dimpost.com/camera-slideshow/css/camera.css' type='text/css' media='all'>
<!-- Camera Slideshow Scripts -->
<script type='text/javascript' src='https://code.jquery.com/jquery-2.1.4.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/jquery.mobile.customized.min.js'></script>
<script type='text/javascript' src='http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js'></script>
<script type='text/javascript' src='http://project.dimpost.com/camera-slideshow/scripts/camera.min.js'></script>
<script type='text/javascript'>
jQuery(function() {
jQuery('#camera_wrap_1').camera({
time: 2500, // milliseconds between the end of the sliding effect and the start of the nex one
transPeriod: 1200, // length of the sliding effect in milliseconds
thumbnails: false, // thumnails & tooltip is controlled by it
pagination: true, // only when "pagination" is set to "false" thumbnails will be visible
fx: 'curtainTopLeft, curtainTopRight, curtainBottomLeft, curtainBottomRight, curtainSliceLeft, curtainSliceRight, blindCurtainTopLeft, blindCurtainTopRight, blindCurtainBottomLeft, blindCurtainBottomRight, blindCurtainSliceBottom, blindCurtainSliceTop, stampede, mosaic, mosaicReverse, mosaicRandom, mosaicSpiral, mosaicSpiralReverse, topLeftBottomRight, bottomRightTopLeft, bottomLeftTopRight, bottomLeftTopRight, scrollLeft, scrollRight, scrollHorz, scrollBottom, scrollTop', // transition effects
hover: false, // Pause on hover
height: '50%' // slideshow height (50% is default)
});
});
</script>
<style type="text/css">
.fluid_container {
margin: 0 auto;
/* aling centered */
width: 100%;
max-width: 900px;
overflow: hidden;
}

/* Blogger CSS Conflict Fix */
.camera_pag_ul {
border: none !important;
background: none !important;
}
.camera_pag_ul li {
float: inherit !important;
padding: inherit !important;
}
.camera_pag_ul {
margin: 0 !important;
border: 0 !important;
}
</style>

The slider is automatic and you don't have to worry about responsiveness as it is mobile friendly.
Feel free to ask me any question or drop your suggestion with the help of comment box below.