Menghilangkan Sidebar di Postingan dengan Label Tertentu

Ditulis oleh: Adhy Suryadi

Ditulis pada: 1/17/2021

Menghilangkan Sidebar di Postingan dengan Label Tertentu - Postingan ini saya buat untuk menjawab pertanyaan sobat Blogger tentang cara menghilangkan sidebar di postingan dengan label tertentu. Sebenarnya trik ini sudah pernah saya buat pada postingan cara membuat tampilan halaman postingan berbeda berdasarkan label dengan javascript, namun tidak fokus pada cara menghilangkan sidebar, sehingga kemungkinan postingannya tidak bisa ditemukan di Kompi Ajaib.

Pada trik ini kita akan memerlukan tag conditional untuk label tertentu untuk menempatkan javascript yang berfungsi untuk menambahkan class pada tag body. Karena ini menggunakan tag conditional untuk label tertentu, maka tag ini tidak bisa disimpan di luar post.

Tag conditional untuk label tertentu ini seperti berikut ini:

<b:if cond='data:blog.pageType == &quot;item&quot; and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Label'/>
............
</b:switch></b:loop></b:if>

Dan berikut ini javascript untuk menambahkan class pada tag body yang akan disimpan pada tag conditional di atas.

<script>
//<![CDATA[
document.body.className += ' Label';
//]]>
</script>

Perhatian, spasi di depan Label seperti di atas untuk jaga-jaga agar class di body tidak mepet atau bersatu jika sebelumnya di tag body sudah ada class.

Sehingga jika tag cond dan javascript disatukan, maka akan tampak seperti berikut.

<b:if cond='data:blog.pageType == &quot;item&quot; and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Label'/>
<script>
//<![CDATA[
document.body.className += ' Label';
//]]>
</script>
</b:switch></b:loop></b:if>

Silahkan sesuaikan kode yang ditandai dengan label yang ingin Anda gunakan untuk class di tag body, misalnya dengan label Trik, sehingga menjadi seperti berikut.

<b:if cond='data:blog.pageType == &quot;item&quot; and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Trik'/>
<script>
//<![CDATA[
document.body.className += ' Trik';
//]]>
</script>
</b:switch></b:loop></b:if>

Kemudian silahkan simpan kode tadi di area post seperti berikut ini.

<b:includable id='post' var='post'>
  <article class='post hentry'.........>
    ..............
    ..............
  </article>
KODE TADI DI SINI
</b:includable>

Sehingga penampakannya seperti berikut ini.

<b:includable id='post' var='post'>
  <article class='post hentry'.........>
    ..............
    ..............
  </article>
<b:if cond='data:blog.pageType == &quot;item&quot; and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Trik'/>
<script>
//<![CDATA[
document.body.className += ' Trik';
//]]>
</script>
</b:switch></b:loop></b:if>
</b:includable>

Kemudian silahkan tambahkan CSS pada style blog Anda untuk menghilangkan sidebar seperti berikut.

.Trik .sidebar {
   display: none;
   visibility: hidden;
}

Jika ada label lain yang ingin ditambahkan, misalnya label Tips maka tambahkan kode berikut.

<b:case value='Tips'/>
<script>
//<![CDATA[
document.body.className += ' Tips';
//]]>
</script>

Sehingga penampakannya seperti berikut.

<b:if cond='data:blog.pageType == &quot;item&quot; and data:post.labels'><b:loop values='data:post.labels' var='label'><b:switch var='data:label.name'>
<b:case value='Trik'/>
<script>
//<![CDATA[
document.body.className += ' Trik';
//]]>
</script>
<b:case value='Tips'/>
<script>
//<![CDATA[
document.body.className += ' Tips';
//]]>
</script>
</b:switch></b:loop></b:if>

Sehingga CSS nya berubah menjadi berikut ini.

.Trik .sidebar, .Tips .sidebar {
   display: none;
   visibility: hidden;
}

Silahkan dicoba dan semoga bermanfaat.

Untuk penerapan kodenya, agar lebih jelas silahkan tonton video di bawah ini.