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> 
   
   
   

   
   <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 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…

PLEASE SHARE

Share it Share it Tweet Share it Pin it

Ahmad Zaelani

Seorang laki - laki biasa yang senang duduk sendirian di pinggir pantai, pengagum embun pagi dan lembayung senja, suka blogging, coding dan jogging. Moto hidupnya adalah hidup santai dan simple