Blogger Page HTML Tutorial
To Introduces Additions To Blogger Template Language. All New Terms & Expressions Defined Then Reviewed. 10 Code Examples Of HTML Edits To Pimp Out Blog Page/Post These Example Can Be Used As A Building Block or A Hands On Practice Guide For Inexperienced.
Reading The Entire Blog Is Recommended In Order To Become Familiar and Gain A Full Understanding, Of The Primary Expressions HTML Language and Terminology To Even Begin.
Short Explanation of Reason Behind Blogger Library Adjustments or Should I say Improvements :
Recently HTML5 Canvas And Javascript Have Started To Explode On The Flash Ghost Town OF The Web, Beyond That HTML5 Baby Bro HTML Is A Stone Cold Pimp That Will Introduced You To a new set of expressions to the Blogger template language, The Purpose Of The Revamped Library Is To Share A Pimpishly Awesome Blog Page. The Entire Extension And New Implementation of Functionality Added Was Designed to let you customize the HTML of EVERY POST/PAGE On Your BLOG!!! YAY :) So Without Further Or Due Let The Introduction Of The New Google Blogger HTML Library Enhancements BEGIN.
Lets Begin With 2 Simple Guidelines of Basic Principles and Overall Structure For Any Language.
As with any language, you begin by defining your global variables. Then you create a setup() function, where you control the visualization's properties, like the canvas size, frame rate and perhaps variables such as the stoke-weight or background-color.
The next step is to create your draw() function, which controls the behavior of each frame in your animation. The draw function loops continuously unless you tell it otherwise by using the exit() command.
Awesome They Added These Terms To Assist In The Creation Of Global Variables. The Improvements Make It Possible To Compare Values Instance Variables As Well. Bravo!
As with any language, you begin by defining your global variables. Then you create a setup() function, where you control the visualization's properties, like the canvas size, frame rate and perhaps variables such as the stoke-weight or background-color.
The next step is to create your draw() function, which controls the behavior of each frame in your animation. The draw function loops continuously unless you tell it otherwise by using the exit() command.
- b:elseif for a simpler multiple-case b:if branch.
- b:switch and b:case for succinctly handling several possible cases of a variable.
- b:eval for evaluation of more complex expressions involving data variables.
- b:with for creating a nicer variable alias for a calculated value.
Lets Continue With More Great Advancements in
These Expressions Now Allow Flexible Creation of Highly Complex Variables: Great Additions
- Includes (b:include)
- Data Output (data:)
- Loops (b:loop)
- If, elseif & else (b:if)
- Switches (b:switch)
- Attribute expressions (expr:)
- Evaluated Expressions (b:eval)
- Variable alias (b:with)
- See an example
Expressions in layouts tags
When you're using the layouts template to create the body section of your blog, you can change the HTML that gets rendered by using expressions.
Types of Operators
- Pimping Your Blog Page Out: Pimpin Is Easy or Is The Aint Easy Whatever HTML is Pimp
- This section describes the operators you can use inside an expression on a Widget tag for Layouts.
- Equivalence
- And
- Or
- Not
- Ternary Selector (?:)
- Membership
Page Elements Tags for Layouts
The <body> section of a Layouts template is made up primarily of sections and widgets. Sections mark out areas of your page, such as the sidebar, footer, etc. A
widget is an individual page element such as a picture, 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 template.
Each section in your template has an opening and a closing tag, looking something like this:
<b:section id='header' class='header' maxwidgets="1" showaddelement="no">
</b:section>
A <b:section> tag can have the following 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 switch templates later, these names help Blogger determine
how best to transfer over your content. However, you can use different names, if you like.
maxwidgets - (Optional) The maximum number of widgets to allow in this section. If you don't specify a limit, there won't be one.
showaddelement - (Optional) Can be 'yes' or 'no,' with 'yes' as the default. This determines whether the Page Elements tab will show the 'Add a Page Element'
link in this section.
growth - (Optional) Can be 'horizontal' or 'vertical,' with 'vertical' as the default. This determines whether widgets within this section are arranged side-by-side
or stacked.
A section can contain widgets; it can't contain other sections or other code. If you need to insert extra code between or around certain widgets within a section,
you'll need to split the section into two or more new sections.
In its simplest form, a widget is represented by a single tag, which is basically just a placeholder indicating how the widget should be handled in the Page
Elements tab. The actual data for any given widget is stored in the Blogger database and only accessed when the widget needs to be displayed. Some examples of widgets (one for a page header and one for a list) are:
<b:widget id="header" type='HeaderView' locked="yes"/>
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>
A widget may have the following attributes:
id - (Required) May contain letters and numbers only, and each widget ID in your template should be unique. A widget's ID cannot be changed without deleting
the widget and creating a new one.
type - (Required) Indicates what kind of a widget it is, and should be one of the valid widget types listed below.
locked - (Optional) Can be 'yes' or 'no,' with 'no' as the default. A locked widget cannot be moved or deleted from the Page Elements tab.
title - (Optional) A display title for the widget. If none is specified, a default title such as 'List1' will be used.
pageType - (Optional) Can be 'all,' 'archive,' 'main,' or 'item,' with 'all' as the default. The widget will display only on the designated pages of your blog. (All
widgets display on the Page Elements tab, regardless of thier pageType.)
mobile - (Optional) Can be 'yes', 'no,' or ‘only’ with 'default' as the default. This decides if the widget will be displayed on mobile or not. Only Header, Blog,
Profile, PageList, AdSense, Attribution will be displayed on mobile when the mobile attribute is 'default.'
The types of widgets you can specify are:
- BlogArchive
- Blog
- Feed
- Header
- HTML
- SingleImage
- LinkList
- List
- Logo
- BlogProfile
- Navbar
- VideoBar
- NewsBar
Each widget can also be written out in an expanded form, detailing the complete layout and contents for that widget. This is what you'll see, for instance, if you
download your template from the Edit HTML tab to make a backup. Usually, you won't need to work with widgets in this mode, since it's simpler to just modify
them from the Page Elements tab. However, if you want to know more, you can read about the detailed widget tags.
Note: In your published blog, all <b:section> and <b:widget> tags will be replaced with <div> tags, which will have the specified ID. So, you're welcome to refer to,
for example, div#header or div#myList in your CSS if you want to.
Fonts and Colors Tags for Layouts
If you know HTML or CSS, you're welcome to modify the fonts and colors in your template any way you like. However, if you want them to work with the Fonts and
Colors feature of Blogger Layouts, then there are a few guidelines to follow. Doing it this way will let you modify the colors more easily if you change your mind
later. It also helps if you share your template with someone else who wants to customize their version a bit.
In the <head> section of your code, you'll need to have a pair of <b:skin> </b:skin> tags. The CSS style declarations will go in between those tags, along with the
variable names that make your design work with the Fonts and Colors page. Here's a brief example of how it looks, before we get into the details:
<head>
...
<b:skin>
<style type='text/css'>
/*
* Variable definitions:
* <Variable name='bgcolor' description='Page Background Color'
type='color' default='#fff'/>
*/
body {
background: $bgcolor;
margin: 0;
padding: 40px 20px;
}
</style>
</b:skin>
</head>
The first part of the CSS code is enclosed in /* and */ comment tags, so it won't be shown on your blog, but only used by Blogger internally. There will be a list of
variables here, one for each font or color that you want to be editable from the Fonts and Colors tab. Each variable is required to have the information shown in
the example above and described here:
name - This name may contain only letters or numbers, and each name in your template must be unique.
description - This can be a more descriptive name, and can include spaces. This is what will appear in the Fonts and Colors tab.
type - This can be either "font" or "color".
default - The default value. For colors, this should be a hexadecimal color code, e.g. #FF0066. For fonts, it will be a list of the form font-style font-weight font-
size font-family.
After the variables are set up, the rest of the code looks like regular CSS, with one exception. Any time you want to use a color or font for which you made a
variable, you'll enter $variable_name instead of the actual color or font. In the example above, you can see that we created a variable called bgcolor and set it to
white (#fff). Then later on in the code, instead of setting the body background property to white explictly, we just said background: $bgcolor. This still has the
effect of making the background white, with the difference that we can change it easily from the Fonts and Colors tab if we want to.
As you work on your template design, you'll add lots of variables for all the different fonts and colors you want to control. You do not, however, need to create
variables for other types of CSS attributes. These can be included in the CSS just as they normally would be (as with the margin: and padding: attributes in the
example above).
Note: If you need to brush up on your CSS, you can start here.
Widget Tags for Layouts
This section describes the HTML you can use inside of the closing tags.
Includes (b:include)When to use includes
When you're using the Layouts template to create the body section of your blog, you can use widgets to add page elements like pictures and a blogroll.
Types of tags
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 examplesSee 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.
<b:loop var='number' index='index' values='9 to 7'>
<li>Index: <data:index />, Number: <data:number /></li>
</b:loop>
</ul>
<ul>
This example would create an unordered list of:
Index: 0, Number: 9
Index: 1, Number: 8
Index: 2, Number: 7
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.
See the Expressions in layouts tags article.
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.
Check Out This HTML Page List Widget An Excellent Example: HTML Code Written Below
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'>&#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>
