Wednesday, February 6, 2013

Cara Membuat Homepage Blog Tanpa Sidebar

Cara Membuat Homepage Blog Tanpa Sidebar

Sebenarnya sidebar ini hanya disembunyikan di homepage dan akan tampil di halaman posting. Dan ukuran dari lebar tempat posting (main-wrapper) akan tampil 2 bh, yaitu di homepage dan di halaman posting. Lihat postingan mengenai cara menampilkan widget di halaman tertentu saja. Dan supaya anda tidak penasaran, yuk kita mulai saja cara membuatnya.

Perhatikan dulu mengenai :
1. Lebar Blog (outer-wrapper)
2. Lebar Tempat Postingan (main-wrapper)

- Misalnya lebar blog / width:990px dan contoh kodenya seperti ini

#outer-wrapper{background:#fff;-moz-box-shadow:0 0 13px #000;border:9px solid #fff;width:990px;text-align:$startSide;font:$bodyfont;margin:0 auto;padding:0 10px 0 0}

- Dan lebar tempat posting / width:655px dan contoh kodenya seperti ini

#main-wrapper{padding-left:10px;width:655px;float:$startSide;word-wrap:break-word;overflow:hidden}

Nah untuk menampilkan postingan saja di homepage tanpa sidebar, maka lebar dari tempat postingan (main-wrapper) harus ditambah supaya sama dengan lebar blog, yaitu dari 655 menjadi 990. Dan penambahan kode display: none; untuk menghilangkan sidebar, mudah bukan? Sekarang simak cara meletakkan kode tersebut di dalam edit template.

1. Login ke blogger
2. Pilih Template => Edit HTML => Lanjutkan
3. Gunakan F3 untuk mencari kode </head> dan letakkan kode berikut ini di atasnya

<b:if cond='data:blog.pageType != &quot;item&quot;'>
<style>
#sidebar-wrapper {
display: none !important;
}
#main-wrapper, .post {
width: 990px;
}
</style>
</b:if>

4. Simpan Template

Keterangan :
Dengan penambahan conditional tag yang berwarna pink, maka lebar postingan di halaman utama / homepage akan berubah penuh (990px) sesuai dengan lebar blog, dan ukuran lebar posting akan kembali normal (655px) pada halaman posting. Dan juga untuk sidebar akan menghilang di homepage tetapi akan muncul di halaman posting, jadi susah ngomongnya nih, ya udah yang penting anda paham dengan penjelasan ini. Kode diatas tidak baku, mungkin pada template anda berlainan dengan template Contoh untuk kode #sidebar-wrapper dan #main-wrapper, jadi disesuaikan saja.
Sekian Dan Terimah Kasih