Home Scripts Responsive Image slider HTML code for blogger post

Responsive Image slider HTML code for blogger post

March 27, 2022

Learn How to add image slider in blogger post from any blogger image slider code. I will be providing the Top 3 Simple and easy to use Image slider HTML code for blogger post. Nowadays, many bloggers are using the Responsive Slideshow Widget in the blogger website to improve their content quality.

In WordPress, there are many plugins available but for bloggers to add image slideshow in blog posts, we need to use slider widget HTML code in the template.

For someone like me at the beginning, it was difficult to find any good and responsive image slider to add to the blog post. But once I got that and a simple way to add in blogger post I am here to share with you. So In this article, we will learn how to add an image slider on blogger.

responsive image slider html code for blogger
responsive image slider html code for blogger


So like always before we start, let us know some more details related to the responsive slider for blogger.

You can also check our CSS Neumorphic Social Media Buttons design to your website. 

What is blogger image slider code?

An Image Sliders show one image at a time and images change when visitors click to see the next slide, or it can changes automatically after a few seconds. It is basically an image slideshow created using HTML, CSS, and JavaScript code.

Instead of adding images one after another, we can use an image slider in blogger posts. It will reduce loading time by loading only a single image at the instance and the next image will be loaded afterward.

It is not that difficult to use and make Image slider HTML code for blogger posts. So let's now jump to our main part of the article i.e How can I add a slider image in Blogger?

How to add image slider in blogger post

In the blogger image slider we need to image slideshow in your blogger, so need some images for the slideshow, and you need to add HTML, CSS, and JavaScript codes for it.

So let's start.

Blogger Image slider depends on the jQuery plugin. So first you need to check in your blog template code using the jQuery plugin or not. To check go to the template section click on the HTML button, blog template source code is open.

Now CTRL+F search for jquery, If you get jQuery CDN JS file (jquery.min.js or jquery.js) then Ignore else add script just above </head> end tag.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>

Make sure first, backup your template.

Add Image slider in blogger

Now, I provided 3 Image slider HTML code for blogger so you can use any of them. And to Make an Image Slider in Blogger post just add CSS, HTML, and then JavaScript in the website template and HTML in blog post/page.

  1. Copy Image Slider CSS code from the below section and paste it into the head tag.
  2. Now, Copy JavaScript code and add it just above the end of the </body> tag.
  3. Finally, add blogger image slider code to blog page or post.

That's it, you can try all one by one and use the best one as per your need and website design.

Image slider HTML code for blogger

Blogger image slider code is here, So finally time to share my 3 simple and responsive image sliders for bloggers.

Responsive slider for blogger

We are using the BxSlider plugin, To add the slider widget HTML code in blogger. You first need to add this code in your template right before the </head> end tag.

<link rel="stylesheet" href="http://bxslider.com/lib/jquery.bxslider.css" type="text/css" />

In the next part, the CSS styling code right before  </head>.

Simple CSS code

<style>
 .bxslider img{
width:100%;
height:400px;
}
.bx-wrapper img {
display: inline !important;
}
</style>

Advanced CSS Code



/**
 * BxSlider v4.1.2 - Fully loaded, responsive content slider
 * http://bxslider.com
 *
 * Written by: Steven Wanderski, 2014
 * http://stevenwanderski.com
 * (while drinking Belgian ales and listening to jazz)
 *
 * CEO and founder of bxCreative, LTD
 * http://bxcreative.com
 */
/** RESET AND LAYOUT
===================================*/
.bx-wrapper {
position: relative;
margin: 0 auto 60px;
padding: 0;
*zoom: 1;
}
.bx-wrapper img {
max-width: 100%;
display: block;
}
/** THEME
===================================*/
.bx-wrapper .bx-viewport {
-moz-box-shadow: 0 0 5px #ccc;
-webkit-box-shadow: 0 0 5px #ccc;
box-shadow: 0 0 5px #ccc;
border:  5px solid #fff;
left: -5px;
background: #fff;
/*fix other elements on the page moving (on Chrome)*/
-webkit-transform: translatez(0);
-moz-transform: translatez(0);
    -ms-transform: translatez(0);
    -o-transform: translatez(0);
    transform: translatez(0);
}
.bx-wrapper .bx-pager,
.bx-wrapper .bx-controls-auto {
position: absolute;
bottom: -30px;
width: 100%;
}
/* LOADER */
.bx-wrapper .bx-loading {
min-height: 50px;
background: url(images/bx_loader.gif) center center no-repeat #fff;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 2000;
}
/* PAGER */
.bx-wrapper .bx-pager {
text-align: center;
font-size: .85em;
font-family: Arial;
font-weight: bold;
color: #666;
padding-top: 20px;
}
.bx-wrapper .bx-pager .bx-pager-item,
.bx-wrapper .bx-controls-auto .bx-controls-auto-item {
display: inline-block;
*zoom: 1;
*display: inline;
}
.bx-wrapper .bx-pager.bx-default-pager a {
background: #666;
text-indent: -9999px;
display: block;
width: 10px;
height: 10px;
margin: 0 5px;
outline: 0;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}
.bx-wrapper .bx-pager.bx-default-pager a:hover,
.bx-wrapper .bx-pager.bx-default-pager a.active {
background: #000;
}
/* DIRECTION CONTROLS (NEXT / PREV) */
.bx-wrapper .bx-prev {
left: 10px;
background: url(images/controls.png) no-repeat 0 -32px;
}
.bx-wrapper .bx-next {
right: 10px;
background: url(images/controls.png) no-repeat -43px -32px;
}
.bx-wrapper .bx-prev:hover {
background-position: 0 0;
}
.bx-wrapper .bx-next:hover {
background-position: -43px 0;
}
.bx-wrapper .bx-controls-direction a {
position: absolute;
top: 50%;
margin-top: -16px;
outline: 0;
width: 32px;
height: 32px;
text-indent: -9999px;
z-index: 9999;
}
.bx-wrapper .bx-controls-direction a.disabled {
display: none;
}
/* AUTO CONTROLS (START / STOP) */
.bx-wrapper .bx-controls-auto {
text-align: center;
}
.bx-wrapper .bx-controls-auto .bx-start {
display: block;
text-indent: -9999px;
width: 10px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -11px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-start:hover,
.bx-wrapper .bx-controls-auto .bx-start.active {
background-position: -86px 0;
}
.bx-wrapper .bx-controls-auto .bx-stop {
display: block;
text-indent: -9999px;
width: 9px;
height: 11px;
outline: 0;
background: url(images/controls.png) -86px -44px no-repeat;
margin: 0 3px;
}
.bx-wrapper .bx-controls-auto .bx-stop:hover,
.bx-wrapper .bx-controls-auto .bx-stop.active {
background-position: -86px -33px;
}
/* PAGER WITH AUTO-CONTROLS HYBRID LAYOUT */
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-pager {
text-align: left;
width: 80%;
}
.bx-wrapper .bx-controls.bx-has-controls-auto.bx-has-pager .bx-controls-auto {
right: 0;
width: 35px;
}
/* IMAGE CAPTIONS */
.bx-wrapper .bx-caption {
position: absolute;
bottom: 0;
left: 0;
background: #666\9;
background: rgba(80, 80, 80, 0.75);
width: 100%;
}
.bx-wrapper .bx-caption span {
color: #fff;
font-family: Arial;
display: block;
font-size: .85em;
padding: 10px;
}

Note: You can adjust the height and width as you want.

Paste JavaScript code before end of the </body> tag.

<script src="http://bxslider.com/lib/jquery.bxslider.js"></script>
<script>
    $(document).ready(function() {
        $('.bxslider').bxSlider({
            auto: true,
            pause: 50000,
 // in millisecond
            autoHover: true, // pause on hover
            autoControls: true,
            captions: false
        });
    });
</script>

You can also control the image slider properties like an auto slide and more from the below options.

  • auto: true means slider automatically slides when the page load.
  • autoControls: true means to navigate the slide back and forth enable. You disable this by replacing true to false.
  • Pause: Time between the slider transition in milliseconds.
  • autoHover: Pause on mouse hover.

Now you need to add images to your slider and use them on blog posts.

To add the slider add this code in your post. Add a new post or open Your old post click on the HTML view and the given code.

<ul class="bxslider">
<li><img src="ImageURL1" title='CaptionGoesHere' /></li>
<li><img src="ImageURL2" title='CaptionGoesHere' /></li>
<li><img src="ImageURL3" title='CaptionGoesHere' /></li>
<li><img src="ImageURL4" title='CaptionGoesHere' /></li>
</ul>

Don't forget to replace image URLs. If you want your slider image to be clickable you need to add <a> tag in the above code for example

<li><a href=“Your LINK"><img src=“IMAGE URL” alt=“ALT TEXT GOES HERE" /></a></li>

Finally, you can see the image slider in the blogger post, if you properly added and followed all steps carefully.

If you are facing any issues then please comment down so we can update or help on the same.

You may also like the 404 error page HTML template download

Don't like it, Don't worry We have more for you.

Responsive Image Slider carousel in the blog post

Many bloggers are searching for How do I add an image to a carousel in Blogger? So if you are among them, then this is for you.

Use below Pure CSS Image slider without jQuery plugin. Yes! create an image slider using CSS only. But the only thing we need here is a Font-awesome CSS that almost every website already using it. So now let's check the image slider HTML code.

Responsive image slider HTML code



<!--Slider-->
<div id="slider">  
  <div class="slide" style="background:dodgerBlue;">
    <img src="https://img.fotocommunity.com/peacefull-95e65145-d050-4957-9ddc-85dd60689d45.jpg?height=500" >
  </div>
  
  <div class="slide" style="background:coral;">
     <img src="https://render.fineartamerica.com/images/images-profile-flow/400/images/artworkimages/mediumlarge/2/sunset-storm-haystack-rock-canon-beach-oregon-coast-tl-mair.jpg" >
  </div>
 
  <div class="slide" style="background:crimson;">
    <img src=" https://render.fineartamerica.com/images/images-profile-flow/400/images-medium-large-5/1-tourists-at-eiffel-tower-paris-panoramic-images.jpg" >
  </div>
  
  <div class="slide" style="background: #6edf10;">
    <img src="https://dmasia.travel/wp-content/uploads/2019/09/vit3-1000x350.jpg" >
  </div>
  
  <!--Controlling arrows-->
  <span class="controls" onclick="prevSlide(-1)" id="left-arrow"><i class="fa fa-arrow-left" aria-hidden="true"></i>
</span>
  <span class="controls" id="right-arrow" onclick="nextSlide(1)"><i class="fa fa-arrow-right" aria-hidden="true"></i>
</span>
</div>
  <div id="dots-con">
 <span class="dot"></span><span class="dot"></span><span class="dot"></span><span class="dot"></span>
 </div>

CSS Slider Design



<!-- Image slider code Design 2 - If your website already using below css then remove it -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />

<style>

body{
  background:#e6e6e6;
}
#slider{
  width:80%;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  box-shadow:2px 5px 10px rgba(0,0,0,0.4);;
}

.slide{
  width:100%;
  
  display:none;
  animation-name:fade;
  animation-duration:1s;
  
}
img{
 width:100%; 
}
@keyframes fade{
  from{opacity:0.5;}
  to{opacity:1;}
}

.controls{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  font-size:1.5em;
  padding:15px 10px;
  border-radius:5px;
  
}

.controls:hover{
  background:white;
  transition:0.3s;
}

.controls:active{
  color:grey;
}

#left-arrow{
  left:10px;
}

#right-arrow{
  right:10px;
}

#dots-con{
  
  text-align:center;
}
.dot{
  display:inline-block;
  background:grey;
  padding:8px;
  border-radius:50%;
  margin:10px 5px;
}

.active{
  background:crimson;
}

@media (max-width:576px){
  #slider{width:100%;
  
  }
  
  .controls{
    font-size:1em;
  }
  
  #dots-con{
    display:none;
  }
}
</style>

JavaScript Image slider code



<script>
var slides = document.querySelectorAll(".slide");
var dots = document.querySelectorAll(".dot");
var index = 0;


function prevSlide(n){
  index+=n;
  console.log("prevSlide is called");
  changeSlide();
}

function nextSlide(n){
  index+=n;
  changeSlide();
}

changeSlide();

function changeSlide(){
    
  if(index>slides.length-1)
    index=0;
  
  if(index<0)
    index=slides.length-1;
  
  
  
    for(let i=0;i<slides.length;i++){
      slides[i].style.display = "none";
      
      dots[i].classList.remove("active");
      
      
    }
    
    slides[index].style.display = "block";
    dots[index].classList.add("active");

  

}



</script>

Great! now you can create a slideshow in blogger post or page or in the sidebar, You can use this as an image slider gadget in the sidebar and let me know if this worked in your website.

Create Image slideshow on Blogger

Advanced animation image slider HTML code is here, you can create an animation image slideshow on your website.

You should try below image slideshow HTML code for bloggers on your website.

Blogger Slideshow HTML code



<svg id='example' viewBox='0 0 100 100'>
    <defs>
        <mask id='mask-1' x='0' y='0' width='100' height='100'>
            <rect class='part' x='0' y='0'  width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='10' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='20' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='30' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='40' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='50' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='60' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='70' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='80' width='0' height='10.2' fill='#fff' />
            <rect class='part' x='0' y='90' width='0' height='10.2' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
        <mask id='mask-2' x='0' y='0' width='100' height='100'>
            <rect class='part' x='0'  y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='10' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='20' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='30' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='40' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='50' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='60' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='70' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='80' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='part' x='90' y='0' width='10.2' height='0' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
        <mask id='mask-3' x='0' y='0' width='100' height='100'>
            <rect class='part' x='100' y='0'  width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='10' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='20' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='30' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='40' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='50' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='60' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='70' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='80' width='100' height='10.2' fill='#fff' />
            <rect class='part' x='100' y='90' width='100' height='10.2' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
        <mask id='mask-4' x='0' y='0' width='100' height='100'>
            <rect class='part' x='0'  y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='10' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='20' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='30' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='40' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='50' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='60' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='70' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='80' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='part' x='90' y='100' width='10.2' height='100' fill='#fff' />
            <rect class='full' x='0' y='0' width='100' height='100' fill='#fff' opacity='0' />
        </mask>
    </defs>
    <image width='100' height='100' xlink:href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj0gRlZhQ9uspcQyf_ae0-2HMiiblB_HYNtScHeolOMSNbQgIMRUuqNOicz3lrcVVS5UkCMclQQNLEDxRdrpBP5j2E6JB5rDH39zB4MnjfBj9nU6CdptOFh3kLd708cDQo6EFaO7NlJmNM/s0/unPlug-Demo-Style-3-1.webp' />
    <image width='100' height='100' xlink:href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_xps8UfMDvGbXpeoJQtl-OaTUsHEkXzVlDgpOelSgvDTx_kzz_AidAZ9DO8jhV9wtiR9cCAEMJPmcTFxUG9FyVyil5gKdmL0Shn7Ri71fW7pvX13swZ3DoDyMqxsmqbTUFogmvpB117Y/s0/unPlug-Demo-Style-3-2.webp' mask='url(#mask-1)' />
    <image width='100' height='100' xlink:href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiGo4cQytQKt_hGSi37tXl6kUSWTFGkkWqrQ1DpfQgmTHwXMEUjrWaEAwReqmAUNpg6dTdvexF-X8jxLI9v6P5mZoGaIghH_ZMUrQTRDj8N8Th_ukJ-poeueCuJGstZFz6a3uYgdU0HhL8/s0/unPlug-Demo-Style-3-3.webp' mask='url(#mask-2)' />
    <image width='100' height='100' xlink:href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgqoQ-AgUvC6NPbIzEw_k7BK9YxkNDDr_gsThj0U2yH7iI7IU6VWI8yuA_ZvSri7RMLRbqw4-jCUBgO0gbLO9iYVS14c3SftrCLAg_zMq_-gGZDvUewUFeApWJjEnFGYlCdLQWu80DqOaA/s0/unPlug-Demo-Style-3-4.webp' mask='url(#mask-3)' />
    <image width='100' height='100' xlink:href='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEguqh09gXfxz5HzVZmUdCGkwXKyJPdVLUh7BKQYpeDApab27lU1v5GIvg_g-AOmPLTq6y6AnGO0gd6ABZDFnaY1_iT8b6Oug_fKehScjN9uXjz2tFUocpGrloNKul8QIg__E3E7KKYfFB0/s0/unPlug-Demo-Style-3-5.webp' mask='url(#mask-4)'/>
</svg>

CSS3 Animation Image slider



<style type="text/css">
#example{display:block;margin:5vmin auto;width:90vmin;box-shadow:0 0 20px rgba(0,0,0,.5);}svg{height:auto;}
</style>

Animation image slideshow for blogger



<script src='https://cdnjs.cloudflare.com/ajax/libs/animejs/2.2.0/anime.min.js'></script>
<script>
let timeline=anime.timeline({loop:!0});timeline.add({targets:"#mask-1 .part",width:100,easing:"easeInOutQuad",delay:function(a,t,e){return 700*Math.random()}}).add({targets:"#mask-2 .part",height:100,easing:"easeInOutQuad",delay:function(a,t,e){return 700*Math.random()}}).add({targets:"#mask-3 .part",x:0,easing:"easeInOutQuad",delay:function(a,t,e){return 700*Math.random()}}).add({targets:"#mask-4 .part",y:0,easing:"easeInOutQuad",delay:function(a,t,e){return 700*Math.random()}});
</script>

That's it - Congrats on adding an amazing and animated image carousel in blogger or image slideshow into the post.

Do you want to add more buttons like download button HTML code for blogger 

Now time for a conclusion Right!

In conclusion of Responsive Image slider HTML code for blogger post

I hope you have understood all steps and learned to add an image slider in blogger. If you’re a beginner and you have basic knowledge of HTML & CSS only then also try to customize and make your blogger slideshow more attractive.

If you have any difficulty or want more such CSS design then please comment down.

See you in a new blog post.

Next, Want to increase website speed know about Minify CSS and JavaScript in Blogger

We are providing you with many amazing scripts and tutorials for free, So please follow us on YouTube Channel to get all updates and more useful content.

Thanks for Visiting: Follow by Email and Bookmark Our Technical Arp Website for more such useful scripts.

Read more:

add FAQ accordion in blogger

Add Table of Content in Blogger

YouTube video downloader script

Love calculator script for blogger

Decimal to Binary Converter Tool


Also Read

Next
« Prev Post
Previous
Next Post »

1 comments:

Click here for comments
TACK FORCE
admin
30 January 2023 at 22:30 ×

nn

Congrats TACK FORCE you are first to comment...! hehehehe...
Reply
avatar
Subscribe to: Post Comments (Atom)