Follow Me On Google News Follow Now!

How to Make Image and Video Slideshows in Blogger Posts

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.

Getting Info...

About the Author

Hello Friends, My Name is Jeeshan and Welcome To Our Website. My Passion is to Share Knowledge With Everyone. So in This Blog We Do Share Amazing Content Related To Blogger, Blogger Tips, Adsense etc.

إرسال تعليق

Cookie Consent
We serve cookies on this site to analyze traffic, remember your preferences, and optimize your experience.
Oops!
It seems there is something wrong with your internet connection. Please connect to the internet and start browsing again.
AdBlock Detected!
We have detected that you are using adblocking plugin in your browser.
The revenue we earn by the advertisements is used to manage this website, we request you to whitelist our website in your adblocking plugin.
Site is Blocked
Sorry! This site is not available in your country.