Beranda
Blogger
Css

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/flickity@2/dist/flickity.min.css' rel='stylesheet'/> 
 <script src='https://unpkg.com/flickity@2/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.

Posting Komentar