Membuat Navbar pada setiap tipe halaman Blogger berbeda

Masih dalam membahas modifikasi templat Blogger, proyek blog yang dikerjakan ini pada bagian menggunakan Bootstrap pada templat Blogger. Pada posting sebelumnya kita telah membahas bagaimana menggunakan Navbar dari Bootstrap 4 pada template Blogger, kali ini kita akan melanjutkan bagaimana membuat Navbar yang akan tampil berbeda pada setiap tipe halaman.

Untuk menampilkan kondisi yang berbeda pada templat Blogger terdapat beberapa kondisi yang dapat kita gunakan, disini kita akan menggunakan tag kondisional untuk menampilkan Navbar yang berbeda pada halaman statis, halaman posting, dan secara default ketika tidak dari kedua kondisional yang sudah disebutkan. Beberapa tag kondisional bisa dilihat pada posting mempelajari templat Blogger pada bagian Tag Kondisonal.

Navbar pada halaman statis

Gunakan <b:if cond='data:blog.pageType == "static_page"'> sebelum tag Nav yang dibuat, seperti ini:

<!-- Navbar ketika pada halaman statis -->
<b:if cond='data:blog.pageType == "static_page"'>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" id="navbar">
        <!-- isi Navbar -->
    </nav>

Navbar pada halaman posting

Gunakan <b:if cond='data:blog.pageType == "item"'>, namun karena ini merupakan kondisi yang lain dari sebelumnya maka gunakan <b:elseif cond='data:blog.pageType == "item"'>, seperti ini:

<!-- Navbar ketika pada halaman posting -->
<b:elseif cond='data:blog.pageType == "item"'/>
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
        <!-- isi Navbar -->
    </nav>

Navbar pada halaman lainnya

Karena ini merupakan kondisi default, disini tidak menggunakan tag kondisional hanya gunakan <b:else/> sebelum tag Nav dan berikan penutup tag </b:if> karena ini merupakan akhir dari tag kondisional yang dibuat, seperti ini:

<!-- Navbar ketika pada halaman lainnya -->
<b:else/>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-transparent" id="navbar">
        <!-- isi Navbar -->
    </nav>
</b:if>

Berikut ini tag kondisional Navbar secara keselurahan yang dibuat:

<!-- Navbar ketika pada halaman statis -->
<b:if cond='data:blog.pageType == "static_page"'>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-dark" id="navbar">
        <!-- isi Navbar -->
    </nav>
<!-- Navbar ketika pada halaman posting -->
<b:elseif cond='data:blog.pageType == "item"'/>
    <nav class="navbar fixed-top navbar-expand-lg navbar-light bg-light" id="navbar">
        <!-- isi Navbar -->
    </nav>
<!-- Navbar ketika pada halaman lainnya -->
<b:else/>
    <nav class="navbar fixed-top navbar-expand-lg navbar-dark bg-transparent" id="navbar">
        <!-- isi Navbar -->
    </nav>
</b:if>

Isi dari komponen Navbar pada tiap kondisi bisa kita atur sendiri sesuai keinginan, disini hanya dicontohkan atribut dan nilai dari tag Nav atau bisa melihat kembali pada posting menggunakan Navbar Bootstrap 4. Penggunaan tag kondisional ini juga tidak hanya pada elemen Navbar, bisa saja diaplikasikan pada elemen lain.

Itulah bagaimana membuat beberapa kondisi Navbar yang akan ditampilkan berbeda pada setiap kondisi halaman, jadi untuk setiap isi dari kondisi perlu disalin dan dirubah masing-masing perbedaannya.