Friday, December 04, 2015

Tag Conditional Untuk Custom Homepage

tag kondisional homepage blogger

Setelah sebelumnya saya berikan contoh penerapan tag kondisional di halaman statis, kini saya berikan contoh lagi penggunaannya untuk memanipulasi tampilan homepage agar beda dengan blog umumnya. Sederhananya kita membuat halaman muka tersendiri pada homepage dengan menggunakan tag kondisi.

Sebagai contoh tag kondisi selengkapnya yang umum kita gunakan untuk blogger ini bisa dilihat pada artikel sebelumnya Tentang tag kondisional blogger, karena pokok bahasan kali adalah kostumisasi pada tampilan homepage maka kita ambil tag kondisinya adalah seperti ini :

<b:if cond='data:blog.url == data:blog.homepageUrl'></b:if>

Untuk modifikasi tampilan homepage seperti ini kita memerlukan beberapa element dasar yang harus kita buatkan struktur dengan design tersendiri agar bisa tampil sempurna dan maksimal. Element element dasar itu meliputi section, header, menu navigasi, footer dll.

DEMO

Contoh bentuk konsep kodenya :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<header>
</header>
<section>
</section>
<footer>
</footer>
</b:if>
Setelah kita menentukan element yang akan digunakan selanjutnya kita buatkan stylenya untuk masing masing element tadi misalnya seperti ini :

header{ isi kode css atribut untuk header }
section{ isi kode css atribut untuk section }
footer{ isi kode css atribut untuk footer }
Masukkan kode css yang sudah kita buat tadi sebelum kode </head> atau </style> atau ]]></b:skin>
Jadi nanti secara keseluruhan kode CSSnya menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
header{ isi kode css atribut untuk header }
section{ isi kode css atribut untuk section }
footer{ isi kode css atribut untuk footer }
</style>
</b:if>
Cara memasangnya pada Edit html blog :

Masukkan kode HTML yang sudah kita buat tadi dan masukkan setelah kode <body> kemudian untuk menghilangkan element blog yang tidak diinginkan tambahkan tag kondisinya seperti ini :

<b:if cond='data:blog.url != data:blog.homepageUrl'>
dan diakhiri dengan
</b:if>

Alternatif lain membuat tampilan halaman muka sendiri dengan menghilangkan Widget Blogpost Blogger


Cari kode yang mirip mirip seperti kode dibawah ini :

<b:section class='main' id='main' showaddelement='no'>
  <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
</b:section>
Kemudian tambahkan kode dibawah ini tepat diatasnya

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>
Dan tepat dibawahnya

</b:if>
Jadi secara keseluruhan kodenya menjadi seperti ini :

<b:if cond='data:blog.url == data:blog.homepageUrl'>
  <b:section class='main' id='homepage'></b:section>
<b:else/>
  <b:section class='main' id='main' showaddelement='no'>
    <b:widget id='Blog1' locked='true' title='Posting Blog' type='Blog'/>
  </b:section>
</b:if>
Terakhir simpan templatenya kemudian tambahkan widget atau apa saja untuk menggantikan widget blogpost yang sudah kita hilangkan tadi.

Catatan :
Dengan menerapkan kedua metode diatas akan membuat fungsi Preview pada postingan maupun page post pada halaman statis tidak berjalan dan hanya akan menampilkan halaman yang telah kita buat tadi.