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 == "true"'>
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.
Examples in use:
<b:if cond='data:blog.metaDescription != ""'>
<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.
Popular
-
Opinion: Forget about SEO, develop a user-centric content strategyWe don't like talking about Search Engine Optimization, nor do we like focusing on it in any si…
-
Tip: Understanding the Atom/RSS feeds created by BloggerIf you've heard of RSS feeds, you probably know that they're a way for your site's fans…
-
Tip: A grid of post thumbnails for index/listing pagesOur thumbnail and summary script was such a success that people have been asking us for further an…
-
Hangout on Air: Blogging for Your BusinessI'm sorry to be delinquent in posting this Hangout on Air (especially as we did one today which…
-
Transforming Blogger's Popular Posts widget into a slideshowWhy didn't we think of this sooner?!?!? Most blogs on +Blogger take advantage of the Popular …
-
Question: Can I use my own domain name with my Blogger site? Will hosting still be free?Coming across a blog that is using a blogspot.com address, like yourblog.blogspot.com , tells us on…
-
Tip: Updated way to remove the Blogger NavbarIt's been a while since we took a look at the Blogger navbar, mainly because we simply got in t…
Post a Comment
Post a Comment