Sabtu, 12 November 2016

Tag Conditional Untuk Custom Homepage

Tag Conditional Untuk Custom Homepage - Hallo Sobat Blogger Ambarawa Cyber Army. Untuk pertemuan kali ini Ambarawa Cyber Army akan membahas Tag Conditional Untuk Custom Homepage langsung saja yuk sobat ke pembahasannya.
Tag Conditional Untuk Custom Homepage
Tag Conditional Untuk Custom Homepage - Germy Load

Tag Conditional Untuk Custom Homepage

Kini saya memberikan contoh penggunaannya untuk memanipulasi tampilan homepage agar beda dengan blog umumnya. Sederhananya kita membuat halaman tersendiri pada homepage dengan menggunakan Tag Conditional.

Sebagai contoh Tag Conditional 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 Conditionalnya 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.
Contoh bentuk konsep kodenya seperti di bawah ini :
<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 di bawah ini. 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.
Sekian Tutorial Dari Ambarawa Cyber Army. Semoga Bermanfaat Bagi Sobat Blogger Semua.

0 komentar: