How to Add Image Slider In Blogger Site

Image Slider In Blogger

You can see the demo here⤵

   View Demo

Before we start adding codes in XML, I will recommend you to take a Backup of your current theme. By chance if any problem occurs, you can restore it later.

Step 1: Go to Blogger Dashboard.

Step 2: On Blogger Dashboard, click Theme. 

Step 3: Click the arrow down icon next to 'Customize' button. 

Step 4: Now click on Edit HTML 

Step 5: Now search the code ]]></b:skin> or /*]]>*/</style> and paste the following CSS Codes just above to it. Or you can paste it above tag by adding <style>css here</style>

.galWrp{margin:25px 0;overflow-y:hidden;overflow-x:scroll;position:relative;white-space:nowrap;width:100%}.galWrp>*{display:inline-block;margin-right:5px}.galWrp>*:last-child{margin-right:0}.galWrp img{max-height:310px;max-width:unset;width:auto;border:1px solid #585759;}.galWrp.h250 img{max-height:250px}.galWrp.h200 img{max-height:200px}.galWrp.h150 img{max-height:150px}@media screen and (max-width:500px){.galWrp img{max-height:250px}}

Step 6: Now click on save button.

How to use it?

Step 6: Then go to the post/page 

Step 7: Then if you are doing this in page/post then In post editor view, click icon at the bottom right of the title.Two options will appear: HTML view and Writing view, Select '

HTML View.

Step 8: Now paste the following HTML code to that place

Replace # into Image URL

<!--[ Scroll Image Type 1]-->

<div class="galWrp">

  <img alt="lightbox image without caption" src="#"/>

  <img class="c" alt="image lightbox with caption" src="#"/>

  <img class="c sz" alt="lightbox by resizing the image" src="#"/>

  <img class="c sz n" alt="image without lightbox" src="#"/>

  <img class="c sz" alt="image_title" src="#"/>

</div>

You can change html texts as you want in the code box!

Step 9: Then Save or Publish.

Important Information

<img src="#" alt="#" />

In the image code shown in Step 8, you will change the src link ( src="#") with the link address of the image. How to do this is discussed below.

Conclusion

This is all about making a Contact Form using Telegram Bot API. I hope you enjoy this article. Please do share this article. And if you are facing problem in any section or you have any question then ask us in comment box.

Copyright ©

ᗩᗷᗪᑌᒪᒪᗩᕼ ᑕᗝᗪᗴᗪ