Apr 14, 2014

Testing the post



Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

First test is with a 506px x 308px image, maintaining a 6x4 aspect ratio. Image links to the fullsize in Google, local is full size with HTML sizing. This is successful.

Same image as above, but local image is not 506px, instead is 400px. Still links to full sized version stored in Google+. This is not successful.

New image, 1600px by 300px tall (massive aspect ratio), with full image resized by HTML. This is successful.

Rotated image and widened, 506px wide by 1600px tall, with full image resized by HTML. This also works.

Image that is 506px wide by 300px tall, full, resized by HTML.


Jan 2, 2014

Getting your Blogger site to have Twitter Summary Cards

Twitter cards are a newish functionality that make it possible for you to attach media experiences to Tweets that link to your content. With a few added lines of HTML to your Blogger template, users who Tweet links to your content will have a "card" added to the Tweet that’s visible to all of their followers.

You might have read one of our recent posts regarding creating Rich Pins for Pinterest on your Blogger blog; the process for Twitter cards is very, very similar.

Dec 5, 2013

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 only works for Google hosted images, this firstImageUrl variable shows the full image url and can be used for non-Google-hosted images.

data:post.sharePostUrl
This variable displays the absolute url for a blog post in question. Used in the social media share buttons, but can certainly be used in other cases.

data:post.snippet
This variable displays the first 140 characters of a blog post, or what comes before a jump break, whichever is first.

Example, albeit not for this usage:

<b:if cond='data:blog.metaDescription != &quot;&quot;'>
   <meta expr:content='data:blog.metaDescription' name='og:description'/>
<b:else/>
   <meta expr:content='data:post.snippet' property='og:description'/>
</b:if>
<meta expr:content='data:post.thumbnailUrl' itemprop='image_url'/>

The above code will show the first image URL as the snippet's thumbnail, along with either the post's meta description (search description in the blog post) or, if none, the 140 character snippet.


Social sharing thumbnail variable that you need

We all wanted to add a larger thumbnail image for social sharing, for example for Facebook and now Google+, but had no way to do so since the other thumbnail was only 72 pixels. Yes, there is now a new variable...

data.blog.postImageUrl
This variable, available to you in the HEAD of your template, if used on item page types, will display the first image from your blog post in all of its glory.

Nov 12, 2013

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.