Cara Membuat Halaman Statis Full Width di Blog
05.40.00
34 Komentar
Cara Membuat Halaman Statis Full Width di Blog - Yang dimaksud dengan full width disini merupakan halaman statis yang memiliki lebar 100% atau tidak sama sekali memiliki sidebar khusus pada halaman statis atau static page. Dengan memiliki halaman statis atau static page yang memiliki lebar yang full alias tanpa sidebar maka akan terlihat semakin besar dan juga berbeda dengan tampilan seperti biasanya. Agar halaman statis menjadi full width atau lebar penuh, kita bisa menggunakan trik ini dengan kode atau tag conditional yang bisa menempatkan suatu widget dimana yang kita mau Anda bisa melihat kumpulan dan fungsi setiap kode tag conditional disini Cara Menampilkan Widget dihalaman Tertentu.
Dengan menggunakan tag conditional dan ditambahkan sedikit kode CSS yang memerintahkan untuk menjadi full width atau lebar penuh sehingga halaman statis atau static page ini tidak memiliki sidebar. Tidak hanya itu saja, dalam halaman statis juga kita dapat menyembunyikan kotak komentar atau tidak menampilkan kotak komentar khusus pada static page atau halaman statis.
Untuk membuat halaman statis menjadi full width Anda tidak perlu khawatir dengan tutorial atau cara yang akan di bagikan oleh Ficri Pebriyana disini tidak begitu sulit. Agar bisa membuat halaman statis dengan lebar penuh maka kita harus bisa mengetahui masing-masing kode css yang ada dalam masing-masing template yang Anda gunakan, khususnya kode css pada bagian sidebar blog. Langsung saja bagi Anda yang ingin membuat halaman statis dengan lebar yang penuh atau full, maka silahkan baca tutorial cara membuat halaman statis full width di blog dibawah ini :
Kurang lebih contoh halaman statis yang full width atau hanya memiliki 1 kolom saja, seperti gambar berikut :
Langkah-langkahnya sebagai berikut :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode
4. Copy kode css dibawah ini, lalu Paste dibawah kode
Catatan :
- Jika kode diatas tidak berfungsi alangkah baiknya cek setiap kode css pada bagian sidebar, kotak komentar dan lebar halaman yang terdapat dalam template blog Anda, kurang lebihnya seperti dibawah ini :
Dibawah ini adalah kode css agar kotak komentar muncul pada halaman statis atau static page :
Semoga Bermanfaat...
Dengan menggunakan tag conditional dan ditambahkan sedikit kode CSS yang memerintahkan untuk menjadi full width atau lebar penuh sehingga halaman statis atau static page ini tidak memiliki sidebar. Tidak hanya itu saja, dalam halaman statis juga kita dapat menyembunyikan kotak komentar atau tidak menampilkan kotak komentar khusus pada static page atau halaman statis.
Untuk membuat halaman statis menjadi full width Anda tidak perlu khawatir dengan tutorial atau cara yang akan di bagikan oleh Ficri Pebriyana disini tidak begitu sulit. Agar bisa membuat halaman statis dengan lebar penuh maka kita harus bisa mengetahui masing-masing kode css yang ada dalam masing-masing template yang Anda gunakan, khususnya kode css pada bagian sidebar blog. Langsung saja bagi Anda yang ingin membuat halaman statis dengan lebar yang penuh atau full, maka silahkan baca tutorial cara membuat halaman statis full width di blog dibawah ini :
Kurang lebih contoh halaman statis yang full width atau hanya memiliki 1 kolom saja, seperti gambar berikut :
Langkah-langkahnya sebagai berikut :
1. Masuk ke Blogger.com
2. Klik Template => Edit HTML
3. Cari kode
]]</b:skin>
atau kode </style>
4. Copy kode css dibawah ini, lalu Paste dibawah kode
]]</b:skin>
atau kode </style>
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.sidebar-wrapper,.comments{display:none;}
#main-wrapper{width: 100%}
</style>
</b:if>
5. Klik Simpan TemplateCatatan :
- Jika kode diatas tidak berfungsi alangkah baiknya cek setiap kode css pada bagian sidebar, kotak komentar dan lebar halaman yang terdapat dalam template blog Anda, kurang lebihnya seperti dibawah ini :
.sidebar-wrapper
: Ganti dengan kode css sidebar template Anda, biasanya kode css sidebar seperti ini (.sidebar-wrapper
atau .sidebar
atau #sidebar-wrapper
atau #sidebar
)..comments
: Ganti dengan kode css kotak komentar Anda, biasanya kode css kotak koemntar seperti ini (.comments
atau #comments
atau .comment
atau #comment
).#main-wrapper
: Merupakan kode untuk menampilkan halaman agar menjadi full width 100%.Dibawah ini adalah kode css agar kotak komentar muncul pada halaman statis atau static page :
<b:if cond='data:blog.pageType == "static_page"'>
<style>
.sidebar-wrapper{display:none;}
#main-wrapper{width: 100%}
</style>
</b:if>
Sekian artikel mengenai Cara Membuat Halaman Statis Full Width di Blog. Kurang lebihnya mohon maaf.Semoga Bermanfaat...
Makasih ficri :D
BalasHapusiya sama-sama mbak nunu :D
Hapustag kondisional memang bisa diandalkan buat menyembunyikan bagian template yia bos.., termasuk sidebar dihalaman statis yia bos...
BalasHapusbetul sekali sob...
Hapusmas saya boleh mita template blog ini ga ? =D
BalasHapusmaaf bila menggangu
Ini Template Beauty Sob
Hapusmas saya boleh mita template blog ini ga ? =D
BalasHapusmaaf bila menggangu
iya nanti saya share disini templateseo100.blogspot.com
Hapuspaling lambat sekitar 3 hari lagi...
iya cukup mudah sekali tinggal copy paste saja kodenya... :)
BalasHapusmakasih mas informasinya..
BalasHapusoke sama-sama...
Hapusmakasih sharingnya mas, saya baru tahu cara seperti ini... biasanya blog saya bawaan template yg halaman statisnya gak pakai sidebar :D
BalasHapusiya sama-sama semoga bermanfaat...
HapusIzin bookmark ya, Bang.. Makasih :D
BalasHapusiya Beb :) silahkan dipelajari...
Hapussip
BalasHapusthenks yah.. cuman display:none sidebar dan fullwidth kan wrapernya ya
BalasHapusiya mas, kode itunya sesuaikan dengan yang ada di template masing-masing...
Hapusoke
HapusGan kalo membuat seperti " Home, Berita, Beranda " itu gimana ya ????
BalasHapusitu namanya menu navigasi mas, coba saja cari tutorialnya
Hapusrapih artikelnya gan ,nice post deh
BalasHapustpi blognya kebanyakan iklan gan bikin ribet
klo bisa tanpa menu horizontal gmn? 100% polos
BalasHapusmaksudnya gimana ya ? tanpa menu horizontal/navigasi ? tinggal tambahkan id atau class navigasi kedalam css style seperti di atas. contoh :
Hapus.sidebar-wrapper{display:none;}
.nav{display:none;}
tambahin aja #menu-wrapper{display:none;}
Hapusbro, gimana kalo untuk halaman statisnya divariasikan,
BalasHapusmisal untuk sitemap biasa saja ga ada yg di-display none, tp untuk halaman contact ada yg di-sidplay none.
Gan pada blog saya bisa jalan pake kode dibawah
BalasHapus.sidebar,.comments{display:none;}
tapi untuk lebarnya masih sama gan, ga ada reaksi , alias ga full gan, pake kode dibawah
#main-wrapper{width: 100%}
apa ada solusi? sebelumnya terimakasih.
#main-wrapper{width: 100%}
Hapus100% ganti sob dengan px, misal 940px sesuaikan dengan main-wrapper blog ente kalau gak mau lwbarnya full halaman
Mas...kalau di template default blogger gimana ? karena saya sudah coba tapi tidak berhasil. Mohon di bantu
BalasHapusbisa saja sih sebenarnya, cuman kamu harus tau mana yang jadi id atau class yang menjadi ukuran untuk sebuah laman, misalnya beberapa id atau class pada umumnya yaitu :
Hapuswrapper
main-wrapper
outer
outer-wrapper
content-wrapper
dan id atau class dapat berbeda-beda sesuai dengan template yang digunakan
Terima kasih mas.
Hapusoke sama-sama, semoga paham...
Hapusterima kasig,, it's work!!
BalasHapusSelamat siang mas. Maaf saya masih blm berhasil. Bisa bantu sy cekin ID n CSS nya. Sy bisa kontak ke mana mas Ficri. FB bisa ya ?
BalasHapus