Add Widget Tags for Layouts for Blogger

-

Widget Tags for Layouts

When you're using the Layouts theme to create the body section of your blog, you can use widgets to add page elements like pictures and a blogroll.

Types of tags

This section describes the HTML you can use inside of the closing tags.

 Includes (b:include)

 When to use includes

 Includes are most useful if you have a section of code that you want to re-use in several different places, or only include in certain circumstances.

 To do this, write the content inside a b:includable, then use b:include wherever you want it to appear.
Format

 
<b:includable id='main' var='thiswidget'>
  [insert whatever content you want here]
</b:includable>


Attributes
    

  • id (required): A unique identifier made up of letters and numbers. Each widget must have one includable with id='main'.
    • 

  • var (optional) An identifier made up of letters and numbers, for referencing data within this section.
    • 


If you make more includables with different IDs, they won't be displayed automatically. However, if you make an includable with id='new', then you can reference it in your main includable with <b:include name='new' /> and it will display that way.

The attributes for the b:include tag are as follows:


    

  • name (required): An identifier made up of letters and numbers. It must match the ID of an existing b:includable in the same widget.
    • 

  • data (optional): An expression or piece of data to pass on to the includable section. This will become the value of the var attribute in the includable.
    • 

  • cond (optional) An expression which causes the include to only execute when its result is true. This is the same as the cond attribute on a b:if.
    • 




Example


Here's an example that shows how to use b:includable and b:include.

The main thing to understand here is how the "main" section includes the "post" section within it. It passes along a post that it calls "p" and the included section references it as its var "post", then prints the title.

Note that the include only runs while the index is less than 10, so only a max of 10 posts would get rendered in this example (the index starts at 0).


<b:includable id='main'>
  <b:loop var='p' index='index' values='posts'>
    <b:include name='post' data='p' cond='index < 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>






Data Output (data:)


Examples


    

  • <data:title/> would print out the title of a widget
    • 




    

  • <data:photo.url/> - Size: <data.photo.width /> x <data.photo.height /> would print attributes of a photo component. A photo may have components such as url, height, and width. Using the "." notation indicates that we want the URL for this photo, rather than a URL from something else.
    • 




See more examples

See our complete list of the layouts data tags that are supported.






Loops (b:loop)


When to use b:loop

The b:loop tag lets you repeat a section of content multiple times. This is most commonly used for printing out each post in a list of posts for a given page, or each comment, or each label, etc.



Format

The general format for using loops is this:






<b:loop var='identifier' values='set-of-data'>
  [repeated content goes here]
</b:loop>






The 'identifier' (i) part can be any name you choose, and will be used to stand in for each new item in the list, each time through the loop. The set of data you specify for the values can be any piece of data described in the data tags article as being a list of items.

For example, in the blog posts widget, posts is a list. Code like the following will loop through each post, printing out the title for each one, with header tags around it.






<b:loop var='i' values='data:posts'>
  <h2><data:i.title/></h2>
</b:loop>






Notice how "i" takes on the value of each post in turn, so you can get the title from each one.

Number Range



A loop tag allows you to iterate across an inclusive number range, such as ‘1 to 3', ‘-3 to -9', where the value of the variable takes the number's value. The following example would create an unordered list of 1, 2 and 3.




<b:loop var='i' values='1 to 3'>
  <li><data:i /></li>
</b:loop>



Index Attribute



Loop tags also have an optional index attribute, which gives the zero-based index of the current iteration through the loop.











<ul>
  <b:loop var='number' index='index' values='9 to 7'>
    <li>Index: <data:index />, Number: <data:number /></li>
  </b:loop>
</ul>








This example would create an unordered list of:



    

  • Index: 2, Number: 7
    • 

  • Index: 0, Number: 9
    • 

  • Index: 1, Number: 8
    • 




If, elseif & else (b:if)




When to use if, elseif, or else

You can use the b:if, b:elseif and b:else tags to display certain content in particular cases, and other content in other cases. For example, you might only want to show certain text on the homepage, but different text when looking at individual posts.



Format


<b:if cond='condition'>
  [content to display if condition is true]
<b:elseif cond='another condition'/>
  [content to display if no previous if or elseif conditions have been true, and this elseif condition is true]
<b:else/>
  [content to display if no if or elseif conditions are met]
</b:if>
















The b:elseif and b:else tags are optional. Without them, the result will be either the content listed in the b:if section or nothing. The closing </b:if> is required in each case, however.

For "condition" you can put in anything that evaluates to either true or false. Some data tags are simply true/false values on their own, e.g. allowComments on a post. With other pieces of data, you can compare them with specific values to get a true or false. Here are some examples:











    

  • <b:if cond='data:post.showBacklinks'>
True if the current post is set to show backlinks.
    • 

  • <b:if cond='data:blog.pageType == "item"'>
True if the current page is an item page (post page).
    • 

  • <b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
True if the current page is an item page (post page) and the current post is set to show backlinks.
    • 

  • <b:if cond='data:displayname != "Fred"'>
True if this is not Fred's display name.
    • 

  • <b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
True if Fred is the display name, or the current page is a static page (not a post page).
    • 

  • <b:if cond='data:post.numComments > 1'>
True if the current post has more than one comment.
    • 

  • <b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
True if the current page is a specific post, or a page.
    • 

  • 

    • 


Switches (b:switch)
When to use a Switch
You can use b:switch tag much like you would use a b:if tag that has several b:elseif tags. The advantage of a switch branch is that you don’t need to repeat the variable name. You can easily read them to see what defines each case, and what the default case is.

Format



<b:switch var='[Data expression]'>
<b:case value="[Value 1]" />
 [Output if evaluation of var is equal to Value 1]
<b:case value="[Value 2]" />
 [Output if evaluation of var is equal to Value 2]
[… any other values]
<b:default />
 [Output if evaluation of var is not equal to any other stated b:case]
</b:switch>




Example
This example shows how to output a different header, depending on what type of page is being rendered.




<b:switch var='data:blog.pageType'>
<b:case value="static_page" />
  <h1>Page</h1>
<b:case value="item" />
  <h1>Post</h1>
<b:default />
  <h2>Blog Posts</h2>
</b:switch>




Attribute expressions (expr:)
When to use Expressions
You can use the expr attribute to set attribute values based on values in the data dictionary. 

Examples




    

  • <a expr:href='data:blog.homepageUrl'>Home</a>
A home link with the blog's homepage url.
    • 

  • <a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
A link with the blog's post RSS feed url. The ‘+' operator concatenates the two strings.
    • 

  • <a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
A link with the class "comment" when comments are allowed, and "no-comment" when they are not. The ternary operator (?:) takes the given boolean value and picks the first value (after the ?) if the boolean is true, or the second value (after the :) if the boolean is false.
    • 





Evaluated Expressions (b:eval)
When to use an Evaluated Expression
You can use b:eval tag to evaluate a more complicated expression than a standard data tag.

Format


<b:eval expr='[Expression]' />





Examples


    

  • min-height: <b:eval expr="data:newWidth * data:height / data:width" />px;
Output a calculated relative height, based on a new width value.
    • 

  • <b:eval expr="data:post.labels[0].url" />
Output the url of the first post label.
    • 

  • <b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
Output “Comment” when comments are allowed, and “Comments Disabled” when they are not. Note that this expression makes use of the ternary operator.
    • 







Variable alias (b:with)
When to use a variable alias
You can use b:with tag to temporarily store the value of a computed expression and avoid complicated inline expressions.

Format


<b:with var='myComputedValue' value='[Data expression]' />




Examples
For a complicated style attribute based on data variables, you can compute it before the rest of the HTML output, so that the nested HTML is easier to read.




<b:with var='style'
       value='"background-image: url(\"" + data:sourceUrl "\"); "
           + " width: " + data:width + "px; " '>
 <div id='header-outer'>   
   <div id='header-inner' expr:style='data:style'>
     <h1>My Header</h1>
   </div>
 </div>
</b:with>




Note that the variable will only exist for the child nodes of the b:with tag.






See an example
Click to see an example of how all of these tags are used in the HTML for a PageList widget in your blog.




Example
In this widget, you can see example usages of the b:widget, b:includable (and b:include), b:if (and b:else), and b:loop tags.




<b:widget id='PageList1' locked='false' title='Pages' type='PageList'>
  <b:includable id='main'>
    <b:if cond='data:title != ""'>
      <h2><data:title/></h2>
    </b:if>
    <div class='widget-content'>
      <b:if cond='data:mobile'>
        <select expr:id='data:widget.instanceId + "_select"'>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <option expr:value='data:link.href' selected='selected'><data:link.title/></option>
          <b:else/>
            <option expr:value='data:link.href'><data:link.title/></option> 
          </b:if>
        </b:loop>
        </select>
        <span class='pagelist-arrow'>&amp;#9660;</span>
      <b:else/>
        <ul>
        <b:loop values='data:links' var='link'>
          <b:if cond='data:link.isCurrentPage'>
            <li class='selected'>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          <b:else/>
            <li>
              <a expr:href='data:link.href'><data:link.title/></a>
            </li>
          </b:if>
        </b:loop>
        </ul>
      </b:if>
      <b:include name='quickedit'/>
    </div>
  </b:includable>
</b:widget>










































Comments











Post a Comment



















Popular posts from this blog









Add Custom Ads.Txt File in Blogger?






-















 The advertisement is the primary key for a publisher to generate money. The ads can be of many types and there are many ad providers that help publishers to make money from their blogs. But, it is very necessary to check the authenticity of the ads that are shown on a particular website. The verification of ads shown on a website can be achieved by ads.txt file. An ads.txt file secures both publisher and advertiser from frauds or viruses. This is essential to add the ads.txt file on your website or blog, so here we are discussing how you can easily add the ads.txt file in your BlogSpot blog.   Before adding ads.txt file on your blogger blog, let us know what exactly is ads.txt and how is it going to benefit us.   What is Ads.txt File?   The “Ads.txt” is simply a text file that can be placed on your blog's server and carries information about the advertising networks used by the blog's owner and the owner authorised these ads networks to show ads on the website. The main idea b...








Read more










Add Page Elements Tags for Layouts






-















  Page elements tags for layouts   The <body> section of a layout theme is made up of sections and widgets.    Sections are areas of your page, such as a sidebar, footer.  A widget is a page element such as a page, a blogroll, or anything else you can add from the “Page Elements” tab.     You can include any HTML you like around the sections in your theme.   Sections   Each section in your theme has opening and  closing tags that look something like this:    <b:section id='header' class='header' maxwidgets="1" showaddelement="no">   </b:section>     <b:section> tag attributes     id – (Required) A unique name, with letters and numbers only.  class – (Optional) Common class names are “navbar,” “header,” “main,” “sidebar,” and “footer.” If you change themes later, these names help Blogger determine how to transfer your content.  maxwidgets –- (Optional) The maximum number of widgets to allow in this section. If you don't spe...








Read more