Responsive Header/Footer Slider For Blogger

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

Responsive Header/Footer Slider For Blogger

Features

Easy to install

Responsive which makes it look good on mobile devices too

Easy to customize

Many styles

So let's start

• 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 onetransPeriod: 1200, // length of the sliding effect in millisecondsthumbnails: false, // thumnails & tooltip is controlled by itpagination: true, // only when "pagination" is set to "false" thumbnails will be visiblefx: '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 effectshover: false, // Pause on hoverheight: '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

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 onetransPeriod: 1200, // length of the sliding effect in millisecondsthumbnails: false, // thumnails & tooltip is controlled by itpagination: true, // only when "pagination" is set to "false" thumbnails will be visiblefx: '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 effectshover: false, // Pause on hoverheight: '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.