Wednesday, November 04, 2015

Contoh Tag Kondisional Di Halaman Statis

tag kondisional halaman statis
Untuk memanipulasi tampilan blogger agar menjadi lebih berwarna kita bisa menggunakan tag kondisional khususnya pada halaman statis. Dalam artian sederhananya kita bisa merubah berbagai tampilan di setiap halaman yang kita inginkan sesuai selera kita menggunakan tag kondisional ini. Untuk daftar tag kondisional yang umum digunakan di blogger bisa baca Tentang Tag Kondisional Blogger

Sesuai judul artikel kali ini saya akan mencoba memberikan contoh sederhana menerapkan tag kondisional untuk mengubah tampilan yang berbeda di halaman statis ( static page ).

Sebagai contoh misalnya struktur template kita seperti ini:

<HTML>
<head>
<style type="text/css">
#header{bla-bla-bla}
#content{bla-bla-bla}
#footer{bla-bla-bla}
</style>
</head>
<body>
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</body>
</HTML>

Menyembunyikan Element Header Di Halaman Statis


Karena yang akan kita ubah adalah halaman statis kita gunakan tag kondisinya seperti ini

<b:if cond="data:blog.pageType == &quot;static_page&quot;"></b:if>

Jadi kita ubah markupnya menjadi seperti dibawah ini :

<HTML>
<head>
<style type="text/css">
#header{bla-bla-bla}
#content{bla-bla-bla}
#footer{bla-bla-bla}
</style>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
#header{display:none}
</style>
</b:if>
</head>
<body>
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</body>
</HTML>
Namun jika kita tidak ingin menghilangkan headernya dan ingin mengubah dengan style tampilan yang berbeda kita juga bisa mengaturnya dengan sedikit CSS sesuai keinginan kita.

Misalnya kita tambahkan CSS :

#header{background:#555;margin:0;padding:10px 8px;text-align:center;}

Jadi nanti hasilnya akan menjadi seperti dibawah ini :

<HTML>
<head>
<style type="text/css">
#header{bla-bla-bla}
#content{bla-bla-bla}
#footer{bla-bla-bla}
</style>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
<style type="text/css">
#header{background:#555;margin:0;padding:10px 8px;text-align:center;}
</style>
</b:if>
</head>
<body>
<div id="header"/>
<div id="content"/>
<div id="footer"/>
</body>
</HTML>
Contoh diatas hanyalah penerapan dasarnya saja jadi anda bisa kembangkan sendiri sesuai dengan tag kondisional yang akan kita gunakan agar tampilan lebih maksimal. Contoh halaman statis dengan tag kondisi misalnya seperti ini DEMO