Do You have a lot of elements or widgets that appear on the blog? Too many Widget’s blog will reduce the speed of loading. But if you feel important for some widgets or elements and wants to keep their existence, then a good idea to make arrangements on any page that elements want to display. This is usually call conditional tag.For those of you who are arranging the look of blog, now I share some techniques on how to show and hide elements or widgets on certain pages on a blog. The function of the technique itself is a way to create a blog page neater, more effective, dynamic look, even can make loading much faster.
I think this technique needs to be known and applied by the blogger on their blog. I suggest this because the layout of webpage and content quality is also a separate assessment criteria for both the admin and visitors.
Conditional Tag on Blogger
We can arrange any widget that would appear on the front page or whatever widget would be hidden in the page post/static, so the display of our blog more tidy.This technique is quite easy to implement in the blog, and only takes a few minutes. To show and hide the widget is only necessary to insert the conditional tag code in HTML as desired.
Example: Just compare this post with the Home page or any page.
The following technique is a way to show and hide widgets or elements on blog.
1. To display the elements / widgets only on Home page.
<b:if cond='data:blog.url == data:blog.homepageUrl'>
---element or Widget---
</b:if>Example:
<b:widget id='HTML1' locked='false' title='title' type='HTML'> <b:includable id='main'><b:if cond='data:blog.url == data:blog.homepageUrl'><!-- only display title if it's non-empty --> <b:if cond='data:title != ""'> <h2 class='title'><data:title/></h2> </b:if> <div class='widget-content'> <data:content/> </div> <b:include name='quickedit'/> </b:if></b:includable></b:widget>red is the limit.
blue is the conditional tag code.
or like this:
<b:if cond='data:blog.url == data:blog.homepageUrl'><style>--- CSS style ---</style> <script>--- script code ---</script></b:if>2. To display the element / widget only in the Post page.
<b:if cond='data:blog.pageType == "item"'>
---elements or Widget---
</b:if>3. To hide element / widget in the Post page.
<b:if cond='data:blog.pageType != "item"'>
---elements or Widget---
</b:if>4. To display the element / widget on specific page.
<b:if cond='data:blog.url == "URL"'>
---elements or Widget---
</b:if>5. To hide element / widget on a specific page.
<b:if cond='data:blog.url != "URL"'>
---elements or Widget---
</b:if>6. To display the element / widget only on archive pages.
<b:if cond='data:blog.pageType == "archive"'>
---elements or Widget---
</b:if>7. To hide the element / widget on the archive page.
<b:if cond='data:blog.pageType != "archive"'>
---elements or Widget---
</b:if>8. To display the element / widget only on a static page.
<b:if cond='data:blog.pageType == "static_page"'>
---elements or Widget---
</b:if>9. To hide element / widget on a static page.
<b:if cond='data:blog.pageType != "static_page"'>
---elements or Widget---
</b:if>The steps above can be used to display or hide certain elements, so webpage not fully loaded with a wide variety of widgets.