blogger getting started guide · 2. use the blogger dashboard to open the blogger dashboard, sign...
TRANSCRIPT
Blogger Getting Started Guide Web Design Kalundu Study Centre 2016
Blo
gger
Get
tin
g St
arte
d G
uid
e
1
Blogger Getting Started Guide [Type the document subtitle]
Blogger Getting Started Guide
To use Blogger, make sure you have a compatible browser and
operating system:
Browsers:
Google Chrome
Safari version 4 and up
Firefox version 3.6 and up
Microsoft Edge
Internet Explorer version 10 or 11. If you experience issues, try
another browser or turn off Compatibility View.
Operating systems
Windows
Linux (Ubuntu)
Mac OSX
For Blogger to work, check if your browser uses cookies and turn
Javascript on.
Step-by-step guide to starting a blog
To start using Blogger, sign in with your Google Account. Choose to
create a Blogger profile or use your Google + profile.
Note: When you use Blogger, make sure you comply with the Blogger
Content Policy and Terms of Service.
1. Create a new blog
You can create up to 100 blogs per account. To create a new blog:
1. At the top left, click New Blog.
To Use Blogger
Blo
gger
Get
tin
g St
arte
d G
uid
e
2
2. In the dialog that appears, enter a name or the main title for your blog.
3. Choose a blog address (URL). This will be used by readers to view your blog.
4. Once you have a blog name and address, choose a template. Click Create blog.
Tip: You can use your blog topic, name, audience, or even location to choose your blog name and
address.
Find your URL
There are two ways to find your URL.
From your live blog
1. Sign in to Blogger.
2. On the blog you want to find the URL for, click View Blog.
3. The URL is in the address bar, at the top of your browser.
From your dashboard
1. Sign in to Blogger.
2. Click your blog.
3. In the left menu, click Settings > Basic > Publishing.
4. The URL is in Blog Address.
To change your URL, follow the same steps, then click Save.
After a blog is permanently deleted, the blog’s URL cannot be used again.
2. Use the Blogger dashboard
To open the Blogger dashboard, sign in to Blogger
The Blogger dashboard will list your blogs with some quick links on the right.
To manage a blog, click a blog’s title.
To create a new post, click New Post .
To see your posts, click Post list .
For other actions, click More Options
To see how your blog looks, click View blog.
Under the list of your blogs, you’ll see a list of your favorite blogs.
Blo
gger
Get
tin
g St
arte
d G
uid
e
3
3. Manage your blog
Once you have created your blog, you will be redirected to your blog’s dashboard where you can
build and manage your blog.
Overview: You can see your blog’s activity, news and tips from the Blogger team, and more.
Write a new post: At the top left, click New post.
You can use the left menu to see your posts, pages, comments, stats, manage earnings and
campaigns, and more.
Learn how to change your blog’s look.
Learn how to control access to your blog.
To go back to your Blogger dashboard, at the top left, click My blogs.
4. View your blog
You can see how your blog looks in two ways.
From the Blogger dashboard, click View Blog.
At the top of your blog’s dashboard, click View Blog.
When you see your blog, a navigation bar will appear at the top with some actions or options you
can use.
To change or manage the navigation bar:
1. Go to your blog’s dashboard.
2. Click Layout.
3. Under “Navbar,” on the lower right, click Edit.
Note: If you use Dynamic Views, the navigation bar may not appear. Learn to use custom
templates with the navigation bar.
5. Get updates
To get feature announcements, advice, and other information to help you get the most out of your
blog, sign up for email updates.
1. Sign in to Blogger.
Blo
gger
Get
tin
g St
arte
d G
uid
e
4
2. At the upper right, click Options .
3. Select Edit User Settings.
4. Under “Email Notifications," check "Feature Announcements."
5. Click Save.
To unsubscribe, uncheck “Feature Announcements.”
Change your profile on Blogger
You can share information about yourself with your readers through your Blogger or Google+
profile. You can only use one profile for all blogs you contribute to.
Choose and edit your profile
You can use your Google+ profile or create a Blogger-specific profile:
1. Sign in to Blogger.
2. At the top right, click Settings > Edit User Settings.
3. Under "General," select a profile type:
Google+
Blogger
4. Click Save.
Use a Google+ profile on Blogger
Switching to a Google+ profile will affect all your blogs.
After you've switched, you have 30 days to revert to your Blogger profile.
After 30 days, your Blogger profile will be deleted and you'll need to create a new Blogger
profile.
Any information you had in your Blogger profile will not be shown in your Google+
profile.
Google+ profiles are public, but you can choose whether your profile can be found by a
search engine.
If you use a Google+ profile, the name on your blog will change to your Google+ profile
name and will link to your Google+ profile.
Blo
gger
Get
tin
g St
arte
d G
uid
e
5
Comments made in the past will still display your Blogger profile name. Manage Google+
for your blog.
Edit your Google+ profile
1. Sign in to Blogger.
2. In the top right, click your photo, then Google+ Profile.
3. Edit your Google+ profile.
Choose which blogs to show on your Google+ profile:
1. On your profile, click About > Links.
2. Add or edit the blogs to show.
3. Choose who can see your blogs.
4. Click Save.
Edit a Blogger-specific profile
1. Sign in to Blogger.
2. At the top right, click your name > Blogger profile > Edit profile.
3. Edit your profile.
4. Click Save Profile.
Show your profile on your blog
After you choose a profile, you can show it on your blog:
1. Sign in to Blogger.
2. Select the blog to update.
3. On the left side of the page, click Layout > Add a gadget.
4. Search and select a profile gadget:
Google+ profile: Google+ Badge
Blogger profile: Profile
5. Click Add .
6. Select your settings and click Save.
7. At the top right, click Save arrangement.
Blo
gger
Get
tin
g St
arte
d G
uid
e
6
Add pages to your blog
You can create pages for consistent content like “About” or “Contact.” Pages can appear on your
blog as tabs at the top or links on the side.
Note: You cannot use specific posts as pages.
Add a page
1. Show your pages
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, click Layout.
4. In the section you want your pages to show, click Add a Gadget.
5. In the window that appears, next to Pages, click Add .
6. Set your settings and click Save.
7. At the top right, click Save arrangement.
To change where your pages will appear, drag the gadget to its new location.
2. Create, edit, or delete pages
Create a page
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, select Pages.
4. Click New Page.
5. Add a page title and other information.
6. Click Save, Preview, or Publish.
To edit a page:
1. Follow steps 1 and 2 above.
2. Under the page you want to edit, click Edit.
3. Make updates to your page.
4. Click Save, Preview, or Publish.
Blo
gger
Get
tin
g St
arte
d G
uid
e
7
To delete a page:
In Pages, under the page you want to remove, click Delete > OK.
Create a page that links to another website
1. From the Blogger dashboard, click the blog you want to update.
2. In the left menu, click Layout.
3. In the "Pages" section, click Edit.
4. In the window that appears, click Add external link.
5. Add the page title and URL.
6. Click Save Link.
To delete a page:
1. Follow steps 1–3 above.
2. In the page to delete, click Remove
3. Select the pages to show
1. In the left menu, click Layout.
2. In the “Pages” section, click Edit.
3. Select the page you wish to show.
4. Click Save.
5. At the top right, click Save arrangement.
There is no limit to the number of pages you can have on one blog.
Create and edit a post
To create a new post, click New Post
When you write a new post and click Save, it creates a draft version. The post won't show on your
live blog until you publish it.
To edit a draft post:
1. On your blog’s dashboard, click Posts.
2. Point at the title of the post and click Edit.
Actions you can take:
Blo
gger
Get
tin
g St
arte
d G
uid
e
8
To make a post show on your blog, click Publish.
To see how a post will look, click Preview.
To remove a post from your blog, click Revert to draft.
To delete a post, click Delete under the post title.
Once you delete a post, there is no way to get it back on Blogger.
If you posted your content in other places, like Google+, you will need to delete that
content separately.
To delete multiple posts, check the posts to delete and click Delete .
Note: There’s no limit on the number of posts you can have on a blog.
Set post settings
At the right of the Post Editor, click Post settings.
Options: Choose to allow reader comments, how to compose posts, and add line breaks.
Location: Add your location.
Permalinks: Set the format of your links.
Add labels
You can add keywords to categorize and label your posts.
To change labels on multiple posts:
1. In the left menu, select Posts.
2. Check the posts to edit labels.
3. At the top, click Label.
1. To remove or add an existing label, select the label in the drop-down menu.
2. To edit a label, delete the old label and add the new label.
You can have a maximum of 2,000 labels per blog and 20 per post.
Schedule a post
At the right of the post editor, click Post Settings > Schedule and set a time and date for your
post to show on your blog.
To set your time zone:
On your blog’s dashboard, select Settings > Language and formatting > Formatting > Time
Zone.
Blo
gger
Get
tin
g St
arte
d G
uid
e
9
More features
Create a template
Templates save time by automatically formatting your posts:
1. In your blog’s dashboard, click Settings > Posts and Comments.
2. Under Posts, next to Post Template, click Add.
3. Add your post template. Use HTML if necessary.
Add a "Read more" link
You can allow readers to see a summary of your post with a link to “Read More.”
1. Place your cursor where you want to make the break.
2. In the Post Editor, click Insert jump break .
The gray bar can be dragged to reposition the jump break.
Learn how to change “Read more.”
Type words in a different alphabet
You can type words in English and have them appear in your preferred alphabet, such as Arabic
or Russian.
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, click Settings > Language and formatting.
4. Under Language, change to Enable transliteration.
5. Select your language.
6. Click Save settings.
7. On the Post editor, click Transliteration.
Post without word verification
You may have to complete word verification to prevent spam.
To avoid word verification when publishing, submit your blog to Google for a review. Next to the
word verification, click .
Note: Even if your blog is whitelisted for spam, you may have to complete word verification if
you make a large number of posts in a single day.
Use email to post to your blog
Blo
gger
Get
tin
g St
arte
d G
uid
e
10
To turn on posting by email:
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, click Settings > Mobile and email.
4. Under “Email,” set your unique email and settings in Posting using email.
5. Choose whether to publish automatically or save as a draft and publish them yourself.
To post by email:
1. Create an email with your post title as the subject.
2. The body of the email will be the post.
To mark the end of your post, enter #end.
To include an image, attach an image to your email.
3. Send the email to your unique email address (username.[secretword]@blogger.com).
Note: This email address must be kept private or anyone who emails this unique email address
will be able to post as you on your blog.
Note:
Avoid adding content hosted by someone else without their consent.
Avoid using copyrighted materials. Learn more about Blogger’s copyright policy.
Avoid adding content that violate our content policy. This includes explicit imagery posted
without the subject’s consent and hateful, violent, and crude content.
Change your blog layout
You can change the layout of your blog.
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, select Layout.
The layout of your blog is made up of gadgets. For example: header, blog archive, blog posts, and
so on.
To change the layout of your blog, drag a gadget into its new location.
Blo
gger
Get
tin
g St
arte
d G
uid
e
11
Change the gadgets on your blog
To change the settings of each gadget, on the lower right, click Edit.
Change blog post settings
In “Blog posts," on the lower right, click Edit.
Select how many posts appear on the main page and the format of your date.
Change “Posted by,” “Read more,” “Comments” and, “Links to this post.”
To allow readers to leave feedback without commenting, add and edit Reactions.
Let readers email and share your posts
Add or edit location
Show Author profile
Show ads between posts
Enable quick editing
Use quick editing on your blog
If you enable quick editing, you can edit your posts directly, from the live post. Quick editing
requires cookies and can only be seen by admins if signed into Blogger.
Note: Edit links on your own blog will only work if your browser sends the referrer to Blogger,
and your blog URL's host is the same as the referrer host.
You can also change how these elements will appear in your blog posts by dragging them to a
different location.
Note: If you hit the webpage limit of 1 MB in size (including posts), change the number of posts
on your main page.
CSS files are cached so you may have to reload to make updates appear.
Add a gadget
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, select Layout.
4. Click Add a gadget.
5. In the pop-up window, select the gadget to add and click Add .
Blo
gger
Get
tin
g St
arte
d G
uid
e
12
6. On the top right, click Save arrangement.
Edit the HTML of your blog layout
You can edit the HTML of your layout.
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, select Template.
4. Under Live on Blog, click Edit HTML.
5. Click Save Template.
Learn page element tags, font and color tags and widget template tags before you start.
Use template designer for style changes without using HTML.
Google claims no ownership or control over any content submitted, posted, or displayed by an
author on or through Google services. In addition, blog authors who add code or third-party
widgets do so at their own risk.
Change the design of your blog
To change the design of your blog, you can use the template designer or CSS.
Change the design with the template designer
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, click Template.
4. Under “Live on blog," click Customize.
5. At the top, use the carousel to choose a template. Below the carousel, use the preview to see
how your blog will appear.
6. Use the left menu to customize your background, adjust widths, layout, and other settings.
7. On the top right, click Apply to Blog to make your changes live.
To clear your changes, click Live on Blog.
Blo
gger
Get
tin
g St
arte
d G
uid
e
13
Change the design with CSS
You can also personalize your blog's appearance by using cascading style sheets (CSS).
To add custom CSS snippets to your template:
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, click Template.
4. Under Live on blog, click Customize.
5. In the left menu, select Advanced > Add CSS.
6. Add your code.
7. On the top right, click Apply to blog.
Navigation bar for custom templates
If your custom template designs cause problems with the navigation bar, try:
At the topmost element of your template, add style="margin-top:40px;"
Check if the closing </head> tag is present. It should go before the <body> tag.
Mobile templates for your blog
To change how your blog appears on smartphones:
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, click Template.
4. Under “Mobile,” click Customize mobile template .
5. Select the mobile template for your blog. You can also click Preview to see the template live
on your blog.
6. Click Save.
To see your blog on your mobile device, scan the QR code on the left of the pop-up window.
Show your blog in multiple views
Blo
gger
Get
tin
g St
arte
d G
uid
e
14
To show your content in classic, magazine, mosaic or other ways, you can use Dynamic Views.
To use Dynamic Views, check if:
Your blog is public.
Your blog’s feed is enabled in full.
You use the latest version of your browser.
To turn on Dynamic Views:
1. Sign in to Blogger.
2. Select the blog to update.
3. In the left menu, click Template.
4. In the “Dynamic View”s section, select a default view for your blog.
5. Under the default template you choose, click Customize.
6. Use the left menu to change background, adjust width, layout, and other advanced settings.
7. Click Apply to Blog.
To save changes you have in your previous template, on the top right, click Backup/Restore.
Note: By using Dynamic Views:
Blogger will record each post displayed as a pageview.
Your readers will have the option to change their default view.
Change how a blog is shown
If your favorite blog uses Dynamic Views, you can choose to see the blog in a different view:
1. On the top left, click the arrow .
2. Select a different view.
If they don’t use Dynamic Views, you can still view the blog in Dynamic Views by adding
“/view/” and then the view name to the URL.
Customize CSS tags for layouts
To use the template designer with the CSS of your blog’s template, there are a few guidelines to
follow.
Blo
gger
Get
tin
g St
arte
d G
uid
e
15
Set up the variables
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.
Example
<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 CSS code enclosed in /* and */ comment tags won't be shown on your blog.
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 – May contain letters or numbers. Each name in your template must be unique.
description – Add a description to appear in “Fonts and Colors" section.
type – "Font" or "color."
default – The default value. For colors, this should be a hexadecimal color code, for
example #FF0066. For fonts, it will be a list of the form font-style font-weight font-size font-
family.
Blo
gger
Get
tin
g St
arte
d G
uid
e
16
Use the variables
After the variables are set up, when you want to use the value of a variable, enter
$variable_name in the b:skin css.
Variable types
The template designer has editing support for a specific set of CSS variable types. To set the type
of variable:
color variables will provide a color palette for selection in the template designer.
font variables will provide a font selection, with size and bold or italics options, in the
template designer.
In the example above, there is a variable called bgcolor, which is set to white (#fff). In the next
code, it says: background: $bgcolor. This turns the background white, and you can change
it in the “Fonts and Colors” section.
Note: You don’t 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).
Learn more on CSS.
Page elements tags for layouts
The <body> section of a layout template 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 template.
Sections
Each section in your template has opening and closing tags that look something like this:
<b:section id='header' class='header' maxwidgets="1"
showaddelement="no">
</b:section>
Blo
gger
Get
tin
g St
arte
d G
uid
e
17
<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 templates 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 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 only contain widgets. To insert extra code within a section, split the section into two
or more new sections.
Widgets
A widget is represented by a single tag, which is a placeholder to indicate how the widget should
be handled in the Page Elements tab.
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”/>
Widget 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 the kind of widget.
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.
Blo
gger
Get
tin
g St
arte
d G
uid
e
18
title – (Optional) If no display title 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 their 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.”
Learn more on editing 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. This will allow you to refer to, for example,
div#header or div#myList in your CSS.
Widget Tags for Layouts
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
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'>
Blo
gger
Get
tin
g St
arte
d G
uid
e
19
[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'>
Blo
gger
Get
tin
g St
arte
d G
uid
e
20
<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
Blo
gger
Get
tin
g St
arte
d G
uid
e
21
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>
Blo
gger
Get
tin
g St
arte
d G
uid
e
22
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: 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'/>
Blo
gger
Get
tin
g St
arte
d G
uid
e
23
[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)
Blo
gger
Get
tin
g St
arte
d G
uid
e
24
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
Blo
gger
Get
tin
g St
arte
d G
uid
e
25
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)
Blo
gger
Get
tin
g St
arte
d G
uid
e
26
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.
Blo
gger
Get
tin
g St
arte
d G
uid
e
27
<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>
Blo
gger
Get
tin
g St
arte
d G
uid
e
28
</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>