How to add beautiful Slider Widgets to your blogger ?


 Hello Friends !

Slider helps you to display a large number of collection and provide easy navigation to explore the display contents easily. Also provide social links.
 
Follow below steps
◘ Sign into Blogger
◘ Go to layout section
◘ Add gadget
◘ Select html gadget
◘ Add the below codes in it

<!doctype html>

<link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css” />

<style>

.card1 {

  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);

  max-width: 300px;

  margin: auto;

  background-color: white;

  text-align: center;

  font-family: arial;

border-radius: 30px;

}

.title {

  color: grey;

  font-size: 14px;

}

button {

  border: none;

  border-radius: 20px;

  outline: 0;

  display: inline-block;

  padding: 8px;

  color: white;

  background-color: #000;

  text-align: center;

  cursor: pointer;

  width: 100%;

  font-size: 22px;

}

a{

  text-decoration: none;

  font-size: 22px;

   padding: 8px;

  color: black;

}

button:hover, a:hover {

  opacity: 0.7;

}

{

  margin: 0;

  padding: 0;

  box-sizing: border-box;

  font-family: ‘Poppins’, sans-serif;

}

body{

  min-height: 100vh;

  display: flex;

  align-items: center;

}

.wrapper{

  width: 100%;

}

.carousel{

  max-width: 1100px;

  margin: auto;

  padding: 0 30px;

}

.carousel .card{

  color: #fff;

  text-align: center;

  margin: 20px 0;

  line-height: 250px;

  font-size: 90px;

  font-weight: 600;

  border-radius: 10px;

  box-shadow: 0px 4px 15px rgba(0,0,0,0.2);

}

.owl-dot.active,

.owl-dot:hover{

  background: #0072bc!important;

}

img {

  display: block;

  margin-left: auto;

  margin-right: auto;

}

</style>

<!– Created By CodingNepal –>

  

    

    <link rel=”stylesheet” href=”style.css” />

    

    <script src=”https://code.jquery.com/jquery-3.5.1.js”></script>

    <script src=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js”></script>

    <link rel=”stylesheet” href=”https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css” />

  

  

    <div class=”wrapper”>

      <div class=”carousel owl-carousel”>

<div class=”card1″>

  <img alt=”John” src=”https://1.bp.blogspot.com/-TX2420gT-uI/X4cEtbhyInI/AAAAAAAACCI/LNtNmUAg-lYHFYt5p0IZS6HnD0KhO2SVgCLcBGAsYHQ/s320/Icon-512.png” style=”width:50%;border-radius:1000px;border: 5px solid #FFFF”/>

  <h2>theAShub</h2>

  <p class=”title”>Page for degital work</p>

  <div style=”margin:20px 10px;”>

  </div>

  <!–a href=”#”><i class=”fa fa-dribbble”></i></a–> 

    <a href=”https://www.Twitter.com/artwitharvind”><i class=”fa fa-twitter”></i></a>  

    <a href=”https://www.instagram.com/tasvirkhana”><i class=”fa fa-instagram”></i></a>  

    <a href=”https://www.facebook.com/tasvirkhana”><i class=”fa fa-facebook”></i></a> 

  <h4>Powered by theAShub</h4>

  <p><button >Contact</button></p>

</div>

<div class=”card1″>

  <img alt=”John” src=”https://1.bp.blogspot.com/-TX2420gT-uI/X4cEtbhyInI/AAAAAAAACCI/LNtNmUAg-lYHFYt5p0IZS6HnD0KhO2SVgCLcBGAsYHQ/s320/Icon-512.png” style=”width:50%;border-radius:1000px;border: 5px solid #FFFF”/>

  <h2>theAShub</h2>

  <p class=”title”>Page for degital work</p>

  <div style=”margin:20px 10px;”>

  </div>

  <!–a href=”#”><i class=”fa fa-dribbble”></i></a–> 

    <a href=”https://www.Twitter.com/artwitharvind”><i class=”fa fa-twitter”></i></a>  

    <a href=”https://www.instagram.com/tasvirkhana”><i class=”fa fa-instagram”></i></a>  

    <a href=”https://www.facebook.com/tasvirkhana”><i class=”fa fa-facebook”></i></a> 

  <h4>Powered by theAShub</h4>

  <p><button >Contact</button></p>

</div>

<div class=”card1″>

  <img alt=”John” src=”https://1.bp.blogspot.com/-TX2420gT-uI/X4cEtbhyInI/AAAAAAAACCI/LNtNmUAg-lYHFYt5p0IZS6HnD0KhO2SVgCLcBGAsYHQ/s320/Icon-512.png” style=”width:50%;border-radius:1000px;border: 5px solid #FFFF”/>

  <h2>theAShub</h2>

  <p class=”title”>Page for degital work</p>

  <div style=”margin:20px 10px;”>

  </div>

  <!–a href=”#”><i class=”fa fa-dribbble”></i></a–> 

    <a href=”https://www.Twitter.com/artwitharvind”><i class=”fa fa-twitter”></i></a>  

    <a href=”https://www.instagram.com/tasvirkhana”><i class=”fa fa-instagram”></i></a>  

    <a href=”https://www.facebook.com/tasvirkhana”><i class=”fa fa-facebook”></i></a> 

  <h4>Powered by theAShub</h4>

  <p><button >Contact</button></p>

</div>

<div class=”card1″>

  <img alt=”John” src=”https://1.bp.blogspot.com/-TX2420gT-uI/X4cEtbhyInI/AAAAAAAACCI/LNtNmUAg-lYHFYt5p0IZS6HnD0KhO2SVgCLcBGAsYHQ/s320/Icon-512.png” style=”width:50%;border-radius:1000px;border: 5px solid #FFFF”/>

  <h2>theAShub</h2>

  <p class=”title”>Page for degital work</p>

  <div style=”margin:20px 10px;”>

  </div>

  <!–a href=”#”><i class=”fa fa-dribbble”></i></a–> 

    <a href=”https://www.Twitter.com/artwitharvind”><i class=”fa fa-twitter”></i></a>  

    <a href=”https://www.instagram.com/tasvirkhana”><i class=”fa fa-instagram”></i></a>  

    <a href=”https://www.facebook.com/tasvirkhana”><i class=”fa fa-facebook”></i></a> 

  <h4>Powered by theAShub</h4>

  <p><button >Contact</button></p>

</div>

<div class=”card1″>

  <img alt=”John” src=”https://1.bp.blogspot.com/-TX2420gT-uI/X4cEtbhyInI/AAAAAAAACCI/LNtNmUAg-lYHFYt5p0IZS6HnD0KhO2SVgCLcBGAsYHQ/s320/Icon-512.png” style=”width:50%;border-radius:1000px;border: 5px solid #0d0d0d”/>

  <h2>Tasveer Khana</h2>

  <p class=”title”>Page for degital work</p>

  <div style=”margin:20px 10px;”>

    <!–a href=”#”><i class=”fa fa-dribbble”></i></a–> 

    <a href=”https://www.Twitter.com/artwitharvind”><i class=”fa fa-twitter”></i></a>  

    <a href=”https://www.instagram.com/tasvirkhana”><i class=”fa fa-instagram”></i></a>  

    <a href=”https://www.facebook.com/tasvirkhana”><i class=”fa fa-facebook”></i></a> 

  </div>

  <p><button >Contact</button></p>

</div></div></div>

<script>

      $(“.carousel”).owlCarousel({

        margin: 20,

        loop: true,

        autoplay: true,

        autoplayTimeout: 2000,

        autoplayHoverPause: true,

        responsive: {

          0:{

            items:1,

            nav: false

          },

          600:{

            items:2,

            nav: false

          },

          1000:{

            items:3,

            nav: false

          }

        }

      });

    </script>

  

</!doctype>

◘ Have Fun !

Leave a Comment