Menambah Kode CSS pada Landing Page Lajang Spot

Menambahkan kode CSS pada landing page adalah salah satu cara efektif untuk meningkatkan tampilan dan fungsionalitas website Anda.

Khusus untuk pengguna template Lajang Spot, hal ini sangat penting karena template ini dirancang untuk keperluan blogging sekaligus mendukung aktivitas penjualan online.

Dengan memanfaatkan kode CSS yang tepat, Anda dapat mempercantik tampilan halaman, mengoptimalkan pengalaman pengguna, dan menonjolkan produk yang dijual.

Pada artikel singkat ini, kita akan membahas langkah-langkah untuk menambahkan kode CSS pada landing page Lajang Spot agar tampil lebih profesional dan menarik.

Langkah-langkah Menambah Kode CSS pada Template Lajang Spot

1. Pergi Ke Menu Tata Letak Blogger

• Login ke akun Blogger Anda.
• Pilih blog yang ingin Anda edit dari dashboard blogger Anda.
• Di menu sebelah kiri, klik Tata Letak.
• Pada halaman Tata Letak, Anda akan melihat berbagai bagian dari elemen blog yang dapat diatur pada template Lajang Spot.
• Klik icon pensil pada bagian Custom CSS untuk menambah kode css.
• Klik Simpan setelah selesai melakukan perubahan.

2. Masukkan Kode CSS Berikut Ini

#headline h2 {
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.3); 
  font-size: 32px;
  position: relative;
}

#subheadline {
  text-align: center;
  margin:20px auto;
}

#subheadline h3 {
  font-size: 24px;
}

#filtering-audience {
  margin-top: 20px;
  border: 1px solid #1b7898;
  background-color: #e6f7ff;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(27, 120, 152, 0.4);
}

#statement {
  margin-top: 20px;
  border: 1px solid #1b7898;
  background-color: #fff5e6;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(27, 120, 152, 0.4);
}

#statement p {
  margin-bottom: 10px;
}

#statement .mark-color {
  color: #ffffff;
  font-weight: bold;
}

#what-product {
  margin-top: 20px;
  border: 1px solid #1b7898;
  background-color: #f7f7f7;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(27, 120, 152, 0.4);
}

#why-product {
  margin-top: 20px;
  border: 1px solid #1b7898;
  background-color: #e6f2ff;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(27, 120, 152, 0.4);
}

#social-proof {
  margin-top: 20px;
  border: 1px solid #1b7898;
  background-color: #fff5e6;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(27, 120, 152, 0.4);
}

#pps {
  margin-top: 20px;
  border: 1px solid #1b7898;
  background-color:#f2f2f2;
  padding: 15px;
  box-shadow: 0px 0px 15px rgba(27, 120, 152, 0.4);
}

@media screen and (min-width: 600px) {
  #headline,
  #filtering-audience,
  #statement,
  #what-product,
  #why-product,
  #social-proof,
  #pps {
    padding: 40px;
  }
}



#headline {
  animation: flyIn 1s ease-in-out;
}
@keyframes flyIn {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0);
  }
  to {
    transform: scale(1);
  }
}

.ads-image {
  animation: zoomIn 2s ease-in-out;
}

@keyframes slideUpDown {
  0% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-6px);
  }
  100% {
    transform: translateY(0);
  }
}

#subheadline {
  animation: slideUpDown 2s ease-in-out infinite;
}

div.mark-color{
text-align:center;margin:20px auto
}

Dengan menambahkan kode CSS yang disesuaikan pada landing page Lajang Spot, Anda bisa memaksimalkan potensi tampilan website sekaligus meningkatkan daya tarik bagi pengunjung.

Kustomisasi ini memungkinkan Anda untuk menciptakan halaman yang tidak hanya fungsional tetapi juga estetis, sesuai dengan brand dan kebutuhan bisnis Anda.

Jangan ragu untuk bereksperimen dengan berbagai kode CSS hingga menemukan desain yang paling tepat.

Semoga panduan ini membantu Anda dalam mengembangkan landing page yang efektif dan menarik!