How To Easily Add Image Slider In Blogger 2022
How to Easily Add Image slider in Blogger 2022: Add image slide in blogger is not easy but if you read this article carefully then you can easily create an effective image slide for your blogger blog. Here, you will learn a free and effective method to create an effective image slide for your blogger blog using bootstrap code. I make some modifications to that code. So, use the modified code from this article.
Step-by-step tutorial to Easily Add Image slider in Blogger
Step 1: Copy the given below code & past it where you need to Add an Image slider for Blogger ( in blogger post or in the themes HTML body )
<!doctype html> <!-- Required meta tags --> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" /> Feature Slides <h1>TECH FOR U</h1> <!-- Optional JavaScript --> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"> </script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"> </script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script> <div class="carousel slide" data-ride="carousel" id="carouselExampleCaptions"> <ol class="carousel-indicators"> <li class="active" data-slide-to="0" data-target="#carouselExampleCaptions"> </li> <li data-slide-to="1" data-target="#carouselExampleCaptions"> </li> <li data-slide-to="2" data-target="#carouselExampleCaptions"> </li> </ol> <div class="carousel-inner"> <div class="carousel-item active"> <img alt="TECHFORU" class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjQG95spU4wJqoZpHuCA3VdgYHA6fBzVtONTs7G_eFjAF8XR_okwevV-aIe-IRnmxYJpYlrsWwB6QQz1AAb2aZ9hYHpHe8fl3PM9cKkKvvak9AZiqNcmAjRHhDbZvOWEfERBJy0PeTDO7A/s1920/interaction-1233873_1920.jpg" /> <div class="carousel-caption d-none d-md-block"> <h5>First slide label</h5> <p>Like,Share and Subscribe!!!</p> </div> </div> <div class="carousel-item"> <img alt="..." class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgS6QtzsPNfwYy9GB_N3NrXw54_Y5kvNS0-DgTaM1uJd6uFvo_OJjWxCGPlvtgs_759KEzKuKe39O-9ZSB5Lv0Nk41o8PIbLj5lDRShYjXSJjLRg0TK-ErBzZS335Cn-28UaaGSa7IXUyI/s2048/FACEBOOK+ART.jpg" /> <div class="carousel-caption d-none d-md-block"> <h5>Second slide label</h5> <p>Share You Support!!!</p> </div> </div> <div class="carousel-item"> <img alt="..." class="d-block w-100" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEijfofA_WZu9GfJEJ_TMLRepyC3uo3skrmXF36ZYQiC7NVRt8w1ODPXerxdbqVqzlgkikAvHrIPBf5f4ivili2AEgjlxZRw6qgQZob4q9qSDH4bxDiYFCUZ0Z6ubY4pSNbq8RftTtq3HuU/s1920/flamingo-5332314_1920.jpg" /> <div class="carousel-caption d-none d-md-block"> <h5>Third slide label</h5> <p>Like if it help</p> </div> </div> </div> <a class="carousel-control-prev" data-slide="prev" href="#carouselExampleCaptions" role="button"> <span aria-hidden="true" class="carousel-control-prev-icon"> </span> <span class="sr-only">Previous</span> </a> <a class="carousel-control-next" data-slide="next" href="#carouselExampleCaptions" role="button"> <span aria-hidden="true" class="carousel-control-next-icon"></span> <span class="sr-only">Next</span> </a> </div> </!doctype>
Step 2: Modify according to your need.
I hope you understand with this article " How to Easily Add Image slider in blogger post". If you really help with this article then don't forget to appreciate our efforts and comment below. To know more blogging tutorial, stay connected with us. I'll teach you how to grow your blog.
0 comments:
Post a Comment