Download this Premium Blogger Template. Download now!

How to make a Slider Images for Blogger Posts

Hi TrickPk lover , in this article I will share how to make how to create image slider on blogger widget which you can use for an image in your blog.

This slider widget has general features, it's just that this widget is very light and only uses css and html. so this widget is very suitable for use on your blog.

How to make a slider image for blogger posts

How to make a Slider Images for Blogger Posts

This widget can be lightweight because it only relies on the right and left scroll effects. But this widget is not perfect because I only understand a little css and html, and if there is a problem or it is not responsive in desktop mode, please understand because I only made it using a smartphone because my laptop was broken.

What is the function of this widget?

This widget functions to hide images and requires the user to scroll right or left, that's all I know.

How to make?
  1. The first step is to login to your respective blogger account.

  2. The second step select the theme then click the three dots and click edit html.

  3. After that copy and paste the css code below just above the code ]]></b:skin> .

  4. /*css slider by TrickPk*/ .TrickPksliderIMG .slides {      display: flex;      white-space: nowrap;      width: 100%;      flex-direction: row;      overflow: auto;      scroll-behavior: smooth;      padding: 20px 0 0; } .TrickPksliderIMG .TrickPksliderIMG-content img {      border-radius: 15px;      max-height: 225px;      max-width: 720px;      margin: 0 5px;      scroll-snap-align: start; }
  5. If you have put the css code above don't forget to click save theme

  6. Then please put the html code below in your blog post or page

  7. <div class="TrickPksliderIMG"> <div class="slides">   <!-- [Image Link 1] -->   <div class="TrickPksliderIMG-content"><img aria-hidden="true" src="image link"></div> <!-- [Image Link 2] --> <div class="TrickPksliderIMG-content"><img aria-hidden="true" src="image link"></div> <!-- [Image Link 3] --> <div class="TrickPksliderIMG-content"><img aria-hidden="true" src="image link"></div> <!-- [Image Link 4] --> <div class="TrickPksliderIMG-content"><img aria-hidden="true" src="image link"></div> </div> </div>

  8. Please replace the yellow highlights image link with your image link

  9. The last step please click publish or save post

So many of my articles this time, hopefully it will be useful and if there is something you don't understand and you have something to ask, please comment in the comments below.

Where do you want to donate?

Treat the creator to coffee by giving a small donation. click the arrow icon as above.

Post a Comment

© . All rights reserved. Distributed by Distributed by