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() {
$('.bxslider').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