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
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.
The first step is to login to your respective blogger account.
The second step select the theme then click the three dots and click edit html.
After that copy and paste the css code below just above the code ]]></b:skin> .
If you have put the css code above don't forget to click save theme
Then please put the html code below in your blog post or page
Please replace the yellow highlights image link with your image link
The last step please click publish or save post
/*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; }
<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>
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.