×

search by faronesia.com

Faronesia
Profesional and Specialist ReDesign Template blogger

Cara Membuat Service Section Agar Blog Terlihat Lebih Profesional

Faronesia.com - Hallo sahabat faronesia, apa kabar semua, pada kesempatan yang lalu kita telah membahas tutorial Cara Membuat Skill Bar Pada Halaman Blog. Dan sekarang seperti biasanya saya akan membagikan sebuah tutorial yang mungkin berguna untuk sobat blogger dimanapun anda berada. Seperti yang telah disebutkan di judul postingan ini kita akan membuat service section.

Service section adalah sebuah bagian blog / web yang sering muncul atau menampilkan informasi dan layanan seputar situs tersebut seperti yang sering kita lihat di bebera situs profesional. Namun, anda juga bisa memasang service section pada blog yang anda kelola agar tampilan lebih profesional dengan mengikuti tutorial yang akan saya share dibawah ini.

Seperti yang telah anda ketahui, service section berguna sekaligus berfungsi untuk memberikan informasi dan layanan kepada setiap pengunjung situs serta menambah keprofesionalitas sebuah web yang dikelola. Selain itu, service section berguna untuk memperindah penampilan web.

Tutorial service section ini saya ambil dari seorang youtuber asal india yang membahas seputar desain web. Namun, di tutorial kali ini saya telah memodifikasi beberapa bagian agar bisa diterapkan pada pengguna blogspot. Tidak perlu panjang lebar untuk penjelasan service section karena mungkin anda sudah memahaminya atau bahkan lebih paham dari saya.

Sebelum mempraktekkannya, saya harap anda sudah membackup template yang akan dimodifikasi. Mengapa demikian? Sebab, jika nanti terdapat hal-hal yang tidak anda inginkan seperti kode tidak cocok, salah menempatkan kode, lupa menempatkan kode, template error, atau bahkan template rusak maka anda masih memiliki cadangannya.

Cara membuat service section pada blog

  • Masuk ke dashboard blog 
  • Lalu masuk ke menu tema blog
  • Kemudian klik edit HTML
  • Cari kode seperti dibawah ini ]]></b:skin>
  • Tempelkan kode CSS berikut dibawah ini tepat diatas kode ]]></b:skin>
/* Faronesia service section */
.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;
}
  • Selanjutnya, silahkan tempelkan kode dibawah ini tepat diatas kode </head>
<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"/>
  • Langkah selanjutnya, silahkan cari kode </body> lalu tempelkan kode javascript dibawah ini tepat diatas kode </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>
  • Lalu simpan tema
  • Setelah tema benar-benar tersimpan, langkah selanjutnya silahkan pergi ke menu tata letak
  • Tambahkan widget baru dan masukkan kode html dibawah ini
<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>
  • Lalu terapkan widget tersebut
  • Terakhir, silahkan lihat hasilnya atau lihat DEMO

Request tutorial lain?silahkan masuk ke halaman Tanggapan


Demikianlah mengenai Cara membuat service section agar blog terlihat lebih profesional semoga bermanfaat untuk para pembaca dimanapun anda berada. Jika menurut anda artikel ini bermanfaat jangan lupa share karena dengan share artikel ini sama halnya anda berpartisipasi dalam mengembangkan website faronesia.com.
Buka komentar
Tutup komentar
  1. Kalo diletakkan blog saya jadi gak cocok, karena terlalu kecil

    ReplyDelete
    Replies
    1. Tinggal di modifikasi cssnya dan disesuaikan lagi agar cocok

      Delete
  2. Mntap, bermanfaat :)

    ReplyDelete

1. Berkomentarlah dengan tata bahasa yang baik agar orang lain tahu sebijak apa karakter anda melalui kata kata.
2. Silahkan tulis komentar anda untuk hal apapun yang masih berhubungan dengan post pada halaman ini.
3. Mohon untuk tidak menyertakan Link Aktif pada kolom komentar.
4. Mohon maaf apabila tidak sempat membalas komentar 1 per 1.
5. Komentar selalu di moderasi.

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel

Notifikasi pengguna

Tetap selalu terhubung dengan kami untuk menjadi bagian dari Faronesa caranya cukup dengan menekan tombol dibawah ini.

Tutup
×

Faronesia

Kami senantiasa membantu memecahkan masalah seputar desain blog melalui request tutorial

Request tutorial