Menghilangkan Sidebar Ketika Mengakses Laman Blog

Laman Blog umumnya diartikan sebagai sebuah halaman atau konten statis (static content) pada sebuah blog, biasanya berisi tentang profil, alamat, privacy policy dll. Sedangkan sidebar merupakan panel yang biasanya terdapat pada sisi kanan / kiri blog, dan bisa diisi dengan konten widget atau script HTML tertentu.

Mungkin Anda pernah melihat sebuah blog dengan konten atau laman yang seolah terlihat berbeda – beda, misalkan  ketika mengakses laman/ static page tampilan sidebar blog jadi menghilang dan posisi konten postinganya jadi melebar (post wrapper), atau warnanya jadi berubah, hal tersebut memang sangat mungkin untuk dilakukan yaitu dengan cara mengatur/menambahkan tag kondisional (conditional) tertenu pada template blogspot yang digunakan. Pada artikel Cara Supaya Widget Blog Tampil di Halaman Depan Saja itu juga menggunakan tag kondisonal, hanya saja yang diaturnya adalah lebih spesifik dimana tag kondisonal diselipkan pada setiap widget.

Tag kondisonal bisa mengatur id ataupun class yang terdapat pada blog,  sehingga bila dalam kondisi tertentu, class ataupun id yang dipanggil bisa memiliki isi properti yang berbeda. Misalkan saja saya memili id untuk postingan artikel dengan nama #post-wrapper kemudian sidebarnya dengan nama #sidebar-wrapper, dalam kondisi biasa id yang ada memiliki properti seperti berikut

#post-wrapper {
    background: transparent;
    float: left;
    width: 70%;
    max-width: 700px;
    margin: 0 0 10px;
}
#sidebar-wrapper {
    background: transparent;
    float: right;
    width: 30%;
    max-width: 300px;
    margin: 0 auto;
}

Dengan menambahkan tag kondisonal Saya bisa mengatur post wrapper dengan nilai properti yang berbeda, misal ketika berada/mengakses laman blog,  post wrapper memiliki lebar 100% dan sidebar dihilangkan atau dengan nilai properti seperti berikut

#post-wrapper {
    width: 100%;
    max-width: 100%;
    margin: 0;
}

#sidebar-wrapper { display:none;}


Caranya Saya hanya tinggal menambahkan tag kondisional seperti berikut

<style type='text/css'>
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
#post-wrapper{width: 100%; max-width: 100%; margin: 0;}
#sidebar-wrapper { display:none;}
</b:if>
</style>

PageType biasanya akan diikuti dengan nilai static_page untuk halaman statis atau item untuk halaman postingan. Kita bisa saja mengisi nilainya menggunakan url/halaman tertentu, dan tentunya dengan menggunakan parameter berikut <b:if cond='data:blog.url kemudian diikuti dengan nilai/url tertentu yang ingin kita tambahkan.


Ketika kondisionalnya sudah dibuat, maka Anda perlu mengatur / mengisinya dengan class/id yang ingin Anda atur nilainya secara berbeda dari kondisi awalnya. Setiap id / class yang terdapat masing – masing blog mungkin akan berbeda, maka dari itu Anda harus paham betul dengan id ataupun class yang akan Anda rubah.

Menghilangkan Sidebar Ketika Mengakses Laman Blog

Saya asumsikan misalnya disini Anda memiliki id sidebar dengan nama #sidebar-wrapper, kemudian untuk posting artikelnya memiliki id dengan nama #post-wrapper
  1. Masuk ke mode EDIT HTML template masing – masing 
  2. Masukan kode dibawah ini diatas kode </head> 
    menghilangkan sidebar ketika mengakses laman

    
    <style type='text/css'>
    <b:if cond='data:blog.pageType == &quot;static_page&quot;'>
    #post-wrapper{width: 100%; max-width: 100%; margin: 0;}
    #sidebar-wrapper { display:none;}
    </b:if>
    </style>
    
  3. Terakhir Simpan

Sekarang Anda bisa langsung mengujinya, bila diperhatikan ketika mengakses laman blog,  sidebar pada laman/static page blog secara otomatis menghilang,  kemudian jika melakukan inspek elemen pada posting artikel (post-wrapper),  maka Anda akan mendapati properti dengan 2 nilai yang berbeda, seperti yang terlihat pada id berikut 



tag kondisional sudah berhasil ditambahkan

Tag Kondisional lainnya untuk menyembunyikan Sidebar


Menyembunyikan sidebar di halaman artikel dan statis blog
 
<b:if cond='data:blog.pageType == &quot;item&quot;'>
 <b:if cond='data:blog.pageType == &quot;static_page&quot;'>

TAMBAHKAN CLASS/ID SIDEBAR yang ingin disembunyikan disini

 </b:if>
 </b:if>

Menyembunyikan sidebar pada halaman tertentu blog
 
 <b:if cond='data:blog.url == &quot;ALAMAT URL &quot;'>

TAMBAHKAN CLASS/ID SIDEBAR yang ingin disembunyikan disini

</b:if>

Menyembunyikan sidebar pada halaman – halaman URL tertentu

<b:if cond='data:blog.url == &quot;ALAMAT URL &quot;'>
<b:if cond='data:blog..url == &quot;ALAMAT URL &quot;'>
<b:if cond='data:blog..url == &quot;ALAMAT URL &quot;'>
TAMBAHKAN CLASS/ID SIDEBAR yang ingin disembunyikan disini
</b:if>
</b:if>
</b:if>

Silahkan di explore sendiri, selamat mencoba…

14 Responses to "Menghilangkan Sidebar Ketika Mengakses Laman Blog"

  1. Si akang mah pinter ih soal edit HTML.. saya jadi pengen mendalamnya juga biar bisa utak-atik blog sesuka hati...

    ReplyDelete
  2. sepertinya mas admin lagi giat bermain koding....dalam dunua ngeblog sangat erat kaitanya dgn hal hal ini mas, jadi kalau ingin tahu kode kode html dan segala macam tetek bengeknya perlu mencoba edit edit yg ginian...

    ReplyDelete
    Replies
    1. benar sekali mang,,, yah belajar sitik2 biar .. hehe

      Delete
  3. Dulu sy pernah terobsesi dengan theme yg halaman post-nya satu kolom Mas...(katanya bagus untuk adsense)....tp jarang yg sesuai selera....jd sy ingin robah sendiri theme yg dua kolom jd satu kolom di halaman postingan...tp karena gak terlalu paham jadinya berantakan....hehehe....nantinya kalo kumat lagi pake tutor ini ach....

    ReplyDelete
    Replies
    1. Kalau teknik inimah kita bisa lebih fleksibel,,, karena menggunakan kondisi2 tertentu,,, misalnya dihalaman depan tidak ada sidebar,, kemudian ketika di baca ada sidebarnya,,, jadi bisa lebih variatif

      Delete
    2. bagusjuga jika blog butut tapi keren punya saya seperti yang dimaksudkan oleh mang purba ya...sok atuh tutorialnya di tunggu ya

      Delete
  4. Mohon maaf nih mas, kenapa kode2 html nya nggak make pre aja mas. Kan lebih rapi..

    ReplyDelete
    Replies
    1. oh iyah,, makasih yah,,, entar tak rapihin.. hehe

      Delete
  5. kebetulan ya mampirkesini emang ketika buka laman blog sidebar suka jadi nggak terpantau karena kepentingannya hanya artikelnya doang, maka alangkah baiknya jika sidebar tersebut dihilangkan dan dipetruskan saja atuh yah...#ehh

    ReplyDelete
    Replies
    1. Saya juga nurutan desacilembu.com

      Delete
    2. Nah lho, kalau udah gini terus saya nurutan saha? Masa nurutan randa sebelah? :D

      Delete
  6. keren nih... bisa dicoba di blog blogspot saya...

    ReplyDelete
  7. Halo gan.. duh terima kasih banyak.. simpan postinganya untuk saya buka saat saya butuh tuk edit template2 saya.. smoga agan dapat kebaikan yang lebih berlimpah ya.. aamiin

    ReplyDelete

Komentar yang Anda kirim akan terlebih dahulu di moderasi oleh Admin