How to Make Image and Video Slideshows in Blogger Posts New Tips

Hello friends, this time I will tell about How to Create Automatic Slideshow Images in Blogger Posts with the script code provided in this article.

By making a photo slideshow on the post it will beautify the appearance of the article, the image is not messy everywhere. Anyway, very pleasing to the eye and easy to understand the end. 

There are several reasons for making Slideshow Images in Posts such as not using too much page space in article postings in a more concise sense and very comfortable to understand the contents of the article. 

Now you know the uses and benefits of making slideshow images on blog posts. If you are interested in making the image slideshow method in the post, please refer to the steps below.

How to Create Slideshow Images in Blogger Posts

Step 1 :- First of all you need to Login with your blogger account.

Step 2;- Then Go to Theme Section.

Step 3 :- Now Click on Edit HTML.

Step 4 :- After That Copy the Code Given Below And Paste it above the  ]]></b:skin>in Blogger Theme.

.carousel-cell { 
 width: 100%; 
 height: 200px; 
 margin-right: 10px; 
 background: #8C8; 
 border-radius: 5px; 
 counter-increment: carousel-cell; 
} 
.carousel-cell img{ 
 width: 100%; 
 height: 100%; 
 padding: 0px; 
 margin: 0px; 
 overflow: hidden; 
} 
.caraousel-cell iframe{ 
 width: 100%; 
 height: 200px; 
 padding: 0px; 
 margin: 0px; 
} 
.carousel-cell.is-selected iframe { 
 width: 100%; 
 height: 200px; 
} 
.flickity-viewport { 
 overflow: hidden; 
 position: relative; 
 height: 200px!Important; 
} 
.flickity-page-dots { 
 bottom: -22px; 
} 
.flickity-page-dots .dot { 
 height: 4px; 
 width: 40px; 
 margin: 0; 
 border-radius: 0; 
} 
.flickity-button { 
 background: #333; 
 color: white; 
} 
.flickity-button:hover { 
 background: #F90; 
} 
.flickity-prev-next-button { 
 width: 30px; 
 height: 30px; 
 border-radius: 5px; 
} 
@media screen and(max-width:640px){ 
.flickity-viewport { 
 overflow: hidden; 
 position: relative; 
 max-height: 200px!Important; 
} 
.carousel-cell{ 
 height: 200px!Important; 
} 
iframe.slider{ 
 width:100%; 
 height:100%; 
} 
.carousel-cell img { 
 height: 200px; 
}}

Step 5 :- After That Copy given code and paste it above the </head> tag. Then save Your Template.

<link href='https://unpkg.com/[email protected]/dist/flickity.min.css' rel='stylesheet'/> 
 <script src='https://unpkg.com/[email protected]/dist/flickity.pkgd.min.js'/>

Step 6 :- Next, enter the code below on the page or post. Change to HTML mode.

<div class="carousel" data-flickity=""> 
  <div class="carousel-cell"> 
    <img 
      alt="slideshow1" 
       src="#" 
      title="slideshow1" 
    /> 
  </div> 
  <div class="carousel-cell"> 
    <img 
      alt="slideshow2" 
       src="#" 
      title="slideshow" 
    /> 
  </div> 
  <div class="carousel-cell"> 
    <iframe 
       allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
      allowfullscreen="" 
      class="slider" 
      frameborder="0" 
       src="https://www.youtube.com/embed/BHiMYGRBhhs" 
    ></iframe> 
  </div> 
</div>

Note:- 

1. Red color hash mark fill with image URL. 

2. Change the YouTube URL according to your wishes.

Conclusion

That's how to make a slideshow of images in blogger posts. Applying this will help save on article pages when uploading a lot of images. Hopefully this tutorial can be useful for all. Thank you for visiting us.

Go to Link

Rate This Article

Thanks for reading: How to Make Image and Video Slideshows in Blogger Posts New Tips:)

Conclusion

In this article, I have shared How to Make Image and Video Slideshows in Blogger Posts New Tips. I hope you have liked it Please do share it with your friends and follow our blog for more.

Join our Telegram Channel to get the lastest posts updates daily. Thank you!