07 April 2011

Membuat Halaman Penuh tanpa sidebar Blogger Baru

Setelah berputar-putar mencari tips tentang cara membuat halaman penuh tanpa sidebar pada template baru blogger, akhirnya kudapatkan tipsnya orang bule.  Dan ternyata setelah kupraktekkan 100 persen berhasil.
Dalam melakukan percobaan saya memakai template watermark new template blogger, dengan sidebar di kiri kanan posting.

Hasil percobaan bisa dilihat di blog saya yang lain berikut ini silahkan diklik:
  1. Sidebar masih ada di kiri kanan halaman posting
  2. Sidebar kanan hilang, tapi yang sebelah kiri masih ada
Berikut ini caranya :
  1. Membuat halaman penuh tanpa sidebar  Pada template dua kolom  Awesome Inc dan Watermark
  2. Tambahkan kode ini tepat di atas kode </head> template anda :
    <b:if cond='data:blog.url == "http://blogENTE.blogspot.com/p/page.html"'> <style type='text/css'> .main-inner .columns { padding-right: 0; } .main-inner .fauxcolumn-center-outer { right: 0; _width: expression(this.parentNode.offsetWidth - parseInt("$(main.column.left.width)") + 'px'); } .main-inner .fauxcolumn-right-outer { width: 0px; } .main-inner .column-right-outer { width: 0px; margin-right: 0; display: none; } </style> </b:if>
    Setelah itu, klik save.
  3. Membuat halaman penuh tanpa sidebar  Pada template Picture Window
    Tambahkan kode ini tepat di atas kode </head> template anda :
    <b:if cond='data:blog.url == "http://blogENTE.blogspot.com/p/page.html"'>
    <style type='text/css'>
    .main-inner .columns {padding-right: 220px;}
    .main-inner .fauxcolumn-center-outer {right: 220px;}
    .main-inner .fauxcolumn-right-outer {width: 220px;}
    .main-inner .column-right-outer {margin-right: -220px; width: 220px;}
    .main-inner .column-right-inner table.section-columns td
    {display: none;}
    .main-inner .column-right-inner table.section-columns td.first
    {display: inline; width: 100%;}
    #sidebar-right-2-2 {display: none;}
    </style>
    </b:if>
    Yang terakhir, klik save.
Harap diperhatikan :
  1. http://blogENTE.blogspot.com/p/page.html silahkan anda ganti dengan URL POSTING yang akan dibuat penuh halamannya tanpa sidebar.
  2. Kalau anda sudah berhasil Membuat Halaman Penuh tanpa sidebar Blogger Baru jangan lupa ucapkan syukur Alkhamdulillah
Terima kasih.
Wassalam

16 komentar:

  1. o jadi bedanya gitu dengan yang template lama, ada sedikit penambahan pada cssnya, oke gan, trims dah mampir di blog ane,

    BalasHapus
  2. @ahmad maryuki, betul mas ada sedikit perbedaan css template lama dengan baru.

    BalasHapus
  3. mantab nih sob...tapi sih menurut saya lebih enak pake side bar...bise lebih menampilkan isi dari blog kita...hehe

    BalasHapus
  4. @Jalan Belakang, betul mas... semua itu tergantung selera dan kebutuhan masing-masing

    BalasHapus
  5. memang dengan sidebar menarik tapi menurut saya jika pada halaman postingan kita hilangkan sidebar tp dengan adanya link menuju entri lawas dan baru serta menu navigasi atau page juga memudahkan pengunjung agar mudah kembali dan tidak tersesat
    contohnya di

    http://www.longfield21.co.cc/2011/04/cse-dan-penerapan.html

    pengunjung di mudahkan dengan adanya breadcum dan page di atas judul postingan

    saya menerapkan kode berikut di blog saya

    <b:if cond='data:blog.pageType == &quot;item&quot;'>
    <style type='text/css'>.sidebar{display:none }#header-wrapper{display:none }
    #outer-wrapper {width:1000px;}
    #main-wrapper {width:1000px;float:left;}
    </style>
    </b:if>

    jadi lebar postingan lebih luas dan tidak di persempit oleh sidebar.

    atau jika ingin sidebar tampil lebih baik memakai togle accordion pada sidebar jadi loading lebih ringan seperti pada beranda http://www.longfield21.co.cc

    BalasHapus
  6. @Longfield, masukan yang baik mas tetapi perlu diingat bahwa masing-masing template mempunyai kode yang tidak sama sehingga hal terpenting dalam mendesain template harus mengetahui dulu karakteristiknya seperti template anda tentu berbeda dengan template milik saya. thanks...

    BalasHapus
  7. iya mas. memang tergntung template bawaan. jadi kita cuma tinggal seleksi - view selection source.. hehe

    BalasHapus
  8. bos, aku follow blog mu ya. artikelnya menbantu banget wat blogging

    BalasHapus
  9. Izul Simple, silahkan mas

    BalasHapus
  10. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  11. Menarik artikelmu, aku juga pingin coba, jangan lupa berkunjung ya ke blog aku!

    BalasHapus
  12. Komentar ini telah dihapus oleh administrator blog.

    BalasHapus
  13. Cara seting hilangkan semua sidebar, header dan footer gimana bro? jadi kayak halaman blank (kosong) gitu, nanti halaman ini mau ane isi dengan fb likes aja.

    Ada gak caranya bro?

    BalasHapus
  14. @belajartrus , bisa, intinya pada display:none

    BalasHapus
  15. terima kasih banyak ya mas, sangat membantu saya dalam memahami dan belajar tentang template blogspot

    BalasHapus

Catatan: Hanya anggota dari blog ini yang dapat mengirim komentar.