Loops, loop positions, and isFirst variables in Blogger

Looping through the listing of blog posts

<b:loop values='data:posts' var='post'>
Inside the loop data:posts changes to data.post (determined by the value of var, set here as var='post')

We can reference the id of the current post in the loop as <data:post.id />
</b:loop>


Looping through the listing of blog posts with an additional index

<b:loop values='data:posts' var='post' index='i'>
The id of the current post in the look is <data:post.id />

The position of this post in the loop index is <data:i />

We can run a IF statement against this value like so:

  <b:if cond='data:i == 2'>
    This is the post contained in the loop at position 2, which in an array is Post #3 (arrays start counting at 0)
  </b:if>

</b:loop>


"is first" variables

There are a number of "is first" variables in Blogger that are unfortunately not declared on the official variable list.

data:post.isFirstPost
This variable can be used to show a different behavior on an index page for the first post, by placing it within the data:posts loop, like so:
<b:loop values='data:posts' var='post'>
   <b:if cond='data:post.isFirstPost == &quot;true&quot;'>
first psot!
   </b:if>
</b:loop>

data:post.isDateStart
This variable is used to group posts by date, often found on a Blogger site's index pages, where it shows all posts under one day/date, then moves to the next day/date without repeating that value.

data:post.firstImageUrl
This variable shows the URL of the first image used in the blog post. This is often handy for creating an index page of image thumbnails. But while the "thumbnail" variable (data:post.thumbnailUrl) only shows a 72 pixel square and really only works for Google hosted images, this firstImageUrl variable shows the full image url and can be used for non-Google-hosted images.

Using Namecheap as your Domain provider with Blogger

Our advice for anyone with a blog on +Blogger is that the moment you feel you'd be sad if you ever lost your blog, it is time to buy a domain name for it. Sure, you can buy one before you've even written your first post, but definitely buy one before you'd be sad.

That being said, many of the domain registrars out there love to either through lots of extras at you (GoDaddy) or often don't provide the tools that you need to manage your domain effectively. Because of this, we've arrived at Namecheap as the domain registration provider that we use and recommend (we don't receive any compensation from them). Their prices are good, their tools are robust, and there is very little upsell.

The problem? Their interface is clunky at best. So what we've done here is to walk you through the steps, visually, for how to set up your Blogger blog's custom domain with Namecheap after you've purchased your domain.

Setting up Pinterest Rich Pins for Big Cartel sites

Pinterest recently announced new functionality for "Rich Pins" for Pinterest for different types of pins (product, recipe, movie, or article).

While our last post dealt with setting up rich pins for a Blogger blog, we've had a number of folks ask for instructions for how to set up these rich pins for their Big Cartel site. And we aim to please!

Step 1: go to the Advanced section in your template editor

Step 2: edit the Product page to use "Custom"
(this will keep the existing code but allow you to add additional code

Step 3: at the top of the HTML for the Product page, add the following code:

<meta property="og:title" content="{{ product.name | escape }}" />
<meta property="og:description" content="{{ product.description | truncatewords: 50 }}" />
<meta property="og:type" content="product" />
<meta property="og:url" content="{{ store.url }}{{ product.url }}" />
<meta property="og:site_name" content="{{ store.name }}" />
<meta property="og:price:amount" content="{{ product.default_price }}" />
<meta property="og:price:currency" content="USD" />
<meta property="og:availability" content="instock" />

Congratulations! Test out the new code for any specific product url with the validator and you should be good to go!

Validating for Rich Pins for Pinterest

Pinterest recently announced new functionality for "Rich Pins" for Pinterest for different types of pins (product, recipe, movie, or article).

As we're a blog, and support lots of bloggers on +Blogger, we've created instructions for setting up these Rich Pins for Blogger so that you can validate them and have them approved..

And if you're looking for quick instructions to add a Pin It button to your Blogger blog, give these instructions a read.

Step 1: search for this line

Run a search for this line of code in your Template
<b:includable id='post' var='post'>

Step 2: add the following

Below the line you found in Step 1, add the following:

<meta expr:content='data:post.title' property='og:title'/>
<meta expr:content='data:blog.metaDescription' property='og:description'/>
<meta content='article' property='og:type'/>
<meta expr:content='data:blog.url' property='og:url'/>
<meta expr:content='data:blog.title' property='og:site_name'/>
<meta expr:content='data:post.timestampISO8601' property='article:published_time'/>
<meta content='Technology' property='article:section'/>
<b:loop values='data:post.labels' var='label'>
<meta expr:content='data:label.name' property='article:tag'/>
</b:loop>

Change the last line from "Technology" to whatever section you want to be in.

Step 3: save your template

Congratulations! Test out the new code with the validator and you should be good to go!