Cara Membuat Tampilan Halaman Utama Blog Tanpa Posting

Pada tutorial blog sebelumnya saya pernah membahas mengenai cara membuat tampilan halaman utama/ homepage tanpa postingan, nah untuk kali ini masih dalam topik homepage blog dimana pada tampilan homepage blogger akan dibuat tanpa sidebar atau blog yang semestinya 2 kolom akan ditampilkan hanya 1 kolom. Tips ini akan membuat loading blog semakin cepat, karena tidak adanya tambahan widget di halaman utama, jadi yang tampil hanya berisikan postingan saja. Bagaiamana Cara Membuat Homepage Blog Tanpa Sidebar? Silahkan simak tutorialnya dibawah ini.

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 kodedisplay: 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 Rudy Hartono untuk kode #sidebar-wrapper dan #main-wrapper, jadi disesuaikan saja.

Selamat mencoba Cara Membuat Homepage Blog Tanpa Sidebar, semoga bermanfaat.

Sumber : http://teknik-blog-tutorial.blogspot.com/2012/12/cara-membuat-homepage-blog-tanpa-sidebar.html

Tweet