Blogger

https://support.google.com/blogger/
Admin
Blogger is a free blogging platform by Google that allows users to create, customize, and manage...
Tokens:51,533
Snippets:978
Trust Score:10
Update:2 months ago
Show doc for...
Tokens:
Raw
### Iterate over blog posts

Source: https://support.google.com/blogger/answer/46995?hl=en&ref_topic=6321969

Example of looping through a list of posts to display each title.

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

--------------------------------

### Access widget data

Source: https://support.google.com/blogger/answer/46995

Examples of using data tags to output specific widget properties or component attributes.

```xml
<data:title/>
<data:photo.url/> - Size: <data.photo.width /> x <data.photo.height />
```

--------------------------------

### Example code signature

Source: https://support.google.com/blogger/thread/456106340/blogger-returning-http-429-and-google-sorry-page?hl=en

A signature used by a product expert in the community forum.

```javascript
while(coding) { eat(chocolate); }
```

--------------------------------

### Blogger Image HTML Structure

Source: https://support.google.com/blogger/thread/177035817/old-blogger-photos-missing?hl=en

Example of the HTML structure used for embedded Blogger images that were failing to render on published pages.

```html
<div class="separator" style="clear: both; text-align: center;">
<a href="http://3.bp.blogspot.com/-GW1waqThd50/UpgHHkvQQeI/AAAAAAABPRY/0vc100IbN9Y/s1600/IMG_2625.JPG" style="margin-left: 1em; margin-right: 1em;"><img border="0" height="426" src="http://3.bp.blogspot.com/-GW1waqThd50/UpgHHkvQQeI/AAAAAAABPRY/w640-h426/IMG_2625.JPG" width="640" /></a></div>
```

--------------------------------

### Implement a PageList widget with Blogger tags

Source: https://support.google.com/blogger/answer/46995?hl=en&ref_topic=6321969

Demonstrates the integration of b:widget, b:includable, b:if, and b:loop tags to render a navigation list.

```xml
<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>
```

--------------------------------

### Implement a PageList widget structure

Source: https://support.google.com/blogger/answer/46995

Demonstrates the integration of b:widget, b:includable, b:if, and b:loop tags to render a navigation list based on mobile or desktop view.

```xml
<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>
```

--------------------------------

### Configure robots.txt for Blogger

Source: https://support.google.com/blogger/thread/456106340/blogger-returning-http-429-and-google-sorry-page?hl=en

Standard robots.txt configuration to allow crawling by common search engines and social media bots.

```text
User-agent: Mediapartners-Google
Disallow:

User-agent: facebookexternalhit
Disallow:

User-agent: Facebot
Disallow:

User-agent: facebookcatalog
Disallow:

User-agent: *
Disallow: /search
Allow: /

Sitemap: https://www.exyuaviation.com/sitemap.xml
```

--------------------------------

### Include and conditionally render content

Source: https://support.google.com/blogger/answer/46995

Demonstrates using b:include to reference an includable section, passing data and applying a conditional check.

```xml
<b:includable id='main'>
  <b:loop var='p' index='index' values='data:posts'>
    <b:comment>Only include the first 10 posts</b:comment>
    <b:include name='post' data='p' cond='data:index &lt; 10'/>
  </b:loop>
</b:includable>
<b:includable id='post' var='post'>
  Title: <data:post.title/>
</b:includable>
```

--------------------------------

### Add Play Icon Overlay via CSS

Source: https://support.google.com/blogger/thread/320544978?msgid=325375348

Injects a play icon over thumbnails identified as video proxies. Requires adding the code in Themes > Customize > Advanced Options > Add CSS.

```css
article .snippet-thumbnail:has(img[src*="m/blogger_img_proxy"]) {
    position: relative;
}

article .snippet-thumbnail:has(img[src*="m/blogger_img_proxy"])::before {
    content: "";
    background-size: 50px;
    width: 50px;
    height: 50px;
    display: block;
    position: absolute;
    inset: 50% auto auto 50%;
    transform: translate(-50%, -50%);
    background-image: url("https://i.imgur.com/g9hEi2o.png");
}
```

--------------------------------

### Reference Globally Available Data

Source: https://support.google.com/blogger/answer/47270?hl=en

Use these tags anywhere in the template by referencing the blog data object.

```xml
<data:blog.title/>
```

--------------------------------

### Implement Canonical Link Tag

Source: https://support.google.com/blogger/community-guide/325142055/redirect-error-search-console-report?hl=en

Include this line in third-party themes to explicitly define the canonical URL for Google indexing.

```xml
<link expr:href='data:view.url.canonical' rel='canonical'/>
```

--------------------------------

### Blogger Responsive Tag

Source: https://support.google.com/blogger/thread/237570778/request-for-assistance-with-custom-domain-setup-on-blogger?hl=en

A snippet representing the responsive configuration tag for Blogger templates.

```xml
<b:responsive='true'/>
```

--------------------------------

### Conditional Logic with b:if, b:elseif, and b:else

Source: https://support.google.com/blogger/answer/46995

Use these tags to conditionally display content based on boolean evaluations.

```xml
<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>
```

```xml
<b:if cond='data:post.showBacklinks'>
```

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

```xml
<b:if cond='data:blog.pageType == "item" and data:post.showBacklinks'>
```

```xml
<b:if cond='data:displayname != "Fred"'>
```

```xml
<b:if cond='data:displayname == "Fred" or data:blog.pageType == "static_page"'>
```

```xml
<b:if cond='data:post.numComments > 1'>
```

```xml
<b:if cond='data:blog.pageType in {"static_page", "item"}'> OR <b:if cond='{"static_page", "item"} contains data:blog.pageType'>
```

--------------------------------

### Reference user mention

Source: https://support.google.com/blogger/community-guide/393882927/is-it-showing-fewer-posts-than-it-was-set-maybe-it-s-the-auto-pagination?hl=en

Markdown-style mention of a user.

```markdown
**@brigitte**
```

--------------------------------

### Iterate over data with b:loop

Source: https://support.google.com/blogger/answer/46995

Basic syntax for repeating content using a loop over a data set.

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

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

--------------------------------

### Blogger Boolean Configuration Values

Source: https://support.google.com/blogger/thread/458559536/i%E2%80%99m-unable-to-edit-the-html-and-the-search-description-under-meta-tags-in-my-blogger-settings?hl=en

Various boolean configuration flags used within the Blogger platform settings.

```text
false
```

```text
true
```

--------------------------------

### Define CSS variables in Blogger templates

Source: https://support.google.com/blogger/answer/46871

Place variable definitions inside <b:skin> tags within the <head> section. Variables must be enclosed in CSS comments to remain hidden on the live blog.

```xml
<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>
```

--------------------------------

### Define a Blogger widget

Source: https://support.google.com/blogger/answer/46888?hl=en&ref_topic=6321969

Use b:widget tags as placeholders for page elements within a section.

```xml
<b:widget id="header" type='HeaderView' locked="yes"/>
```

```xml
<b:widget id="myList" type='ListView' locked="no" title="My Favorite Things"/>
```

```xml
<b:widget id=”BlogArchive1” locked=”false” mobile=”yes” title=”Blog Archive” type=”BlogArchive”/>
```

--------------------------------

### Define a Blogger section

Source: https://support.google.com/blogger/answer/46888?hl=en&ref_topic=6321969

Use b:section tags to define areas like sidebars or footers in a theme layout.

```xml
<b:section id='header' class='header' maxwidgets="1" showaddelement="no"> 
</b:section>
```

--------------------------------

### Conditional Template Logic for Team Blogs

Source: https://support.google.com/blogger/answer/47270

Use the data:team variable to conditionally render content based on whether the blog has multiple authors.

```xml
<b:if cond='data:team=="true"'> (display multiple authors) </b:if>
```

--------------------------------

### Reference Page Header Data

Source: https://support.google.com/blogger/answer/47270?hl=en

Use these tags specifically within the Page Header widget.

```xml
<data:title/>
```

```xml
<data:description/>
```

--------------------------------

### Accessing Profile Photo Data

Source: https://support.google.com/blogger/answer/47270

Use this notation to retrieve specific attributes of the author's profile photo.

```xml
<data:photo.url/>
```

--------------------------------

### Define a b:loop structure

Source: https://support.google.com/blogger/answer/46995?hl=en&ref_topic=6321969

General format for repeating content over a set of data.

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

--------------------------------

### Define CSS variables in Blogger templates

Source: https://support.google.com/blogger/answer/46871?hl=en

Place variable definitions inside comment blocks within the <style> tag inside <b:skin> to make them editable in the Fonts and Colors page.

```html
<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>
```

--------------------------------

### Switching Content with b:switch

Source: https://support.google.com/blogger/answer/46995

Use b:switch to handle multiple conditions on a single variable without repeating the variable name.

```xml
<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>
```

```xml
<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>
```

--------------------------------

### Iterate over a number range

Source: https://support.google.com/blogger/answer/46995

Using b:loop to iterate across an inclusive range of numbers.

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

--------------------------------

### Verify Blogger Head Content Inclusion

Source: https://support.google.com/blogger/community-guide/325142055/redirect-error-search-console-report?hl=en

Use this tag in the Theme HTML Editor to ensure Blogger automatically includes necessary head content, including canonical tags.

```xml
<b:include data='blog' name='all-head-content'/>
```

--------------------------------

### Setting Attributes with expr:

Source: https://support.google.com/blogger/answer/46995

Use the expr attribute to dynamically set HTML attribute values based on data dictionary values.

```xml
<a expr:href='data:blog.homepageUrl'>Home</a>
```

```xml
<a expr:href='data:blog.homepageUrl + "feeds/posts/default"'>Posts RSS</a>
```

```xml
<a expr:class='data:post.allowComments ? "comment" : "no-comment">Comment</a>
```

--------------------------------

### Use loop index attribute

Source: https://support.google.com/blogger/answer/46995

Accessing the zero-based index of the current iteration within a loop.

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

--------------------------------

### Account Metadata Permission Grant

Source: https://support.google.com/blogger/thread/177035817/old-blogger-photos-missing?hl=en

Required text to submit via the Album Archive feedback tool to allow engineers to investigate specific image metadata issues.

```text
I grant permission to examine metadata for this account for the purpose of resolving #b_216206831.
```

--------------------------------

### Evaluating Expressions with b:eval

Source: https://support.google.com/blogger/answer/46995

Use b:eval to output the result of complex expressions or calculations.

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

```xml
<b:eval expr="data:newWidth * data:height / data:width" />
```

```xml
<b:eval expr="data:post.labels[0].url" />
```

```xml
<b:eval expr='data:post.allowComments ? "Comment" : "Comments Disabled" />
```

--------------------------------

### Limit posts on tag pages via URL parameter

Source: https://support.google.com/blogger/community-guide/393882927

Use the max-results query parameter in a URL to control the number of posts displayed on specific tag or search pages.

```html
<a href='/search/label/LABEL?max-results=8'>LABEL</a>
```

--------------------------------

### Aliasing Variables with b:with

Source: https://support.google.com/blogger/answer/46995

Use b:with to store computed expressions in a variable for reuse.

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

--------------------------------

### Blogger YouTube Thumbnail Fix Script

Source: https://support.google.com/blogger/thread/451306416/fix-youtube-thumbnails-not-loading-blogger-img-proxy-404-errors-emporio-in-the-uk?hl=en

This script monitors the DOM for broken proxy image links and replaces them with valid YouTube thumbnail URLs. It should be placed immediately before the closing </body> tag in your Blogger theme.

```javascript
<!-- MASTER YOUTUBE THUMBNAIL FIX -->
<script type='text/javascript'>
//<![CDATA[
document.addEventListener("DOMContentLoaded", function() {
const videoCache = {};
  

function applyThumb(element, videoId) {
let hqThumb = "https://i.ytimg.com/vi/" + videoId + "/hqdefault.jpg";
// Handle Popular Posts <img> tags vs Homepage Grid <div> tags
if (element.tagName.toUpperCase() === 'IMG') {
element.src = hqThumb;
} else {
element.style.setProperty('background-image', "url('" + hqThumb + "')", 'important');
}
element.dataset.fixed = "true";
}
  

function processThumbnail(element) {
// Prevent duplicate fetches for the same item
if (element.dataset.fixed === "true" || element.dataset.fetching === "true") return;
let parentLink = element.closest('a');
if (!parentLink || !parentLink.href || !parentLink.href.includes('.html')) return;
let postUrl = parentLink.href;
  

// Use cached ID if we already found it
if (videoCache[postUrl]) {
applyThumb(element, videoCache[postUrl]);
return;
}
  

element.dataset.fetching = "true";
  

fetch(postUrl)
.then(response => response.text())
.then(html => {
// Aggressive regex catches all YT embed formats
let match = html.match(/(?:v=|v\/|vi\/|vi=|youtu\.be\/|embed\/|shorts\/)([a-zA-Z0-9_-]{11})/);
if (match && match[1]) {
videoCache[postUrl] = match[1];
applyThumb(element, match[1]);
} else {
element.dataset.fixed = "no-video";
}
})
.catch(err => console.error("Error fetching YT ID for:", postUrl));
}
  

// Observer: Watches both style attributes (grid) and src attributes (Popular Posts)
const observer = new MutationObserver((mutations) => {
mutations.forEach((mutation) => {
let target = mutation.target;
if (target.tagName.toUpperCase() === 'IMG' && mutation.attributeName === 'src') {
let src = target.src || "";
if (src.includes("blogger_img_proxy") && target.dataset.fixed !== "no-video") {
processThumbnail(target);
}
} else if (mutation.attributeName === 'style') {
let bg = target.style.backgroundImage || "";
if (bg.includes("blogger_img_proxy") && target.dataset.fixed !== "no-video") {
processThumbnail(target);
}
}
});
});
  

// Scans both the main grid AND the Popular Posts sidebar
function scanGrid() {
document.querySelectorAll('.snippet-thumbnail, .PopularPosts .item-thumbnail img').forEach(el => {
if (!el.dataset.guarded) {
observer.observe(el, { attributes: true, attributeFilter: ['style', 'src'] });
el.dataset.guarded = "true";
}
let checkUrl = el.tagName.toUpperCase() === 'IMG' ? el.src : (el.style.backgroundImage || "");
if (checkUrl.includes("blogger_img_proxy") || checkUrl === "") {
processThumbnail(el);
}
});
}
  

// Initialize and run on a loop to catch dynamic widgets
scanGrid();
setInterval(scanGrid, 1500); 
});
//]]>
</script>
```

--------------------------------

### Compute style attributes with b:with

Source: https://support.google.com/blogger/answer/46995

Use b:with to define a variable for complex style attributes, making nested HTML cleaner. The variable is only accessible within the child nodes of the tag.

```xml
<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>
```

--------------------------------

### Define a b:includable section

Source: https://support.google.com/blogger/answer/46995

Defines a reusable block of code within a widget. Every widget must contain an includable with id='main'.

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

--------------------------------

### Clear text formatting shortcut

Source: https://support.google.com/blogger/community-guide/393882927/is-it-showing-fewer-posts-than-it-was-set-maybe-it-s-the-auto-pagination?hl=en

Keyboard shortcut to remove formatting from selected text in Windows and some Linux distributions.

```text
CTRL + SPACE
```
Tokens:
Raw