Cara Efektif Menghilangkan Sidebar Pada Blog

no sidebar

Cara menghilangkan sidebar pada halaman tertentu - sama seperti judulnya cara ini merupakan trik untuk menghilangkan sidebar pada halaman tertentu seperti page, posting dll. mungkin sobat berkepentingan kemari untuk mengetahui cara menghilangkan sidebar karena beberapa alasan mungkin  ingin memghilangkan sidebar pada halaman kotak pencarian google seperti saya :p, baca juga cara membuat kotak pencarian google pada blog. trik ini hanya mengguanakan css dengan menggunakan atribut display:none; pada deklarator yang dipilih, dengan menggunakan tag pengkondisian yang mengatur sidebar akan tampil dimana dan akan di sembunyikan dimanan pada cara ini saya membagi trik menghilangkan sidebar untuk template yang berasal dari bloger design dan juga custom template(bukan berasal daari blogger)

Cara penggunaan

1. login blogger
2. template >> edit html
3. cari kode </head>
4. kemudian copy paste diatas kode </head>

untuk template bawaan blogger


<b:if cond='data:blog.url == "http://depermana-share.blogspot.com/p/blog-page_15.html"'>
<style type='text/css'>
.main-inner .columns {
padding-left: 0px;
padding-right: 0px;
}
.main-inner .column-left-outer {
display: none;
}
</style>
</b:if>

keterangan:

1. tulisan yang ditandai dengan warna kuning merupakan letak dari sidebar
2. tulisan yang ditandai dengan warna hijau merupakan posting/halaman yang ingin disembunyikan sidebarnnya

Untuk custom template


<b:if cond='data:blog.url == "http://depermana-share.blogspot.com/p/blog-page_15.html"'>
<style>
#sidebar-wrapper{
display: none !important;
}
#main-wrapper, .post {
width: 900px;}
</style>
</b:if>


keterangan:


1. tulisan yang ditandai dengan warna biru merupakan deklarator sidebar yang akan dihilangkan
2. tulisan yang ditandai dengan warna hijau merupakan posting/halaman yang ingin disembunyikan     sidebarnnya
3. tulisan yang ditandai warna merah merupakan lebar dari halaman yang telah dihilangkan sidebarnnya,
untuk mengetahui lebar dari main wrapper dan sidebar-wraper silakan cari ditemplate, setelah ketemu jumlah kan ukuran lebar dari main-wrapper dan sidebar-wrapper, saya asumsikan saya mempunyai lebar main-wrapper sebesar 600px dan lebar sidebar-wrapper sebesar 300 px kemudian saya jumlahkan 600+300=900px

Help

mohon maaf jika penjelasan saya diatas terlalu rumit tapi saya yakin sobat pasti akan mengerti, jika ada yang merasa belum dimengerti silakan tanyakan dikotak komentar dan dengan senang hati saya akan membantu sobat sebisa mungkin. tolong ya sedikit bantuan untuk saya dengan menklik tombol like facebook fan page di bawah ini dan juga berlangganan artikel dari depermana12 dengan mensubscribe email sobat dibawah ini. semoga artikel ini dapat bermanfaat bagi sobat :D


Comments

  1. Gan,, ni pake Read More otomatis yah,,
    gue ga yakin bisa sama jadinya,, nih dah gue tulis singkat,,
    mybloggerenjoy.blogspot.com/

    ReplyDelete
  2. Keren gan , Emang sih kalo urusan yang berhubungan sama Struktur Utama Template kyk Header ama lainnya , kita mesti main2 ama Tag Kondisional , jadi kesannya agak rumit , padahal sebenarnya kalo udah dijalani Yg namanya rumit tuh bakal Hilang , hehehe. Yah maklum Kang namanya juga Manusia , Kebanyakan "Mengeluh Sebelum Melakukan Sesuatu" , hehehe termasuk juga saya.

    Entar ane terapin lah buat masang Daftar Isi Tipe Galleria , kebetulan Widget ini membutuhkan Main-Wrapper Penuh tanpa Sidebar supaya tampilannya keliatan sempurna

    Thanks kang !

    ReplyDelete
    Replies
    1. bener banget tuh kang, emang kebanyakan orang bilangnya rumit, tapi sebenernya bukan rumit tapi gak mau mencoba!

      Delete
  3. knpa ya codenya ga bisa di copy?

    ReplyDelete
  4. Pak, aq mohon bantuan...
    Aq habis ganti custom template
    Tapi kok "Beranda, Postingan Lama, Postingan Baru" yang itunya malah jadi ada diatas postingan.
    Biasanya kan ada di paling bawah.
    Aq search di gugel, tp kayaknya belum ada yang bahas ttg cara mindahinnya.
    Mohon bantuannya pak, jika berkenan.
    Ga nyaman banget liadnya :(

    ReplyDelete
    Replies
    1. back up templatenya dulu

      pada template cari code yang seperi ini

      <div class='blog-pager' id='blog-pager'>
      <span id='blog-pager-newer-link'>
      <a class='blog-pager-newer-link' href='http://imajinasi-hari.blogspot.com/' id='Blog1_blog-pager-newer-link' title='Posting Lebih Baru'>Posting Lebih Baru</a>
      </span>
      <span id='blog-pager-older-link'>
      <a class='blog-pager-older-link' href='http://imajinasi-hari.blogspot.com/search?updated-max=2013-05-03T09:07:00%2B08:00&amp;max-results=2&amp;start=2&amp;by-date=false' id='Blog1_blog-pager-older-link' title='Posting Lama'>Posting Lama</a>
      </span>
      <a class='home-link' href='http://imajinasi-hari.blogspot.com/'>Beranda</a>
      </div>
      <div class='clear'></div>
      <div class='blog-feeds'>
      <div class='feed-links'>
      Langganan:
      <a class='feed-link' href='http://imajinasi-hari.blogspot.com/feeds/posts/default' target='_blank' type='application/atom+xml'>Entri (Atom)</a>
      </div>
      </div>

      kemudian pindahkan ke atas <div id='sidebar-wrapper'>

      Delete
    2. Hmm agak beda kodenya pak...
      Tapi aq udah nyoba mindahin yang mirip2

      Tapi katanya :
      Kesalahan menginterpretasikan template blog

      Invalid data reference newerPageUrl: No dictionary named: '' in: ['blog', 'skin', 'view']


      Kalo butuh liad kode template lengkapnya ada disini pak :
      http://btemplates.com/2009/blogger-template-green-scrapbook-diary/demo/

      Delete
  5. cari code

    <b:includable id='nextprev'>
    <div class='blog-pager' id='blog-pager'>
    <b:if cond='data:newerPageUrl'>
    <span id='blog-pager-newer-link'>
    <a class='blog-pager-newer-link' expr:href='data:newerPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-newer-link&quot;' expr:title='data:newerPageTitle'><data:newerPageTitle/></a>
    </span>
    </b:if>

    <b:if cond='data:olderPageUrl'>
    <span id='blog-pager-older-link'>
    <a class='blog-pager-older-link' expr:href='data:olderPageUrl' expr:id='data:widget.instanceId + &quot;_blog-pager-older-link&quot;' expr:title='data:olderPageTitle'><data:olderPageTitle/></a>
    </span>
    </b:if>

    <b:if cond='data:blog.homepageUrl != data:blog.url'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    <b:else/>
    <b:if cond='data:newerPageUrl'>
    <a class='home-link' expr:href='data:blog.homepageUrl'><data:homeMsg/></a>
    </b:if>
    </b:if>

    </div>
    <div class='clear'/>
    </b:includable>

    pindahkan dibawah <b:widget id='Blog1' locked='true' title='Blog Posts' type='Blog'>

    ReplyDelete
    Replies
    1. Tetap ga berpindah tempat pak, hiks hiks...
      Tak apalah, maaf pak sudah merepotkan, trimakasih bantuannya :)

      Delete
  6. Terimakasih banyak infonya ya :)

    ReplyDelete
  7. Makasih tutorialnya sob,. sangat membantu.

    ReplyDelete

Post a Comment

Silakan berkomentar dengan sopan sesuai dengan topik bahasan.
Komentar dengan menyertakan tautan hidup akan otomatis terhapus.