Modifikasi Desain Tampilan Homepage Blogger

Modifikasi Tampilan Desain Homepage Blogger - Desain tampilan halaman yang ringan (cepat) loading mungkin dambaan kita sebagai pemilik blog dan keinginan semua pengunjung blog untuk dapat lebih cepat mendapatkan halaman yang diinginkannya, salah satu cara yang mungkin bisa jadi alternatif pilihan supaya halaman cepat termuat dengan menghilangkan atau menyembunyikan elemen atau widget tertentu pada halaman tertentu, sebagai contoh pada halaman homepage/halaman utama.

Pada halaman homepage/frontpage semua widget yang kita pergunakan akan tampil semua layaknya pada halaman item/halaman posting dan halaman-halaman lainnya. Lain lagi halnya dengan bagian posting, halaman posting hanya akan menampilkan satu judul dengan isinya, sedangkan pada halaman homepage akan menampilkan beberapa judul posting beserta seluruh isinya (jika tidak menggunakan read more), hal ini akan membuat tampilan menjadi panjang berderet kebawah, apalagi jika kita menampilkan banyak judul post pada homepage.

Posting yang panjang berderet kebawah pada halaman homepage bisa kita perpendek dengan menambahkan fungsi Readmore untuk homepage, sehingga hanya menampilkan sebagian summary post saja, atau bisa juga hanya menampilkan judul posting saja pada halaman homepage supaya lebih ringkas dan tentu saja akan berpengaruh terhadap loading page.

Dalam hal ini kita memcoba mendesain tampilan homepage yang berbeda dengan tampilan halaman item/posting dan halaman-halaman lainnya, baik dari segi background, hilangnya sidebar pada homepage dan menampilkan hanya judul posting pada halaman homepage, kita bisa meletakan kode dibawah ini dibawah kode ]]></b:skin>

Tag kondisional dibawah ini merupakan kode perintah untuk hanya menampilkan pada homepage, dengan kata lain pada halaman item/posting dan halaman lain tidak bekerja/tidak berlaku:

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

...

</b:if>

Titik titik tersebut adalah tempat kode css yang akan diperintah pada homepage, karena yang akan kita modifikasi adalah bagian background (body), sidebar (#sidebar-wrapper) dan title post (hilangnya summary post (.post-body), maka keseluruhan kodenya menjadi seperti ini:

<b:if cond='data:blog.url == data:blog.homepageUrl'>
<style type='text/css'>
body {
background:#ffffff url(alamat gambar) repeat scroll top left;
}
#sidebar-wrapper {
display:none;
}
.post-body {
display:none;
}
</style>
</b:if>

Sisanya bisa disesuaikan dengan kebutuhan.

Hilangnya bagian sidebar (#sidebar-wrapper) akan meninggalkan ruang kosong seukuran ruang sidebar,untuk menutup kekosongan ruang yang diakibatkan hilangnya bagian sidebar, kita bisa menambah ukuran #main-wrapper sebesar ukuran sidebar.

pemilihan nama selektor tersebut diatas tidak menjadi patokan pasti, karena tiap template kadang berbeda dari segi penamaanya, jadi sesuaikan nama selektor yang akan dipergunakan (modifikasi).

Selain tag kondisional untuk homepage, masih banyak tag-tag kondisional yang lainnya, yang bisa dipergunakan untuk memberi perintah terhadap elemen atau objek-objek yang akan diperintah untuk ditampilkan atau disembunyikan, untuk mengetahui tag-tag kondisional lainnya, bisa melihat dengan mengklik Tautan Ini.

Akhir kata, selamat mendesain.