deZige

Modifikasi Desain Tampilan Homepage Blogger

Cara modifikasi tampilan desain homepage menjadi tampilan yang berbeda dengan menghilangkan beberapa elemen atau widget untuk mempercepat proses loading halaman

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.

6 comments:

  1. Ini mah style Diary pisan euy ....
    Style yang aku minta 'Fix Wing Tip' Brooo !!

    ReplyDelete
    Replies
    1. hahahahaa...namanya juga blog, apa kabarnya bay?

      Delete
    2. mau tanya gimana cara merubah kursos menjadi animasi :D

      Delete
  2. mas, saya mau tanya, ditemplate saya gak ada yg kode elemen pake #, gimana dong nyarinya? mohon bantuannya cek page info blog rickorockers.

    ReplyDelete
    Replies
    1. Dalam hal ini tidak mutlak, kita harus memahami element yang membentuk sruktur template yang dipergunakan. Penggunaan id (#) atau class (.) diatas merupakan sebuiah contoh saja

      Delete
  3. saya mau nanya sob bagai mana caranya judul postingan letaknya jadi dibawah gambar
    template saya stylenya galery judulnya diatas gambar kalau mau dibikin dibawah gambar gimana caranya makasih sob
    http://duniaradioku.blogspot.com/

    ReplyDelete

Terima Kasih Atas Komentar Anda

  • +Bagikan
  • +Admin

Kontak SosMed

.
deZige