Cara Membuat Halaman Statis Full Width di Blog

Cara Membuat Halaman Statis Full Width di Blog
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 :
Cara Membuat Halaman Statis Full Width di Blog 1
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 == &quot;static_page&quot;'>
<style>
.sidebar-wrapper,.comments{display:none;}
#main-wrapper{width: 100%}
</style>
</b:if>
5. Klik Simpan Template

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 :

.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 == &quot;static_page&quot;'>
<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...

35 Responses to "Cara Membuat Halaman Statis Full Width di Blog"

  1. tag kondisional memang bisa diandalkan buat menyembunyikan bagian template yia bos.., termasuk sidebar dihalaman statis yia bos...

    ReplyDelete
  2. mas saya boleh mita template blog ini ga ? =D
    maaf bila menggangu

    ReplyDelete
  3. mas saya boleh mita template blog ini ga ? =D
    maaf bila menggangu

    ReplyDelete
    Replies
    1. iya nanti saya share disini templateseo100.blogspot.com
      paling lambat sekitar 3 hari lagi...

      Delete
  4. Ohh seperti itu ya, cukup mudah juga ya :)

    ReplyDelete
    Replies
    1. iya cukup mudah sekali tinggal copy paste saja kodenya... :)

      Delete
  5. makasih sharingnya mas, saya baru tahu cara seperti ini... biasanya blog saya bawaan template yg halaman statisnya gak pakai sidebar :D

    ReplyDelete
  6. Izin bookmark ya, Bang.. Makasih :D

    ReplyDelete
  7. thenks yah.. cuman display:none sidebar dan fullwidth kan wrapernya ya

    ReplyDelete
  8. Gan kalo membuat seperti " Home, Berita, Beranda " itu gimana ya ????

    ReplyDelete
    Replies
    1. itu namanya menu navigasi mas, coba saja cari tutorialnya

      Delete
  9. rapih artikelnya gan ,nice post deh
    tpi blognya kebanyakan iklan gan bikin ribet

    ReplyDelete
  10. klo bisa tanpa menu horizontal gmn? 100% polos

    ReplyDelete
    Replies
    1. maksudnya gimana ya ? tanpa menu horizontal/navigasi ? tinggal tambahkan id atau class navigasi kedalam css style seperti di atas. contoh :
      .sidebar-wrapper{display:none;}
      .nav{display:none;}

      Delete
    2. tambahin aja #menu-wrapper{display:none;}

      Delete
  11. bro, gimana kalo untuk halaman statisnya divariasikan,
    misal untuk sitemap biasa saja ga ada yg di-display none, tp untuk halaman contact ada yg di-sidplay none.

    ReplyDelete
  12. Gan pada blog saya bisa jalan pake kode dibawah
    .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.

    ReplyDelete
    Replies
    1. #main-wrapper{width: 100%}
      100% ganti sob dengan px, misal 940px sesuaikan dengan main-wrapper blog ente kalau gak mau lwbarnya full halaman

      Delete
  13. Mas...kalau di template default blogger gimana ? karena saya sudah coba tapi tidak berhasil. Mohon di bantu

    ReplyDelete
    Replies
    1. bisa 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 :
      wrapper
      main-wrapper
      outer
      outer-wrapper
      content-wrapper

      dan id atau class dapat berbeda-beda sesuai dengan template yang digunakan

      Delete
    2. oke sama-sama, semoga paham...

      Delete
  14. Selamat 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 ?

    ReplyDelete

Jika Ingin Memasukan Kode Script (CSS, HTML, JavaScript) Silahkan Gunakan Kode Dibawah ini :

1. Untuk Menyisipkan Kode Panjang Gunakan <i rel="pre">Kode Disini</i>
2. Untuk Menyisipkan Kode Pendek Gunakan <i rel="code">Kode Disini</i>
3. Untuk Menyisipkan Quote Gunakan <b rel="quote">Catatan Anda</b>
4. Untuk Menyisipkan Gambar Gunakan <i rel="image">URL Gambar</i>
5. Untuk Menyisipkan Video Gunakan <i rel="youtube">URL Video Youtube</i>

Iklan Atas Artikel

Iklan Tengah Artikel 1

Iklan Tengah Artikel 2

Iklan Bawah Artikel