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
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 == "static_page"'>
#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
- Masuk ke mode EDIT HTML template masing – masing
-
Masukan kode dibawah ini diatas kode </head>
<style type='text/css'> <b:if cond='data:blog.pageType == "static_page"'> #post-wrapper{width: 100%; max-width: 100%; margin: 0;} #sidebar-wrapper { display:none;} </b:if> </style> - 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 == "item"'>
<b:if cond='data:blog.pageType == "static_page"'>
TAMBAHKAN CLASS/ID SIDEBAR yang ingin disembunyikan disini
</b:if>
</b:if>
Menyembunyikan sidebar pada halaman tertentu blog
<b:if cond='data:blog.url == "ALAMAT URL "'>
TAMBAHKAN CLASS/ID SIDEBAR yang ingin disembunyikan disini
</b:if>
Menyembunyikan sidebar pada halaman – halaman URL tertentu
<b:if cond='data:blog.url == "ALAMAT URL "'>
<b:if cond='data:blog..url == "ALAMAT URL "'>
<b:if cond='data:blog..url == "ALAMAT URL "'>
TAMBAHKAN CLASS/ID SIDEBAR yang ingin disembunyikan disini
</b:if>
</b:if>
</b:if>
Silahkan di explore sendiri, selamat mencoba…
TAMBAHKAN CLASS/ID SIDEBAR yang ingin disembunyikan disini
</b:if>
</b:if>
</b:if>
Silahkan di explore sendiri, selamat mencoba…
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
Si akang mah pinter ih soal edit HTML.. saya jadi pengen mendalamnya juga biar bisa utak-atik blog sesuka hati...
ReplyDeleteSaya juga lagi belajar mang..
Deletesepertinya 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...
ReplyDeletebenar sekali mang,,, yah belajar sitik2 biar .. hehe
Delete