Mar 7, 2015

JS/CSS animated hamburger menu for responsive websites

In working on a website I ended up developing this toggle animation for the traditional "hamburger" menu that most sites use to open/close the navigation system in a responsive website design.

The code uses pure CSS to create the three horizontal lines, then on click of the toggle, creates an animation transformation to change the three bars to an X closure.

Pure Javascript/CSS with a JQuery simply for the toggle, but not necessary.

Code found here.

Demo here.

Aug 13, 2014

Using a Google Drive Spreadsheet as a database for Blogger

One of the "limitations" to Blogger is that you don't have access to a database to create fields for populating content. In previous posts we've showed you how to create a form using Google Drive and to incorporate it into your Blogger website; in this tutorial we're going to show you how you can also use that same content, stored in the Google Drive Spreadsheet, to populate your site with the content, as well as content from any other Google Drive Spreadsheet.

This tutorial uses JQuery as the Javascript library, as well as JSON as the format to pull in the content. While the example only shows it in a simple list format, there are many different ways you can use this data and functionality, such as building an interactive rolodex for example.

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 (determined by the value of var, set here as var='post')

We can reference the id of the current post in the loop as < />

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 < />

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)


To do a greater-than and less-than you need to use the HTML code for greater/less, otherwise it will throw a Blogger template error.

<b:if cond='data:i &#60;=2'> for i is less than or equal to

<b:if cond='data:i &#62;=2'> for i is greater than or equal to

"is first" variables

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

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!

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.

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.

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.

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'/>
   <meta expr:content='data:post.snippet' property='og:description'/>
<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...

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.