FREE AND RESPONSIVE SLIDE SHOW HTML CODE FOR BLOG POSTS IN BLOGGER

I want a completely free and responsive slide show widget for my blog post? If this is your question, then you are in the right place.

The present post gives you a step by step procedure to insert a free slide show code into your blogger.

You can use this code as a widget or can paste it in any blog post at any place. It is completely responsive and free to use.

Here are a few steps for inserting the slide show code in blogger.

STEP 1: Copy the below code.

[<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css” integrity=”sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T” crossorigin=”anonymous”/>]

  1. Open your blogger.
  2. Select themes.
  3. Click on edit HTML.
  4. Press “CTRL+F”.
  5. A search box will open in the code block.
  6. Type “</head>
  7. Paste the code just above </head>
  8. Click save

STEP 2: Copy the below code.

[<script src=”https://code.jquery.com/jquery-3.3.1.slim.min.js” integrity=”sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo” crossorigin=”anonymous”></script>

<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js” integrity=”sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1″ crossorigin=”anonymous”></script>

<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js” integrity=”sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM” crossorigin=”anonymous”></script>]

  1. Open your blogger.
  2. Select themes.
  3. Click on edit HTML.
  4. Press “CTRL+F”.
  5. A search box will open in the code block.
  6. Type “</body>
  7. Paste the code just above </body>
  8. Click save.

By now, the skeletal part of your slide show has taken shape.

STEP 3: Copy the below code

[<div id=”carouselExampleFade” class=”carousel slide carousel-fade” data-ride=”carousel”>

<div class=”carousel-inner”>

<div class=”carousel-item active”>

<img src=”IMAGE1 URL” class=”d-block w-100″ alt=”…”>

</div>

<div class=”carousel-item”>

<img src=”IMAGE2 URL” class=”d-block w-100″ alt=”…”>

</div>

<div class=”carousel-item”>

<img src=”IMAGE 3 URL” class=”d-block w-100″ alt=”…”>

</div>

</div>

<a class=”carousel-control-prev” href=”#carouselExampleFade” role=”button” data-slide=”prev”>

<span class=”carousel-control-prev-icon” aria-hidden=”true”></span>

<span class=”sr-only”>Previous</span>

</a>

<a class=”carousel-control-next” href=”#carouselExampleFade” role=”button” data-slide=”next”>

<span class=”carousel-control-next-icon” aria-hidden=”true”></span>

<span class=”sr-only”>Next</span>

</a>

</div>]

  1. Open your blog post [new/old post].
  2. Click the HTML version.
  3. Paste the code in your blog post [PASTE IT IN HTML FORM] in any place.
  4. The “IMAGE 1 URL, IMAGE 2 URL, IMAGE3 URL”, has to be replaced with your image URLs intended to display on the slide show.
  5. Click on save/update.
That’s it!
Your slideshow is completed. Enjoy it in 

Radix
Follow me on

2 thoughts on “FREE AND RESPONSIVE SLIDE SHOW HTML CODE FOR BLOG POSTS IN BLOGGER”

  1. Excellent weblog here! Additionally your site so much up very fast!
    What host are you using? Can I get your associate link for your host?
    I desire my site loaded up as quickly as yours lol

Leave a Comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.