Membuat Tampilan Halaman Blog Dinamis

Membuat Tampilan Halaman Blog Dinamis - Pada postingan sebelumnya saya sudah bahas cara merubah template blogger 2 kolom menjadi 3 kolom. Nah, maksud dari tutorial kali ini tentang cara membuat halaman blog dinamis ini adalah untuk menyembunyikan gadget atau menyembunyikan kolom sidebar yang berada di halaman utama (tidak akan ditampilkan pada halaman posting), misalnya blog anda mempunyai 3 kolom dan saat salah satu artikel anda diklik, maka 1 kolom akan hilang atau tidak tampil, jadi yang terlihat hanya 2 kolom, mengerti bukan? Pada dasarnya anda hanya menggunakan tag conditional untuk menyembunyikan salah satu gadget. Ok saya beri gambaran tampilan blog 3 kolom di halaman utama / halaman depan, seperti ini :

Dari gambar diatas menunjukkan tampilan blog 3 kolom pada halaman utama, terdiri dari :
1. main-wrapper atau tempat halaman posting dengan lebar / width = 525px
2. sidebar-wrapper dengan lebar / width = 310px
3. sidebar-wrapper2 dengan lebar / width = 150px

Dan tampilan blog menjadi 2 kolom di halaman posting

Dari gambar diatas menunjukkan tampilan blog 2 kolom pada halaman posting, terdiri dari :
1. main-wrapper atau tempat halaman posting dengan lebar / width = 670px
2. sidebar-wrapper dengan lebar / width = 310px

Jadi sidebar-wrapper2 dengan lebar / width = 150px sudah hilang pada halaman posting

Bagaimana cara membuat halaman blog dinamis seperti pada gambar diatas?

1. Seperti biasa anda harus login ke blogger
2. Pilih Template => Edit HTML => Lanjutkan
3. Backup dulu template anda untuk mencegah kalau terjadi kesalahan
4. Centang kotak kecil dekat Expand Templates Widget
5. Gunakan F3 untuk mencari kode ]]></b:skin> dan letakkan kode berikut dibawahnya

<!-- kondisi halaman utama -->
<style type='text/css'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>
.post-body{ text-align: justify;}
.post-home-thumbnail img{float:left;margin:0 5px 0 0;width: 200px; height:120px; padding:10px; background:#e1e1e1; border:1px solid #ccc;}
#sidebar-wrapper2
#main-wrapper {width:525px;}
</b:if>
</style>

<!-- kondisi halaman posting -->
<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;item&quot;'>
.post-body{ font-size:12px; margin:10px 0 .85em; line-height:1.5em; padding:0px;overflow: hidden;}
#sidebar-wrapper2 {display:none}
#main-wrapper {width:670px;}
</b:if>
</style>

6. Simpan Template

Keterangan :

1. Pada Kondisi Halaman Utama, untuk kode seperti ini

.post-home-thumbnail img{float:left;margin:0 5px 0 0;width: 200px; height:120px; padding:10px; background:#e1e1e1; border:1px solid #ccc;} dimana kode warna biru adalah lebar dan tinggi gambar yang sudah menggunakan readmore, anda bisa merubahnya sesuai selera anda. 

2. Pada Kondisi Halaman Posting

- #sidebar-wrapper2 adalah kolom yang disembunyikan, maka tambahkan kode {display:none}
- Tambahkan lebarnya {width:670px;} pada kode #main-wrapper (tempat posting), anda bisa merubah angka 670 yang sekiranya pas untuk lebar blog anda.

3. Kode <b:if cond='data:blog.pageType != &quot;item&quot;'> dan penutupnya </b:if> artinya gadget atau kolom akan tampil pada semua halaman, kecuali halaman posting.

4. Kode <b:if cond='data:blog.pageType == &quot;item&quot;'> dan penutupnya </b:if> artinya gadget atau kolom akan tampil hanya di halaman posting.

Untuk lebih jelasnya silahkan lihat postingan mengenai menampilkan widget pada halaman tertentu

Saya kira anda cukup paham dengan penjelasan diatas, semoga tutorial cara membuat tampilan halaman blog dinamis dapat bermanfaat dan selamat mencoba, happy blogging.