Lualu:
Eliminate the sidebar on articles with specific labels – I made this post to answer a Blogger friend’s question on how to remove sidebar in posts with certain tags. I actually did this trick in an article on how to create a different tag-based post page view with javascript, but I’m not focusing on removing the sidebar so the post can’t not be found in Kompi Ajaib.
In this tip, we will need a conditional tag for some tags in order to place javascript that is used to add classes to the body tag. Since it uses conditional tags for some tags, it cannot be stored outside of posts.
The conditional tags for these specific labels look like this:
<b:if cond='data:blog.pageType == "item" 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>And here is the javascript to add a class to the body tag which will be stored in the conditional tag above.
<script>
//<![CDATA[
document.body.className += ' Label';
//]]>
</script>Be careful, the space in front of the label as above is just in case the classes in the body are not tight or unified if there was previously a class in the body tag.
So if the cond and javascript tags are combined it will look like this.
<b:if cond='data:blog.pageType == "item" 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>Please adjust the code marked with the label you want to use for the class in the body tag, for example with the Trick label, so that it looks like this.
<b:if cond='data:blog.pageType == "item" 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>Then please save the code earlier in the post area as follows.
<b:includable id='post' var="post">
<article class="post hentry".........>
..............
..............
</article>
KODE TADI DI SINI
</b:includable>So that the appearance is like this.
<b:includable id='post' var="post">
<article class="post hentry".........>
..............
..............
</article>
<b:if cond='data:blog.pageType == "item" 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>Then add CSS to your blog style to remove the sidebar as follows.
.Trik .sidebar {
display: none;
visibility: hidden;
}If you want to add other labels, for example the Tips label, add the following code.
<b:case value="Tips"/>
<script>
//<![CDATA[
document.body.className += ' Tips';
//]]>
</script>While the appearance is as follows.
<b:if cond='data:blog.pageType == "item" 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>For the CSS to change as follows.
.Trik .sidebar, .Tips .sidebar {
display: none;
visibility: hidden;
}Please try and hope you find it helpful.
