Tutorial: Styling Post Terkait dengan CSS

Dalam tutorial ini, kita akan membahas kode CSS yang digunakan untuk mendesain bagian related posts (artikel terkait) di sebuah situs web atau blog. Kode ini akan membantu Anda menampilkan artikel terkait dengan tata letak yang menarik dan responsif.

Mari kita bahas langkah demi langkah kode CSS yang diberikan dan jelaskan fungsinya.

1. Struktur Dasar: Kontainer Post Terkait

css
#Related {
  display: block;
  margin: 20px 0px;
  line-height: 1.5em;
}

• #Related menargetkan kontainer yang memuat post terkait.
• display: block; membuat elemen kontainer menjadi elemen blok, yang artinya elemen ini akan mengisi seluruh lebar yang tersedia.
• margin: 20px 0px; memberikan jarak 20px di bagian atas dan bawah kontainer.
• line-height: 1.5em; memastikan teks di dalam kontainer memiliki jarak antar baris yang cukup untuk keterbacaan.

2. Gaya Judul untuk Post Terkait

css
#Related h3.title {
  font-size: 16px;
  font-weight: 600;
  text-align: center;
  text-transform: uppercase;
  line-height: initial;
}

• h3.title menargetkan judul dari bagian artikel terkait.
• font-size: 16px; menetapkan ukuran teks judul menjadi 16px.
• font-weight: 600; memberikan efek tebal pada teks judul.
• text-align: center; membuat teks judul rata tengah.
• text-transform: uppercase; mengubah teks judul menjadi huruf kapital.
• line-height: initial; menghapus jarak baris default untuk menghindari spasi ekstra.

3. Membuat Garis Dekoratif di Atas Judul

css
#Related h3.title:before {
  content: '';
  display: block;
  position: relative;
  top: 10px;
  width: 100%;
  border-top: 2px solid #cccccc;
}

• :before adalah pseudo-elemen yang digunakan untuk membuat garis dekoratif di atas judul.
• content: ''; memastikan pseudo-elemen tersebut akan dirender.
• border-top: 2px solid #cccccc; menciptakan garis tipis berwarna abu-abu di atas judul.

4. Menampilkan Post Terkait dalam Grid

css
#Related ul {
  margin: 20px 0px 0px;
  padding: 0px;
  display: flex;
  flex-wrap: wrap;
}

• ul adalah elemen yang memuat daftar artikel terkait.
• display: flex; menerapkan tata letak flexbox untuk menata item daftar dalam satu baris.
• flex-wrap: wrap; memastikan item akan dibungkus ke baris berikutnya jika diperlukan, membuat tata letak responsif.

5. Gaya untuk Item Daftar Individu

css
#Related ul li {
  list-style: none;
  width: calc((100% / 3) - 15px);
  text-align: center;
  margin-right: 20px;
  margin-bottom: 20px;
  padding: 0px;
}

• list-style: none; menghilangkan tanda titik pada daftar item.
• width: calc((100% / 3) - 15px); membagi kontainer menjadi 3 kolom dengan sedikit jarak di antaranya.
• text-align: center; memastikan teks di dalam setiap item daftar berada di tengah.
• margin-right: 20px; memberikan ruang antar item secara horizontal.
• margin-bottom: 20px; memberikan jarak vertikal antara item.

6. Efek Hover dan Gaya Gambar

css
#Related ul li a img {
  width: 100%;
  max-height: 143px;
  transition: all .3s ease;
  border: 0px;
  margin: 0px;
}
#Related ul li a img:hover {
  transform: scale(1.1) rotate(-5deg);
  filter: brightness(75%);
}

• img di dalam item daftar disetel untuk mengisi seluruh lebar elemen dengan tinggi maksimal 143px.
• transition: all .3s ease; menambahkan animasi halus saat gambar di-hover.
• transform: scale(1.1) rotate(-5deg); memperbesar gambar sedikit dan memutarnya ketika di-hover.
• filter: brightness(75%); menggelapkan gambar ketika di-hover.

7. Desain Responsif untuk Perangkat Mobile

css
@media screen and (max-width: 480px) {
  #Related ul li {
    width: calc((100% / 2) - 7.5px);
    margin-right: 15px;
  }
}

• @media screen and (max-width: 480px) adalah query media untuk perangkat dengan lebar layar 480px atau kurang, yang biasanya digunakan untuk perangkat mobile.
• width: calc((100% / 2) - 7.5px); mengatur lebar setiap item menjadi 50% dari kontainer, sehingga ada dua item per baris.
• margin-right: 15px; memastikan ada ruang antar item.

8. Pesan Jika Tidak Ada Post Terkait

css
#Related .norelated {
  text-align: center;
  font-weight: 600;
}

• Jika tidak ada artikel terkait yang ditemukan, pesan ini akan ditampilkan dengan teks yang ditengah dan diberi gaya tebal (font-weight: 600).

Kode CSS ini memberikan desain yang fleksibel dan menarik untuk menampilkan artikel terkait di blog atau situs web. Dengan menggunakan Flexbox, efek hover, dan desain responsif, Anda bisa memastikan bahwa bagian artikel terkait terlihat bagus di perangkat apapun.

Anda bisa menyesuaikan lebih lanjut tata letak ini dengan mengubah lebar, margin, ukuran font, dan warna untuk sesuai dengan desain blog atau situs web Anda.

Tutorial ini memberikan cara sederhana dan efektif untuk meningkatkan pengalaman pengguna dengan menambahkan bagian artikel terkait yang menarik perhatian pengunjung dan membuat mereka lebih lama berada di situs Anda.

Berbagi :