How to Use Conditional Tag For Beginners - (Case Study)

Have you ever wanted your blog loading wants to be lighter or attributes you want the look of your blog to appear different for each page?

As an example want to display the Widget certain blogs only on article pages alone while on the home page is not displayed, or want to ask a specific design in certain pages while other pages are not, or want to show Adsense ads layout and different ad types between display on the homepage with look at other articles and other similar cases,

If you desire more or less like that, then as a solution you can involve the use of conditional tags on your blogspot template code.

What is it conditional tags?
Conditional tags is not a foreign term in the world of programming languages, in the algorithm and the world of programming languages the term is often referred to as "flow control", if you are a programmer or have ever studied algorithms and programming languages you must be familiar with the term "Flow control", and you must know what it does and when to use.
OOO 
But for those of you who happen to have no foundation and experience in the world of programming languages and you happen to be the new beginner bloggers plunge in the blogging world, and incidentally not yet familiar with the use of the conditional tags, I'm sure will be a little confused by the use of conditional tags.

Through this article I will explain in full and at length about this conditional tag, and I hope you can understand and can apply it on your blog that you can use to customize the look of your blog to match what you want.

# TAG TO KNOW WHAT IS CONDITIONAL?


For a blog to a flat form blogspot conditional tags are special code (code templates) that can be used on your blog template that serves to set the display at certain pages or specific parts on your blog so that appearance can be customized to what you want and can be distinguished to see the other pages on your blog, even advanced conditional tags you can use to create a blog page becomes lighter.

In general types of writing code tag format conditional on Blogspot are as follows:

One case (for simple cases):
<b:if cond = 'condition'>      
       CODE
</b:if>
The series of code ditas have understanding, if the conditions are fulfilled then the process CODE, if not met will not be processed CODE

For the two cases:
<b:if cond='one_condition'>
      CODE 1
<b:else/>
      CODE 2
</b:if>
The circuit has a sense of the above code:
If one_condition are met then be processed is CODE 1, if not met then be processed is CODE 2. Code <b: else /> can you interpret otherwise.

Tags or nested conditional (conditional tags are placed inside another conditional tag):
<b:if cond='condition'>
     <b:if cond='condition2>
         YOUR CODE
    </b:if>
<b:else/>
     YOUR CODE 2
</b:if>
 
Understanding nested conditional tags nested conditional tags as well as the above, that distinguishes it is on a conditional tag code are conditional tags in it.

The code above is just some code format writing conditional tags in general and only for a few cases, in reality conditional tags can be customized and we can set this quickly so that it complies with the conditions to be desired, especially for cases related to the customization page blogging ber flatform blogspot.

# Use of Operator on a conditional tag

Some conditional tag formats such as sample code above structure using only the == operator or can be interpreted as the same as,
Examples of conditional tags with operator ==
<b:if cond='data:blog.pageType == &quot;static_page&quot;'>
         KODE
    </b:if> 
  
The code above can be interpreted:
If the page is a static page, the execution or the process CODE, CODE means that you wrap the conditional tag above will be in the process if the blog page that opens is a static page.

There are times when the operator types used are operator! = Or <> (Read: not the same as), his sense, of course, different from the conditional tag that uses the type of operator == (read: the same as)

Examples of conditional tags to the operator ! = (Read not equal to or not)
<b:if cond='data:blog.pageType != &quot;static_page&quot;'>
          CODE
    </b:if>
The code above can be interpreted:
If the page is not static page then run code, code meaning wrapped conditional tags will be processed by the machine blogger if a page is opened instead of static pages.


Do not worry if you are confused with the above code, you must remember is its course and its logic format, please be continued to read to better understand more detail.

# TAG CONDITIONAL USE WHEN?

As mentioned above, the conditional tags one can use when you want a specific display (eg, a special widget, Adsense ads, or design to see other blog), where the views are only wanted to appear on certain pages only be in one certain pages while other pages do not display.

Some of the cases we have to use conditional tags are as follows:
Example 1: 
Suppose you want to display a different title descripsi, to the home page with a page of articles, for example, when opened the home page, the description should read "abc", whereas when the opened page post or page article then descripsi title should read "xyz".


Example 2: 
I want to show the widget recent post, only appear on post pages, but when on the home page widget that does not display.

Some cases such as the above can be solved using conditional tags you need to add in your blog template code corresponds to the setting you want.

# TAG CONDITIONAL ON HOW TO USE YOUR PAGE BLOG

Here's a set and the various uses of the conditional tags to specific pages on your blog:
a. Tag usage Conditional on page Homepage

The home page or the home page or can be referred to as the index page is the main page of your blog, this page open when you access your blog using the primary address of your blog, for example my blog: homepage page is http://codestructured.blogspot.co.id

If you want a view (a particular widget, AdSense ads, text or other views), just wants to appear on the main page, the code you wish to view must be wrapped with conditional tags to the homepage.
<b:if cond='data:blog.pageType == &quot;index&quot;'>
      YOUR CODE
</b:if> 
Translation of the above code:
If the page is the page index (one homepage) then process the received code.
YOUR CODE, you can fill with any code eg AdSense ad code, widget code, or any code.

By wrapping your code with the code on the look you want for the code will appear on the main page of your blog.

b. Tag usage Conditional on article page Posts

Page article / post or page can also be referred to the item page is the page on your blog is a special display articles of your blog posts, for flatform Blogspot blog to a page can be classified into the item page when the page is created using the menu entry.

In general for Air flatform blogspot blog post or page article page items have the following url format:
http://yourblogname/2016/06/name-page.html
To set a display (eg a special widget, adsense ad unit code, or view lainny a) in order to display only appears in the article pages only, the code for that view should be your wrap with conditional tags to page article as follows:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
       YOUR CODE
</b:if>
YOUR CODE. you can fill with any code that you want, so look for the code will appear on the item page or pages of your blog articles are not only posted on other than articles.

c. Use of Conditional Tags in Static Pages

 Maps can be categorized as static pages when a page is created using the menu Page / Page.

Static pages are typically used to create special pages like pages about, contact us page privacy policy pages and other similar pages.

For a blog to a flat form blogspot URL format static pages usually have the format:
http://yourblogename.blogspot.com/p/name_page.html
If you want a display for example: a special widget, the code unit adsense ads, or display design blog lainny a, and the view just want to look or appear on the page static just is not posted on the other, then you need to wrap the code display commands with conditional tags for static pages, as follows:
<b:if cond='data:blog.pageType == &quot;item&quot;'>
      YOUR CODE
</b:if>
YOUR CODE, can be filled with code to see anything you want, so look for the code will only appear in your blog static pages only, not on other pages.

c. Tag usage Conditional on Page Error Page (page not found 404

Page error page is a special page that appears when the URL in your blog posts can not be found.

For those of you who want to see specifically where it only wants to see you appear in a 404 page not found it, then you have to wrap the display code with conditional tags to a page error page, as follows:
<b:if cond='data:blog.pageType == &quot;error_page&quot;'>
      YOUR CODE
</b:if>
Translation of the above code:
If the page is a page error page then processes the received code. 
Please fill part of the received code with your zoom display code appears on the page not found any.
d. Conditional on the use of Tag Specific Pages

What if I only want to show a display ad, or design a custom widget to see more but see it only wants to appear in one of the certain pages, does this work?

Of course, I can.

There is a special conditional tag that you can use to display a view that can only be performed on a certain page that you want.

Format conditional tags that you can use are as follows:
<b:if cond='data:blog.url == &quot;URL PAGE &quot;'>       YOUR CODE</b:if>
Or use the format:
<b:if cond='data:blog.url == &quot;URL PAGE &quot;'>       
          YOUR CODE
</b:if>
Translation of the above code:
If the page is a page with URL url PAGE then process the received code.
PAGE URL, you can fill with url blog page for the look you want appears.

For example, I want to put an ad but the ad would only want to appear on the page about which has the url http://codestructured.blogspot.co.id/p/about.html, then the conditional tag code that can be used are as follows:
You can choose one of the above conditional formatting tags, such as below:
<b:if cond='data:blog.canonicalUrl == &quot;http://codestructured.blogspot.co.id/p/about.html&quot;'>  
          ADVERTISING CODE
</b:if>
By installing a conditional tag above code on your blog template, the code ad will appear only on pages that have a url about http://codestructured.blogspot.co.id/p/about.html.


e. Use of Conditional Tag On Page Label

Weather label will usually show up or show up when accessed label blog articles are used, or when you access the menu blog that uses categorization menu with the label, or the search results page on the blog.

This page usually has a URL format as follows:
http://codestructured.blogspot.co.id/search?q=label 
If you want to ask something such as an ad, a special widget that just wants to appear on the page label alone, then you can wrap your code with conditional tags to label as follows:
<b:if cond='data:blog.searchLabel'>
         YOUR CODE
</b:if>
Translation of the above code:
If the page is a page of search results, the process of your code. 
YOUR CODE, please enter the code you use to display things such as advertisements, widgets or anything.

f. Conditional on the use of Tag Archive page

Blogspot also familiar archive page, this page will appear when your blog archive accessible,
url format for the blog archive pages usually have a url format, as below:
http://codestructured.blogspot.co.id/search?q=archive
If you want to see on the page is different from other pages tapilan you must install the display code with conditional tags to archive pages as follows:
<b:if cond='data:blog.pageType == &quot;archive&quot;'>
        YOUR CODE
</b:if>
Translation of the above code:
If the page is an archive page then processes the received code.
YOUR CODE, you can fill in the code you use to display something, by using conditional tags above the display will only appear on archive pages only.

g. Use of Conditional Tag On Page Mobile

Mobile page is any page, whether the archive page, front page (homepage), the search page, or a page not found 404 or more pages, but appear when the page is accessed using a mobile device.

You can use conditional tags to specific cases so that one-page view will only appear when accessed using a mobile device such as a smartphone, tablet or another mobile device.

Format conditional tags for mobile pages are as follows:
<b:if cond='data:blog.isMobile'>
        YOUR CODE
</b:if>
Translation of the above code:
If the page is accessed via a mobile device then processes the received code.
The code above only applies if your blog template enabled mobile devices
through the menu Template > Click Image gears for mobile template, then select "Yes show mobile template on mobile devices,

As shown in the figure below:
OOO 
CASE STUDY # TAG CONDITIONAL USE SOME

 Here are some case studies to use conditional tags on your Blogspot:

Case # 1:

I want to show the widget in the sidebar RecentPost but only appear on the page Posts Only, whereas if in Front page (homepage) The widgets do not appear.

To resolve the above cases, the steps are as follows:
a. Please create a widget using the menu layout / layout on your Blogspot account, then click the add button gadget, select the widget HTML / Javascript, love the title name in the box provided, then copy and store your widget code.

b. Now go to your template editor.
Select the template menu > Edit HTML, do a search with the title of the widget that you create. widget code format is usually like this
<b: widget id=......
 please show the structure of the widget code as illustrated below:
OOO 
Approximately will look like the image above, the contents of which I give the widget box usually wrapped with < b: includable id = 'main' > see the arrow and closed with a code </ b: includable >

In accordance with case studies that appear in the pages widget only articles only, then the contents of the widget (see in the given box), should be wrapped in a conditional tag to the item page or posting articles ( see the code in red below )

Please replace or modify the code marked box as shown in the figure, more or less have to look like the code below:
        <b:if cond='data:blog.pageType == &quot;item&quot;'>
            <!-- only display title if it's non-empty -->
            <b:if cond='data:title != &quot;&quot;'>
                 <h4 class='title'><data:title/></h4>
           </b:if>
           <div class='widget-content'>
           <data:content/>
          </div>     

       </b:if>
If the translated code above is as follows:
If the type of page is the page the article's posting, then display widget
By way over the widget in question will only appear on article pages posts only, you can also modify other widgets according to your desire.

Example # 2:

I want to display a description of the blog title is different, when opened is the home page, the description should be the appropriate title which I set in the blog settings setting, whereas if the opening is posting the article page title description should be the title of the article in question.

For such cases, the steps are as follows:

a. Login to your Blogspot account

b. On the left side of the menu bar select menu templates > Edit HTML to display HTML editor

c. Do a search Click the HTML editor the first time, then press CTRL + F to activate the search.
Please do a search < Data: description / >
for I have found my blog HTML code structure for the description more or less like the image below:
OOO 
The above code will create a title description for each page of the blog is always the same, so that the description of the blog index page (homepage, search pages or label) is different from the article page posting then we must involve conditional tags in the above code.

In order to comply with the above case, if the accessed homepage then exit is a description of the blog, while if the accessed page article posting it to the title description we take the title of the article in question.

Please replace the code by box as shown in the picture above with the following code:
<b:if cond='data:blog.pageType == "item"'>
<data:blog.pageName/>
<b:else/>
<data:description/>
</b:if> 
The above code translates as follows:
If the type of page is the page article (... == 
If the type of page is the page article (... == & quot; item & quot; '), then display the title of the article in question to the title description (<data: blog.pageName />), but if not (<b:else />) then display the blog description (<data:description />) for the title description.

COVER

The examples above are just a small part of the use of the conditional tag for simple cases, and only use the operator == (equal to), can also use operators (! = Not equal to) in accordance with the conditions you want.

There are many cases that can be solved with conditional tags, essentially tag is very useful to show the design of the page, or view certain parts on certain pages that were not the same as the other pages, even the use of the conditional tags advanced you can use to create pages your blog becomes lighter.

Conditional tags are actually only a small part of the command template code on your blog, if you gain a better understanding of the use of conditional tags simple and advanced, it will be very easy to do customize the look of your blog page.

Similarly, articles about the use of the conditional tag on Blogspot for beginners may be useful to you.

No comments:

Post a Comment

 
Copyright © 2016. Articles Basic - Blog.
About | Contact | Privacy Policy
Creative Commons License