-->

Feb 22, 2019

How to add Image and Video Slider in blogger

Slideshow is a design feature that allows you showcase images, video and other content more effectively in a confined space on your blogger blog. For example, you might use a slideshow on your homepage to promote products and holiday sales (if you run an eCommerce store), or a smaller slider on your “About” page to display customer or client testimonials. Whether you want a simple image slideshow, a full screen video slideshow, or a stunning slideshow with a mix of photography and video for added visual impact, this slideshows can be customized exactly how you like. See demo below.



How to add Image and Video Slider  in blogger blog posts

Slideshow have become more important on the blogger blog and for good reason. They are simple to set up, can be customized however you like, and allow you to showcase your most important content more effectively in a small space.

Compatibility of the  the slider


The slider supports all video including the followings:

  • YouTube Videos
  • Daily motion videos 
  • Vimeo Videos and 
  • Google drive video  
  • Any HTML5 Videos

How to add Image Slider  in blogger


Step 1: Go to blogger dashboard lick on Templates from the left menu.

Step 2: Then, click on Edit HTML and you will be provided with the whole code of your blog including CSS Java Script and HTML in a large field.

Step 3: Search for <head> and paste the following line of code just below it.


<script src='//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js'></script>
<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css"/>


Step 4: Search for </head> and paste the following line of script just above it.



<script src='http://bxslider.com/lib/jquery.bxslider.js'/>
<script>
$(document).ready(function() {
$(&#39;.bxslider&#39;).bxSlider({
auto: true,
autoControls: true,
captions: true
});
});
</script>



Step 5: Add the following code just in place you want to add slider widgets.


<div class="bxslider">
<div><img src="ImageURL1" title='ImageCaption' /></div>
<div><img src="ImageURL2" title='ImageCaption' /></div>
<div><img src="ImageURL3" title='ImageCaption' /></div>
<div><img src="ImageURL4" title='ImageCaption' /></div>
</div>

Now you have install blogger image slider widgets. Replace the ImageURL with your image urls and thier captions with your image captions or titles.This code will create 4 slides if you wan to add more slides then add the following line just above </div/>.


<div><img src="ImageURL" title='ImageCaption' /></div>


Replace the ImageURL with your image urls and thier captions with your image captions or titles.

How to add Video Slider  in blogger

Video slider in blogger is one of the best tactics to attract your audience and insist them to take action on your blog spot blog. But, do you know how to make a video slider in blogger? If your answer is no then this is the correct place to know it. Do not go far i will show you here with the same steps with the above image slider tactics. Start from step Five (5) because all steps above step five are the same.

Also Read: How to add Popup Video players in blogger

Just add the following codes in place you want to add video sliders, commonly it should be appear on the to of our blog homepage. If you wan to add in any place of you blog, jut go a head.See demo below.



<div class="bxslider">
<div> <iframe width="100%" height="300" src="https://www.youtube.com/embed/ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
<div> <iframe width="100%" height="300" src="https://www.youtube.com/embed/ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
<div> <iframe width="100%" height="300" src="https://www.youtube.com/embed/ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
<div> <iframe width="100%" height="300" src="https://www.youtube.com/embed/ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></div>
</div>

Now you have installed blogger video slider widgets. Replace the youtube vide ID with your own  video ID from youtube.. This code will create 4 video slides if you wan to add more video slides then add the following line just above


<div><iframe width="100%" height="300" src="https://www.youtube.com/embed/ID" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe></div>

Replace the youtube Video ID with your own  video embed codes.

If You think You have found a mistake in the widgets or have any problems, questions about the widgets, please contact us оr can you ask your question in comments below.

Thanks for your time, I really hope that this post helped you with what you were looking for, come back later to check out more awesome posts and tutorials Concerning blogger widgets and templates.

Post a Comment