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.


I like blogging as much as I like coding and designing though not more than traveling.
If I'm not here publishing stuff then you will find me researching about SEO and marketing.
Love to meet new people and try to help every person.
Find me interesting or have any issue?
Shoot a message and I'll be with you.

8 comments:

  1. Replies
    1. Hey there,

      Please leave me a message with proper details through contact page so that I can help you better.


      Thanks

      Delete
  2. What is the image size work best for this?

    ReplyDelete
  3. Hi!

    It works partially for me. It seems my image is too large for the box. What jpg image size
    will fit in the box.

    Thanks once again.

    ReplyDelete
  4. this tutorial are also working... THANKS For Sharing your good information with us

    ReplyDelete
  5. this tutorial are also working... THANKS For Sharing your good information with us

    ReplyDelete
  6. Didn't work with me.
    The article linked below is working with me but has no auto slide
    https://www.tutesinside.net/2016/04/make-slideshow-in-blogger.html

    ReplyDelete

Don't forget to check 'Notify me' box to get notification of reply.