Inteknologi.com

Blog - Jika kalian ingin memberikan tampilan baru pada blog atau website kalian yang menggunakan Template Fastgrid, kalian tidak perlu bersusah payah mengubah struktur HTML-nya. Dengan sedikit sentuhan CSS (Cascading Style Sheets), kalian dapat mengubah layout keseluruhan template.

Artikel ini menyajikan beberapa opsi kode CSS yang dapat kalian gunakan untuk mengatur ulang tata letak (layout) Fastgrid, mulai dari tampilan full-width hingga penggunaan sidebar yang sticky. Cukup ganti kode CSS yang relevan pada file stylesheet kalian, dan saksikan perubahannya!

 Mengatur Layout Template Fastgrid 

1. Full Width dengan Sidebar di Bawah (Max-Width: 900px)

Layout ini dirancang agar area konten utama (entry-content) memiliki lebar penuh dengan batas maksimum (max-width) 900px. Sidebar akan diletakkan di bawah konten utama, memberikan fokus penuh pada isi artikel di perangkat desktop. kalian dapat menyesuaikan nilai max-width menjadi 800px,700px,, atau 1200px sesuai kebutuhan.

Baca juga : Cara Buat Sitemap Versi Fastgrid

Kode CSS untuk Full Width Sidebar di Bawah

Ganti kode CSS yang ada dengan kode di bawah ini:

 .content-wrapper{
  display:block;
  max-width: 900px !important;
  margin:0 auto;
  padding:0 20px;
  padding-top:18px;
  border-top:1px solid #lightgray;
}

/* Main content full width */
.main-content{
  width:100%;
  float:none;
}

/* Sidebar turun ke bawah */
#sidebar-wrapper{
  width:100%;
  margin-top:2rem;
  clear:both;
}

/* Untuk desktop: kembali ke layout sidebar */
/* Catatan: Kode ini tampaknya dimaksudkan untuk kembali ke full-width 1 kolom di desktop, bukan sidebar. */
@media (min-width:992px){
  .content-wrapper{
    display:grid;
    grid-template-columns:1fr; /* Hanya satu kolom (full width) */
    gap:2rem;
  }
}

Penjelasan Kode:

• .content-wrapper: Diatur agar berada di tengah (margin: 0 auto), memiliki lebar maksimum 900px, dan ditampilkan sebagai block (standar).

• .main-content dan #sidebar-wrapper: Diatur 100 lebar agar konten dan sidebar menggunakan lebar penuh, dengan sidebar diletakkan di bawah konten utama menggunakan float: none dan clear: both.

• @media (min-width: 992px): Memastikan tampilan tetap full-width (satu kolom) pada layar desktop.

 /* DEFAULT UNTUK HOMEPAGE */
.content-wrapper{
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  padding-top: 18px;
}

/* OVERRIDE UNTUK SINGLE POST */
/* Konten tunggal (single post) dibuat lebih sempit */
.item-view .content-wrapper{
  max-width: 800px !important;
}

/* Desktop Homepage: Dua Kolom */
@media (min-width: 992px){
  .content-wrapper{
    display: grid;
    grid-template-columns: 2fr 1fr; /* Rasio lebar 2:1 antara konten dan sidebar */
    gap: 2rem;
    max-width: 1200px;
  }
}

/* Desktop Single Post: Full Width (Maks 800px) */
.item-view @media (min-width: 992px){
  .content-wrapper{
    display: block;
    max-width: 800px;
  }
}

Penjelasan Kode:

• Layout default adalah 1200px

• Pada layar desktop (min-width: 992px), menggunakan CSS Grid untuk menampilkan dua kolom dengan rasio 2 bagian untuk konten utama dan 1 bagian untuk sidebar (2fr 1fr).

• Khusus untuk tampilan artikel tunggal (.item-view), lebar maksimum diubah menjadi 800px untuk tampilan yang lebih fokus pada konten.

 .content-wrapper{
  display: block;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  padding-top: 18px;
}

/* Mobile First: Full Width */
.main-content{
  width: 100%;
}

#sidebar-wrapper{
  width: 100%;
  margin-top: 2rem;
}

/* Tablet: Masih Full Width */
@media (min-width: 768px) and (max-width: 991px) {
  .content-wrapper{
    display: block;
  }
  
  .main-content{
    width: 100%;
  }
  
  #sidebar-wrapper{
    width: 100%;
    margin-top: 2rem;
  }
}

/* Desktop: Sidebar di Samping (Sticky) */
@media (min-width: 992px){
  .content-wrapper{
    display: grid !important;
    grid-template-columns: 2fr 1fr !important;
    gap: 2.5rem !important;
    align-items: start; /* Penting untuk sticky agar konten diatur dari atas */
  }
  
  .main-content{
    width: auto;
  }
  
  #sidebar-wrapper{
    width: auto;
    margin-top: 0;
    position: sticky; /* Properti utama untuk sticky */
    top: 100px; /* Jarak dari atas layar saat menempel */
  }
  
  .sidebar{
    padding: 20px;
    background: var(--bg-color);
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
  }
}

/* Alternative tanpa sticky */
@media (min-width: 992px){
  .content-wrapper{
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
    align-items: start;
  }
  
  #sidebar-wrapper{
    margin-top: 0;
    /* Hilangkan position: sticky; */
  }
} 

/* Mobile First Approach */
.content-wrapper {
  display: block;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Desktop */
@media (min-width: 992px) {
  .content-wrapper {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 2rem;
  }
}

.content-wrapper{
  display:block;
  max-width: 900px !important;
  margin:0 auto;
  padding:0 20px;
  padding-top:18px;
  border-top:1px solid #lightgray;
}

/* Main content full width */
.main-content{
  width:100%;
  float:none;
  max-width: 900px !important;
}

/* Sidebar turun ke bawah */
#sidebar-wrapper{
  width:100%;
  margin-top:2rem;
  clear:both;
}

/* Untuk desktop: kembali ke layout sidebar */
@media (min-width:992px){
  .content-wrapper{
    display:grid;
    grid-template-columns:1fr; /* Satu kolom (Full Width) */
    gap:2rem;
    max-width: 900px !important;
  }
}

/* Penyesuaian Thumbnail pada tampilan mobile 480px */
/* **Tambahkan kode untuk mengatur thumbnail di sini (jika ada)** */
/* Contoh untuk mengatur thumbnail post ke kanan */
/*
@media (max-width: 480px) {
    .post-item .thumbnail-container {
        float: right;
        margin-left: 15px;
        margin-right: 0;
    }
}
*/