Responsive Header/Footer Slider For Blogger

Responsive Header/Footer Slider For Blogger

A slider is useful when you lot desire to demo roughly pictures on your blog. There are many spider web slider websites offering slider widgets only the job amongst those widgets is that they bring a watermark on it that you lot can't remove.

And inwards blogger, at that topographic point is no widget that tin endure used to showcase your photos on your blog. This is the argue bloggers search for photograph slider. Some of them don't tending if the slider has a watermark or not. So hither I'm posting a tutorial on how to brand your ain slider on blogger.

This slider is really slow to install too you lot would non human face upwardly a unmarried number if you lot follow all the steps carefully.

For those who are looking for something similar, I bring another sliders hither for you:-

Make slideshow inwards Blogger

Easy CSS slider for blogger

Click hither if you lot desire to install slider inwards post service on Blogger

Responsive Header/Footer Slider For Blogger

Features

Easy to install

Responsive which makes it await practiced on mobile devices too

Easy to customize

Many styles

So let's start

• Open blogger
• Go to 'Layout' too click on 'Add a gadget' too select 'HTML/Javascript' gadget
• Copy this glue this code inwards 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 betwixt the cease of the sliding outcome too the commencement of the nex onetransPeriod: 1200, // length of the sliding outcome inwards millisecondsthumbnails: false, // thumnails & tooltip is controlled past times itpagination: true, // exclusively when "pagination" is laid upwardly to "false" thumbnails volition endure 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 exceed (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 salvage gadget too you're done.

Customise

To alter images, thumbnails too link. Please alter the settings inwards the highlighted area. I'd propose you lot to work like 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 volition redirect user when clicked on whatever image
Image link here:- This is the link of prototype that volition appear on your blog
Caption:- The text that volition appear on images

To install gadget inwards post service or page

• Open blogger
• Make/edit a novel post service or page
• Copy this code too glue inwards 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 become to 'Layout' too click on 'Add a gadget' too select 'HTML/Javascript' gadget
Paste this code inwards that gadget too 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 betwixt the cease of the sliding outcome too the commencement of the nex onetransPeriod: 1200, // length of the sliding outcome inwards millisecondsthumbnails: false, // thumnails & tooltip is controlled past times itpagination: true, // exclusively when "pagination" is laid upwardly to "false" thumbnails volition endure 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 exceed (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 too you lot don't bring to worry most responsiveness every bit it is mobile friendly.
Feel costless to inquire me whatever inquiry or drib your proffer amongst the assistance of comment box below.

Share this post