Cara Membuat Service Section Agar Blog Terlihat Lebih Profesional By Faronesia

Assallamuallaikum sobat akal lama tidak berjumpa kali ini saya akan memberi kan tutorial tentang bagaimana Cara Membuat Service Section Agar Blog Terlihat Lebih Profesional.  Sebelum itu silakan kalian backup dulu file lama anda untuk berjaga jaga jika kode anda tidak sama atau terdapat kesalahan dalam memasang kode ini dengan ini kalian bisa tenang untuk mendesain blog anda.


Untuk pertama tama kalian buka blog anda
Dan kalian menutup edit tema

Jika sudah kalian cari kode ]]</b: skin> jika sudah ketemu silakan kalian copy kode dibawah ini dan paste kan diatas kode tadi

.services-section{ width: 100%; } .inner-width{ max-width: 1200px; margin: auto; padding: 0 20px; } .services-section h1{ text-align: center; font-size: 32px; font-weight: 500; margin-bottom: 80px; } .services-section h1 strong{ color: #0081ff; } .service{ text-align: center; margin: 20px 0; } .service-icon{ width: 60px; height: 60px; margin: auto; background: #ecf6ff; border-radius: 50%; color: #0081ff; line-height: 60px; font-size: 25px; } .service-name{ font-weight: 600; font-size: 18px; margin: 20px 0; } .service-desc{ max-width: 400px; margin: auto; color: #333; font-size: 17px; } .owl-dots{ text-align: center; margin-top: 40px; } .owl-dot{ width: 14px; height: 14px; background: #808080 !important; margin: 0 6px; border-radius: 14px; outline: none; transition: .3s linear; } .owl-dot.active{ width: 36px; background: #0081ff !important; } .owl-dot:hover{ width: 36px; background: #0081ff !important; }

Kemudian kalian cari </head>

Dan pastekan kode dibawah ini diatas kode tadi

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js" charset="utf-8"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/owl.carousel.min.js" charset="utf-8"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/OwlCarousel2/2.3.4/assets/owl.carousel.min.css"/>

Kemudian mari kita pasang JavaScript di  atas </body>

<script> $(".services").owlCarousel({ margin:20, loop:true, autoplay:true, autoplayTimeout:2000, autoplayHoverPause:true, responsive:{ 0:{ items:1 }, 600:{ items:2 }, 1000:{ items:3 } } }); </script>

Dan save tema wait belom selesai silakan pasang kode HTML ini dimana pun anda suka

 <section class="services-section">
      <div class="inner-width">
        <h1>Our <strong>Services</strong></h1>
        <div class="services owl-carousel">
          <div class="service">
            <div class="service-icon">
              <i class="fas fa-shipping-fast"></i>
            </div>
            <div class="service-name">Pengiriman cepat</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>
          <div class="service">
            <div class="service-icon">
              <i class="far fa-clock"></i>
            </div>
            <div class="service-name">Hemat waktu</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>
          <div class="service">
            <div class="service-icon">
              <i class="fas fa-user-shield"></i>
            </div>
            <div class="service-name">Keamanan pengguna</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>
          <div class="service">
            <div class="service-icon">
              <i class="fas fa-database"></i>
            </div>
            <div class="service-name">Sistem terbaik</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>
          <div class="service">
            <div class="service-icon">
              <i class="fas fa-headset"></i>
            </div>
            <div class="service-name">Pelayanan ramah</div>
            <div class="service-desc">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Alias aperiam nesciunt similique!</div>
          </div>
        </div>
      </div>
    </section>

Dan akhir nya selesai sikap tutorial dari saya semoga bermanfaat dan Terima kasih faronesia