Beranda
Blogger

Cara Membuat Template Blogger Part 4

Di bagian keempat dari seri ini, kodeviolet.com akan membahas tentang cara membuat tampilan halaman yang berbeda-beda dalam satu template Blogger.
Kode Violet
Cara Membuat Template Blogger Part 4

Custom Halaman (Page Layouts) pada Template Blogger

Halo kembali, teman-teman! Di bagian keempat dari seri ini, kodeviolet.com akan membahas tentang cara membuat tampilan halaman yang berbeda-beda dalam satu template Blogger. Ini sangat penting agar homepage, halaman posting, dan halaman statis bisa tampil sesuai konteksnya.

1. Mengapa Perlu Page Layouts Khusus?

  • Homepage biasanya menampilkan ringkasan artikel.
  • Halaman Postingan fokus ke konten artikel lengkap.
  • Halaman Statis seperti "Tentang" atau "Kontak" butuh layout sederhana. Dengan layout berbeda, pengunjung akan lebih nyaman dalam membaca.

2. Deteksi URL Halaman Blogger

Gunakan kondisi khusus dengan b:if cond untuk membedakan jenis halaman:

<b:if cond='data:blog.pageType == "index"'>
  <!-- Ini homepage -->
</b:if>
<b:if cond='data:blog.pageType == "item"'>
  <!-- Ini halaman posting -->
</b:if>
<b:if cond='data:blog.pageType == "static_page"'>
  <!-- Ini halaman statis -->
</b:if>

3. Contoh Struktur HTML untuk Tiga Layout

<b:if cond='data:blog.pageType == "index"'>
  <div class="homepage">
    <h2>Selamat datang di blog kami!</h2>
    <b:section id='main-home' class='main'>
      <b:widget id='Blog1' type='Blog'/>
    </b:section>
  </div>
</b:if>

<b:if cond='data:blog.pageType == "item"'>
  <div class="post-page">
    <h1><data:post.title/></h1>
    <data:post.body/>
  </div>
</b:if>

<b:if cond='data:blog.pageType == "static_page"'>
  <div class="static-page">
    <h1><data:blog.pageName/></h1>
    <data:blog.pageTitle/>
    <data:blog.pageContent/>
  </div>
</b:if>

4. Gunakan CSS untuk Membedakan Layout

.homepage { background-color: #fdfdfd; padding: 20px; }
.post-page { max-width: 700px; margin: auto; line-height: 1.6; }
.static-page { padding: 40px; font-style: italic; }

5. Tips Tambahan

  • Pastikan semua kondisi b:if tidak saling tumpang tindih.
  • Tambahkan elemen b:include bila ingin menyisipkan elemen dari bagian lain seperti footer.

Kesimpulan

Dengan memanfaatkan fitur layout berdasarkan tipe halaman, template Blogger kalian akan terasa jauh lebih profesional dan nyaman digunakan. Sampai ketemu lagi di part selanjutnya dari seri ini hanya di kodeviolet.com!

Posting Komentar