What are Conditional Tags? How to Use conditional tags to Display Elements only on specific?

Have you ever think why some Display Elements show only or not show on specific Page? Or Specific Post? Or Have you ever heard about Conditional tags?

Have you ever been confusing with like that codes in your Blogger template HTML? Or looking for what are they?

<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
<b:if cond='data:blog.pageType != &quot;item&quot;'>

Above codes are conditional tags.

When you are studying your blog template especially, if you are using the professional (third party) template, Have you ever think that how some certain elements or widgets appear only on certain types of pages?

Some certain widgets or elements of your template appear on the home page, but not on individual post pages also, sometimes sidebars appear on the homepage but not on individual post pages.

Also, if you are designing your Blogger template, you may prefer certain widgets or elements of your design to appear on certain types of pages or on the home page & not on individual post pages & you would prefer to display different buttons on different pages or apply a meta tag only to selected pages?

I will explain how you can easily control page elements to display or not on certain types of pages in your Blogger blog. For do that we use Conditional tags to edit our blog template. Conditional tags are Blogger template tags that allow you to specify parts of your template to appear only under certain conditions. That provides us better control over our templates, allowing us to specify what part of our template appears only under certain conditions.

You may wish to hide a widget or element on one page and display it on the other, need to remove the sidebar on certain pages, or even display buttons on select pages. This is exactly where conditional tags come into play. There are a number of tags available for blogger which, if applied correctly, it will help you modify elements of your blog template.

But remember that Conditional tags work with all of the standard Blogger templates except Dynamic Views, which does not accept customization. Some third-party templates may not accept conditional tags, but most do.

Before knowing about the Conditional tags, it is better to know about different types of pages on your blogger.

What are the different types of pages on your blogger?

1) home page     -   It’s your blogs home page.

2) Archive Page - Refers to archive pages. Pages that added by Archive widget that normally   has “_archive.html” ending in its URL belong to Archive page type (to be displayed when readers view your archive pages) 

   

3) Item Page  -  Refers to Post Pages that created by clicking new post button (the individual
post page)

4) Index Page     -  Includes home page + label page + search results page. (pages readers see   when they click the "Older Posts" and "Newer Posts” (links at the bottom of the page.) 

5) Static Page       - Blogger Pages created by clicking the new page button.

6) Label Page       - Blogger label-based pages contain similar or related posted articles.

7) Search Page    - Pages that provide a list of posts that matches the given query terms.

What are Conditional tags?

Conditional Tags are s Boolean data type that can be used in your blogger template to alter the display of content depending on the conditions that current page matches. Conditional tags tell Blogger what codes or content to display under specific conditions. That allows you to specify parts of your template to appear only under that certain conditions.  If you applied conditional tags properly, Conditional tags can make all that happen correctly.

List of conditional tags for different types of pages

There are different conditions to check the page type. You can use these conditions for the selective display. The following are a select few conditional tags you'll require the most:

Home page:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

First post:

<b:if cond='data:post.isFirstPost'>

Archive Pages:

<b:if cond='data:blog.pageType == "archive"'>

Specific page/URL:

<b:if cond='data:blog.url == "ENTER_URL_HERE"'>

Item page(post):

<b:if cond='data:blog.pageType == "item"'>

Static pages:

<b:if cond='data:blog.pageType == "static_page"'>

Index pages (includes homepage, label pages, search result pages and archive pages):

<b:if cond='data:blog.pageType == "index"'>

Archive pages:

<b:if cond='data:blog.pageType == "archive"'>

Posts and static pages:

<b:if cond='data:blog.url == data:post.url'>

Label-search pages:

<b:if cond='data:blog.searchLabel'>

404 Error Page:

<b:if cond='data:blog.pageType == "ERROR_PAGE"'>

Mobile Pages:

<b:if cond='data:blog.pageType == "data:blog.isMobile"'>

Particular URL only:

<b:if cond='data:blog.canonicalUrl == &quot; PUT_URL_HERE&quot;'>

How to use conditional tags to Display Elements only on specific Pages?

As we discuss the last post, you know that Conditional tags are Blogger template tags that allow you to specify parts of your template to appear only under certain conditions. That provides us better control over our templates, allowing us to specify what part of our template appears only under certain conditions.

You may wish to hide a widget or element on one page and display it on the other, need to remove the sidebar on certain pages, or even display buttons on select pages. This is exactly where conditional tags come into play. There are a number of tags available for blogger which, if applied correctly, will help you modify elements of your template. 

* Before you edit template HTML first you need to Back up your template.

1.Only or Not

The double equals " == " actually means TRUE. You can change the condition to FALSE, then just replace the first equal with an exclamation sign: "  !=".

You might like to display only on the home page. (TRUE)

<b:if cond='data:blog.canonicalUrl ==data:blog.canonicalHomepageUrl'>

Displaying on all pages other than the homepage (FALSE)

<b:if cond='data:blog.canonicalUrl !=data:blog.canonicalHomepageUrl'>

   

2.  How to apply & Displaying something on conditional tags?

To apply a conditional tag to a content, simply put the content between the opening <b:if cond…> and the closing </b:if>,

<b:if cond='THE CONDITION TAG'>

..Enter Content Here..

</b:if>

Example:
You might like to display a welcome message on the home page only. (TRUE)

<b:if cond='data:blog.canonicalUrl == data:blog.canonicalHomepageUrl'>

Welcome to my Blog

</b:if>

Displaying on all pages other than the homepage (FALSE)

<b:if cond='data:blog.canonicalUrl != data:blog.canonicalHomepageUrl'>

This is not the homepage but others.

</b:if>

3.Combining Conditions Together:

Use two or more conditions,

<b:if cond='data:blog.pageType == "item"'>

<b:if cond='data:blog.url != "URL_OF_POST_TO_EXEMPT"'>

...ENTER CONTENT HERE...

</b:if>

</b:if>

4.If you want to specify an alternate content (when the condition is false), you need to insert a <b:else/> tag followed by the content, 

<b:if cond='data:blog.pageType == "item"'>

ENTER CONTENT 1 (TO BE EXECUTED IF CONDITION IS TRUE)

<b:else/>

ENTER CONTENT 2 (TO BE EXECUTED IF CONDITION IS FALSE)

</b:if>

You can place the conditional anywhere in your template HTML, except inside a section or inside a widget content box. The content can be a div, a section, a style tag, another conditional tag.

5.Wrapping a widget with the conditional tags

Every widget other than the Blog Post Widget has this general structure like below,

<b:widget id='something' locked='' title='' type=''>

<b:includable id='main'>

Somethings here

</b:includable>

</b:widget>

Wrapping conditional tags can be done as,

<b:widget id='something' locked='' title='' type=''>

<b:includable id='main'>

<b:if cond='data:blog.canonicalUrl == &quot;The_Particular_Page_Url&quot;'>

Some things here

</b:if>

</b:includable>

</b:widget>

This code will display the widget on The Particular Page URL only (you have to provide this URL)

*Limitation-wrapping the blog post widget is little complicated as it has many b:includables.

You can learn more details from below, there are some Globally conditional data tags for all page types.

#AND

<b:if cond='data:blog.pageType == "index"'>

<b:if cond='data:blog.searchQuery'>

<!--search_page AND index_page-->

</b:if>

</b:if>

#OR

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/foo.html&quot;'>

<!-- static_site foo OR static_site bar -->

<b:else/>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + &quot;p/bar.html&quot;'>

<!-- static_site foo OR static_site bar -->

</b:if>

</b:if>

#NOT

<b:if cond='data:blog.pageType != "index"'>

<!-- all pages NOT index pages -->

</b:if>

<b:if cond='data:blog.url != data:blog.homepageUrl'>

  <!-- all pages NOT homepage -->

</b:if>

archive_page

<b:if cond='data:blog.pageType == "archive"'>

<!--archive_Page-->

</b:if>

error_page

<b:if cond='data:blog.pageType == "error_page"'>

<!-- all error pages-->

</b:if>

index_page

<b:if cond='data:blog.pageType == "index"'>

<!-- all index pages -->

</b:if>

<b:if cond='data:blog.url == data:blog.homepageUrl'>

<!-- only homepage -->

</b:if>

item_page

<b:if cond='data:blog.pageType == "item"'>

<!-- all item pages -->

</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "2014/08/foo.html"'>

  <!-- a item page from august 2014 with post-title 'foo'-->

</b:if>

label_page

<b:if cond='data:blog.searchLabel'>

  <!-- all label pages -->

</b:if>

<b:if cond='data:blog.searchLabel == "foo"'>

  <!-- for label 'foo' -->

</b:if>

search_page

<b:if cond='data:blog.searchQuery'>

    <!-- all search pages -->

</b:if>

<b:if cond='data:blog.searchQuery == "foo"'>

  <!-- for query 'foo' -->

</b:if>

static_page

<b:if cond='data:blog.pageType == "static_page"'>

  <!-- all static pages -->

</b:if>

<b:if cond='data:blog.url == data:blog.canonicalHomepageUrl + "p/foo.html"'>

  <!-- a specific static page with name 'foo' -->

</b:if>

I Hope the above details help you to know what are the Conditional Tags?  And How to use conditional tags to Display elements only on specific? And if you have any problem or know more on Conditional Tags, please share with us in the comments section below.

How to add a Text box to blogger post using HTML & CSS?

Have you ever see, bloggers use text boxes to present their data in their blog posts? Also, When we are blogging, sometimes we want to add a text box into our blogging post. 

This article will help you to put a text box in your Blogger Posts. Go to dashboard >> Post >> new Post and then enter "HTML Tab" while creating a post and paste below codes into the desired location & again switch to compose tab to view your text box. You can pick up any code as you expected as the image below the code.

1.       Sign into your Blogger account

2.       Click on Dashboard

3.       Then click on New post

4.       Now Open HTML Tab and enter the below code.

How to create a text box to a blogger blog?

For adding a text box into blogger post there are some simple codes that you can follow easily. The preview of the text box will be appearing below the HTML code.

1. To Create Editable Text box

<textarea rows="3" cols="10"> Type Your Text Here </textarea>

  

Type Your Text Here

2. To create a Read-only text box

<textarea cols="20" name="Privacy Policy" readonly="readonly" rows="5"> Type Your Text Here </textarea>

Type Your Text Here

3. To Create a Link Text box

<textarea> rows="5" cols="20" name="Link To Blog" readonly="readonly"> Type Your HyperLink Code Here </textarea>

rows="5" cols="20" name="Link To Blog" readonly="readonly"> Type Your HyperLink Code Here

Here some developed codes, with that codes you can add borders & background colors for your text box

4.      <div style="
         border: solid 5px #aaaaaa;
         background: #FF93E7;
         font-size: 18px;
         margin: 40px;
         padding: 30px;
         text-align: justify;
         ">
        Type Your Text Here
         </div>

Type Your Text Here

5. 

       <div style="
       width: 300px;
       height:70px;
       border:double 6px #00385B;
       ">
      Type Your Text Here
      </div>
      <br/>

Type Your Text Here

Attributes explanation:

·      The width attribute should be added (with values in pixels or percent, e.g. 500px or 67%) if the width of the whole border/frame is less than the text width.

·     The height attribute should be added (with values in pixels e.g. 500px) if you want a border/frame with exact height. Keep in mind, adding this attribute may result in text overflow. So, I recommend skipping this attribute.

·        After the border attribute has three types of values:

1.      Solid, alternatively, dashed, dotted, groove, ridge, double, inset and outset (read carefully the text inside the first 8 frames above),

2.      5px, which is the border width,

3.      #aaaaaa which is hex code for the border color.

·    The background attribute should be added if you want a colored background inside the text (DIY: try adding code without the border attribute).

·   The font-size attribute refers to the text size. Since this, you can shorten the text in the visual Blogger's adding going on an editor, you may skip this line in the above code.

·  The value after the margin attribute is the distance from each border such as top, bottom, right, and left, to the surrounding post elements That, usually above and below the border.

·    The value after the padding attribute is the distance from each border (top, bottom, right, and left) to the text inside the border/frame.

·   The text-align attribute controls the text alignment (left, center, right, justify) inside the borders. Since the text alignment can be controlled through the visual Blogger's post editor; you can skip this attribute too.

   

6. Controlling the width, height, and alignment of the border/frame 

<div align="center">
<div style="
border: double 5px #aaaaaa;
font-size: 24px;
margin: 40px;
padding: 30px;
width: 50%;
height: 150px;
">
Type your text here
</div></div>

Type your text here

also, try below codes. But not guaranteed about it

7.  <div style=”background-color: #d0f18f; border: 6px double orange; height: 100px; width: 200px;”>Type your text here </div>

8. <p style=”padding:6px; color: grey; background-color: white; border: black 2px solid”>Type your Text  Here</p>

9. <p style=”padding: 10px; color: red; background-color: white; border: black 2px solid”>Type Your Text  Here</p>

10. <p style=”padding: 10px; color: red; background-color: blue; border: black 2px solid”>Type Your Text Here</p>

Like the above text box also you can add Horizontally side by side images and draw a table in your blog post by using HTML code. 

I Hope the above 17 tips help you to add a Text box to blogger post using HTML & CSS? And if you have any problem or know more on this, Please share with us in the comments section below.