Dokumentasi Tema Blogger - Profile Sch.

1. Pengaturan Label Wajib

Tema ini menggunakan sistem label (kategori) untuk menampilkan konten secara terstruktur pada bagian-bagian tertentu. Pastikan Anda membuat dan menggunakan label berikut agar fitur tema berjalan dengan baik:

• Artikel — Label utama untuk semua postingan reguler atau berita blog. Label ini bisa digabung dengan label lainnya untuk postingan blog.
  "Label Artikel Jangan digabung dengan Data Guru dan Gallery"
• Data Guru — Label khusus untuk menampilkan daftar atau profil guru di bagian tertentu.
• Gallery — Label khusus untuk menampilkan gambar atau galeri di halaman galeri.

Cara Menambahkan Label Saat Menulis Postingan

1. Buka menu Postingan → Postingan Baru
2. Di sisi kanan (sidebar), cari bagian Label
3. Ketik nama label sesuai: Artikel, Data Guru, atau Gallery
4. Gunakan hanya satu label wajib untuk tiap kategori, agar tidak tercampur.
5. Publikasikan postingan seperti biasa.

Catatan: Label bersifat case-sensitive, jadi penulisan harus sesuai (misal: "Gallery", bukan "gallery" atau "GALERI").
Anda juga dapat membuat / menambahkan label lainnya.

2. Navigasi Menu Utama

2.1 Kode Navigasi Menu Utama

Berikut ini adalah struktur menu navigasi utama yang digunakan dalam tema ini. Menu ini mendukung dropdown, mega menu, dan responsif mobile dengan toggle.

<li><a href='/'>Beranda</a></li>

<li>
  <a class='desktop-item' href='#'>Profile</a>
  <input id='showDrop' type='checkbox' class="show-toggler" />
  <label class='mobile-item' for='showDrop'>Profile</label>
  <ul class='drop-menu'>
    <li><a href='/p/profil-sekolah.html'>Tentang Profile Sch</a></li>
    <li><a href='/p/sambutan-kepala-sekolah.html'>Sambutan Kepala Sekolah</a></li>
    <li><a href='/search/label/Data%20Guru'>Data Guru dan Staf</a></li>
    <li><a href='#'>Visi dan Misi</a></li>
  </ul>
</li>

<li><a href='/search/label/Gallery'>Gallery</a></li>
<li><a href='#'>Contact</a></li>
<li><a href='/search/label/Artikel'>Blog</a></li>

Catatan: Gunakan struktur kode tersebut untuk membuat menu, jangan merubah nama class dan id agar tampil sesuai pengaturan tema.

2.2. Kode Mega Menu

Fitur Mega Menu untuk bagian menu seperti PPDB, Promo, atau lainnya. Mega Menu memungkinkan menampilkan lebih banyak tautan, gambar, dan konten terstruktur secara lebar.

Berikut adalah struktur kode untuk bagian Mega Menu yang bisa anda gunakan:

<li>
  <a class='promo desktop-item' href='#'>PPDB</a>
  <input id='show' type='checkbox' class="show-toggler" />
  <label class='promo mobile-item' for='show'>PPDB</label>

  <div class='mega-box'>
    <div class='content'>

      <div class='row'>
        <a class="no-padding" href="#">
          <img alt='#' src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh6I2i5LIst5-pIGpRdoNm99NBOJvg0EL1uO1UJuwDkIgMGqyGtUa0N3LkOq2v-5fmlJz2MR8Y1mo17aDwu3odMpTyzuRTut20a3C8U5MvN7sOdFq_XY6T3fMZ-BNSp3Gsz6eavSBxeUmJZInUDz1cBsUdntZJuzYWmS3v9G-41fDLRHMoxq1N-x8q5wuDc/s320/promo-install-wp.jpg'/>
        </a>
      </div>

      <div class='row'>
        <div>Mega Menu</div>
        <ul class='mega-links'>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href='https://wa.me/6285141051822?text=InstallWP' target='_blank' rel='nofollow'>WA: +6285141051822</a></li>
        </ul>
      </div>

      <div class='row'>
        <div>Mega Menu 2</div>
        <ul class='mega-links'>
          <li><a href="#">Link 1</a></li>
          <li><a href="#">Link 2</a></li>
          <li><a href="#">Link 3</a></li>
          <li><a href="#">Link 4</a></li>
          <li><a href='https://wa.me/6285141051822?text=InstallWP' target='_blank' rel='nofollow'>WA: +6285141051822</a></li>
        </ul>
      </div>

    </div>
  </div>
</li>

3. Setting Hero Slider

Berikut ini lokasi tata letak untuk mengatur tampilan slide pada heropage