Learn to customize your own blog with confidence

Blog Font Style with CSS - Text Effects

Blog Font Style - Part Five: Text Effects with CSS
This is part five of the five part Blog Font Style series.

You've learned so much this week! Now you can find the CSS selectors for your text, specify your font families, and . And, you can with the best of them. Now you're ready to start getting decorative with some CSS text effects!

I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.

Color

It's easy to set text color with CSS. Here's an example of a CSS text color declaration:

p { color: #A071AD; }

And here's how the selected paragraph would look in the browser:

This paragraph is purple!

You can use one of the dozens of web color names, a HEX color code, or an RGB color code to set your text's color. For more on finding your color values, check out this tutorial.

Text Shadow

Text shadow allows for some amazing text "special effects". I'm just going to show a brief example now, but be sure to check out the Further Reading at the end of this post for links to tutorials that show just how much you can do with this simple CSS declaration.

Here's a very, very basic example of text shadow at work:

p { text-shadow: 1px 1px 1px blue; }

I have a shadow, and it's blue!

In a text-shadow declaration, the three pixel values each do something different. Here's how they work:

The first sets the horizontal distance of the shadow from the text. If it's a positive number, the shadow falls to the right of the text. If it's negative, it falls to the left.

The second sets the vertical distance of the shadow from the text. If it's positive, the shadow falls below the text. If it's negative, it falls above the text.

The third sets the blur radius of the shadow. The higher the pixel value, the blurrier it gets. You can't set a negative blur, but you can set the blur to 0 and the shadow won't blur at all.

Text Decoration

The most commonly used text-decoration is underline, which places an underline on the selected text. You can also use line-through to "cross out" text, or overline to place a line over your selected text. Here are examples of each:

p { text-decoration: underline; }

Hi, I'm underlined.

p { text-decoration: line-through; }

Don't read me, I'm crossed out!

p { text-decoration: overline; }

Well hello there, I'm overlined.

And... ok, I didn't really want to mention this, but in the interest of being thorough, I should acknowledge that text-decoration: blink; is a real thing. No demo though, because I like you too much to subject you to it.

Text Transform

With the text-transform declaration, you can change the capitalization of your selected text. Your transform options are capitalize, lowercase, and uppercase. Capitalize will capitalize the first letter of every word in your selected text. Lowercase and uppercase will convert the text to all lowercase or all uppercase letters, respectively.

This is useful for standardizing dynamic text on your blog. Here's an example — let's say you want to set the links to your commenters to all lowercase letters to normalize their appearance.

.comment-author-link { text-transform: lowercase; }

One of your commenters enters their name with strange capitalization:

<a href="commentersblog.com" class="comment-author-link">mY CApiTAlizatION iS weIRd</a>

But, you set the text-transform for those links to lowercase, so here's how that would look in the browser:

mY CApiTAlizatION iS weIRd

"Creative" capitalization problem: solved!

Try it Out!

So today's Codepen is a little different. This time, you get no CSS from me, just the bare HTML. Play around with it and style it using your new font styling skills. If you'd like to share your experiement, you can "fork" my code and create a new Codepen to link in the comments. Or, you can post a screenshot of your handiwork. I look forward to seeing what you come up with!

Ready to try it out? Click the "Edit on Codepen" link in the demo below, or click here to open the Codepen editor in a new window/tab

Check out this Pen!

Further Reading

Now that you've got the basics of font styling with CSS down, there's so much more you can do! Here are a few more tutorials to try out if you want to learn even more.

Blog Font Style with CSS - Spacing, Alignment, and Line Height

Blog Font Style - Part Four: Spacing, Alignment, and Line Height
This is part four of the five part Blog Font Style series.

You're just about done with this series and you've learned a lot! You can find the CSS selectors for your text, specify your font families, and . You're all set to start experimenting with some more advanced typography with spacing, alignment, and line height.

I'm going to show real examples of these techniques in this tutorial. If you're reading on an RSS reader, you may need to come over to the live site see the CSS in action.

Letter Spacing & Word Spacing

With a letter-spacing or word-spacing declaration, you can set the space between the letters in your words, or between the words themselves. In traditional typography, this is called "tracking". You can use pixels, ems, or percentages to add spacing.

Here's an example of a CSS rule with letter spacing:

p { letter-spacing: 3px; }

And here's how that would look in the browser:

Three pixel letter spacing.

Here's an example of a CSS rule with word spacing:

p { word-spacing: 5px; }

And here's how that looks in the browser:

Five pixel word spacing.

Letter and word spacing are best used sparingly. They can be used to great artistic effect in headlines and decorative text.

Text Align

You know those alignment buttons in your blog's visual editor? The text-align declaration in CSS does the same thing. You have three text alignment options: text-align: left; text-align: right; and text-align: center;.

Here are some example CSS rules with text alignment:

p { text-align: left; }

Aligned left.

p { text-align: center; }

Aligned center.

p { text-align: right; }

Aligned right.

Text Indent

Using the text-indent declaration, you can indent text by pixels, em units, or percentage.

The main use of text indent is to create indentation for paragraphs. In the "olden days" of web design, before web fonts were commonly available, we used to use text-indent to push text off the page so it could be replaced by an image. That's not as common anymore. But you may come across a CSS rule that includes a major indent like "text-indent: -9999em;", and now you'll know what it's doing.

Here's an example of a CSS rule with text indent:

p { text-indent: 1em; }

And here's how that looks in the browser:

I'm indented one em unit from the left.

Line Height

Line height controls the vertical space between lines of text. In traditional typography it's called leading (pronounce it with "lead", as in the metal).

You can set your line height in pixels, ems, percentages, or with a "unitless" number. A unitless number is just a plain number without px, em, or percentage. I'm going to give the next paragraph a unitless line height of 1.9 using this CSS:

p { line-height: 1.9; }

Unitless line height is recommended because it helps prevent unexpected sizing issues due to inheritance from parent elements. I'm using line-height: 1.9 here. If you're interested in learning more about line height, I recommend this comprehensive presentation from Russ Weakley.

Try it Out!

Yet another Codepen for you to play with! This time I've combined the font styling options from previous lessons with today's lesson to give you something a bit more detailed to try out. This demo includes line height, letter and word spacing, and text alignment, as well as all of the font features from the previous tutorials. Feel free to play around and restyle the whole thing!

If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

body { font-family: Georgia, Times, "Times New Roman", "Liberation Serif", serif; }

h1 { font-variant: small-caps; }

h1, h2, h3 { text-align: center; }

.author {
  font-size: 1.2em;
  font-style: italic;
  text-align: right;
  letter-spacing: .1em;
}

.first {
   font-size: 1.2em;
  font-style: italic;
  line-height: 1.5;
  word-spacing: .1em;
}

p + p { text-indent: 1em; }Check out this Pen!

What's Next?

You're ready for the final installment of the series! Now it's time to play with color & shadows in .

Blog Font Style with CSS - Size, Weight, and Style

Blog Font Style - Part Three: Size, Weight, and Style
This is part three of the five part Blog Font Style series.

Now that you know how to select your text with CSS and set your font family, you're ready to control the size, weight, and style of your text. Let's start with font size!

I'm going to use p as my selector in the examples that follow, but you'll need to use the appropriate selector for the element you'd like to style.

Font Size

With the font-size declaration, you get to control the size of your text. There are three common size units used for font sizing.

Pixels

You can specify a font size in pixels, like this:

p { font-size: 16px; }

Overall, pixels are the easiest to use. If your blog is a "traditional" fixed-width site that doesn't change size or layout for different-sized screens and devices, pixel sizing works great. Your blog's font sizes will look just about exactly the same as they'd look in Photoshop.

But, if you're designing an adaptive or responsive blog, you'll need to learn to use ems or percentages instead.

Em

You can specify a font size in em units, like this:

p { font-size: 1em; }

Em values are a bit trickier to use than pixels, but they're more flexible for the reader because they can scale dynamically for different browser sizes and devices. An em value is based on the font size of the parent element, or, if there's no font size specified for the parent element, it's based on the browser default size — usually about 16px.

An em is a multiplier, so if your default font size is 16 pixels, 1em is equal to about 16px, while 1.3em is about 21px. You can convert pixels to ems (and convert in reverse, too) automatically at http://pxtoem.com

Percentage

You can specify a font size in percentage units, like this:

p { font-size: 80%; }

Percentages are similar to ems, but instead of acting as a multiplier, they increase or decrease font size by percentage. You can also use pxtoem.com to convert pixels & ems to percentage values.

In addition to these three options, you can also use the absolute size keywords: xx-small, x-small, small, medium, large, x-large, xx-large. These sizes are based on your reader's browser default size — usually "medium".

Font Weight

There are several font weight options. The first is "normal", the default font weight. It's rare that you'd ever need to specify normal.

Bold

You can set your font weight to bold like this:

p { font-weight: bold; }

Setting your font to bold "darkens" the text, making it appear thicker and heavier. If there is a bold version of your font available, the browser will use that. Most "web safe" fonts have a bold version. If you're adding a web font, make sure to include a bold version of your chosen font with your font bundle for best results.

If there is no bold version of your font available and you set your font style to bold, the browser will try to simulate a bold version. Sometimes this doesn't look so great — see Say No to Faux Bold at A List Apart for more on simulated bold.

100 through 900

You can set a numeric font weight like this:

p { font-weight: 500; }

Some fonts offer a broad range of weights, and each of those weights is assigned a numeric font weight of 100, 200, 300, 400, 500, 600, 700, 800, or 900. Before using numeric weights, check out a type specimen of your chosen font to see what the different weights look like.

Lighter & Bolder

You can set a lighter or bolder font weight like this:

p { font-weight: lighter; }

The "lighter" and "bolder" font weights are less common, and are usually used in conjunction with numeric font weights. If you choose one of these font weights, your text will appear one font weight lighter or darker than the font weight of its parent element.

For example, if you give all of the links in your paragraphs a font weight of "bolder", each link will be one weight bolder than the text in the surrounding paragraph.

Font Style

There are three font styles: normal, italic, and oblique. Normal is the default font style. It's the standard font without any adjustments. It's rare that you'd need to specify normal.

Italic

You can set an italic font style like this:

p { font-style: italic; }

When you set font-style to italic, the browser will use the italic version of your font if it's available. If there is no italic version of your font, the browser will skew the text slightly to simulate an italicized look.

If you add a web font to your blog, it's best to include the italic version of the font with your font "bundle" so that italic text is truly italicized. The italic version of a font has its own special character, and is so much nicer to look at than text that's simply skewed. In the example image below, the top text is Noto Serif normal, and the bottom text is Noto Serif Italic. Notice the differences?

Oblique

You can set an oblique font style like this:

p { font-style: oblique; }

This is rarely used, but I'm including it so you know what it is if you ever see it! Font-style: oblique; skews text slightly (usually about 10 degrees). If there's an italic version of your font available, some browsers will try to use the italic version instead of skewing the text, but that's unpredictable, so font-style: oblique; doesn't get a lot of use.

Font Variant

There's only one font variant: small caps. You can write a small caps variant declaration like this:

p { font-variant: small-caps; }

"Small caps" is an abbreviation of "small capitals", and basically it's when all of the letters in a word look like capital letters, except that the lowercase letters are smaller than the initial capital.

This looks best with fonts that have a small caps version. If there is no small caps version of your font available, the browser will simulate small caps by using scaled-down capital letters for lowercase letters. The differences between real and "faux" small caps are subtle, but true typophiles will notice!

Try It Out!

I've put together a simple Codepen demo for you to play with. This demo includes four HTML elements: a heading, a subheading, and two paragraphs. Each element asks you to do something to it with CSS.

If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

<h3>Make me italic!</h3>
<h4>Change my size!</h4>
<p class='bold'>Make me bold!</p>
<p class='small-caps'>Make me small caps, please.</p>
Check out this Pen!

What's Next?

In part four you'll learn how to use spacing, alignment, indentation, and line height to further customize the look of your text. Move on to .

Blog Font Style with CSS - Font Families

blog font style - part two: font families and font stacks
This is part two of the five part Blog Font Style series.

Now that you know how to , you're ready to start styling!

Today we're going to talk about how to use font families in CSS. The font-family declaration is how you set the fonts for the text on your page.

Here's an example of a CSS rule with a font family declaration:

h3 {
font-family: Georgia, Times, "Times New Roman", serif;
}

This font family declaration includes a font stack of web safe fonts. Let's talk about what those two terms mean.

The Font Stack

A "font stack" is a group of fonts that are fairly similar to each other and can stand in for each other. When the browser encounters a font-family declaration in your CSS, it starts with the first font and tries to match it. If the font is not available, it moves on to the next one. So, start your font stack with the font you really want to show, followed by the close second, on and on until you end the list with a generic font name like serif or sans-serif.

There are two ways a font can be "available" — it's either a "web safe" font that's already installed on your readers' computers/devices, or the font is loaded with your web page as a custom web font.

Web Safe Fonts

Web-safe fonts are fonts that just about everyone has on their computer or device. If you want to use a font stack of web safe fonts, check out CSS Font Stack, where you can copy pre-made font stacks of similar serif, sans serif, or monospace fonts (the "fantasy" and "script" offerings aren't quite as reliable, so skip those).

Using one of those font stacks, you can be reasonably sure that your readers will all have a similar reading experience on your blog.

The "web safe" fonts may seem a bit boring, but there are advantages to playing it safe. Web-safe fonts don't require any extra code, which makes them easier for you to implement. And, less code means quicker load times!

Custom Web Fonts

When web-safe fonts won't cut it, you can use a custom web font. There are tons of web font options available — Google Web Fonts alone has over 600 free fonts to choose from — and the design possibilities are endless.

Custom web fonts really shine when they're used instead of images for decorative text elements. Using a font instead of an image for decorative text improves the accessibility of your site — readers who use translation services to read your blog will be able to translate the text, and readers with visual impairments will be able to access your text.

Most web font services have comprehensive instructions for installing and using their fonts, so I won't get into installation details here (though I do have a tutorial on installing Google Web Fonts if you'd like to use them!). But, I am going to give you one tip that they don't always cover in web font documentation.

Building a Font Stack for a Custom Font

When you use a custom font, you should still build a font stack for it so that readers who can't (or just won't) load your custom font will have a reasonably stylish experience on your blog. Custom web fonts are fairly reliable, but sometimes the source file fails, or your reader has disabled JavaScript, or something else interferes and your reader can't see your custom font.

If you don't provide fallback fonts and your custom font fails for whatever reason, your readers will just see whatever their browser wants to show them as a default. Often, that's not pretty!

At the bare minimum, you should specify a generic fallback font for a custom web font, like serif or sans-serif. So, for example, if I wanted to use the lovely Google Web Font Josefin Slab, a minimal font stack would be:

h3 {
font-family: "Josefin Slab", serif;
}

I went with a serif fallback because Josefin Slab is a serif font. If I were using Josefin Sans, a sans serif, I'd choose sans-serif as my fallback.

If you've studied CSS fonts before you probably know that there are other generics, but serif and sans-serif are the most reliable. Fallbacks like "cursive" and "fantasy" often display as quirky fonts like Comic Sans or Impact, so it's best to stick with the classics.

I could improve this font stack by including fonts that are fairly similar to Josefin Slab and are commonly installed on PCs, Macs, and web-enabled devices. With a little bit of research, I was able to find Rockwell, a fairly common font that has similarities to Josefin Slab, and Courier New, an extremely common font that isn't quite as pretty as Josefin or Rockwell, but would do in a pinch.

h3 {
font-family: "Josefin Slab", Rockwell, "Courier New", serif;
}

Using that font stack, I know that most of my readers will see my custom font, but those who don't will see a reasonable substitute.

Try It Out!

I've put together a simple Codepen demo for you to play with. This demo includes two HTML elements: a heading and a paragraph. Each has a different font stack assigned to it.

Try changing the font families to web-safe fonts or fonts you have installed on your computer. If you really want to challenge yourself, try adding a custom web font (hint: you can use @font-face in Codepen)! If you'd like to share your experiment, "Fork" my Codepen to create your own and share the link in the comments below.

Want to get started? Click the "Edit on Codepen" link in the demo below or click here to open the Codepen editor in a new window/tab.

<h3>Change this font family!</h3>
<p>This paragraph could look nice with a different font family, too. Why don't you change it?</p>Check out this Pen!

What's Next?

In part three, you'll learn how to use font-size, font-weight, font-style, and font-variant to fine-tune your new font's appearance. Move on to

Blog Font Style with CSS - Finding the Selectors

Blog Font Style Part One: Finding the Selectors
This is Part One of the five part Blog Font Style series.

The first step to styling your text with CSS is finding the selector for the text. If you're new to CSS, that sentence probably doesn't mean much to you, but by the end of this post it will!

Today, I'm going to show you how to use Firefox or Chrome's developer tools to identify and use CSS selectors to style your blog's text.

What's A CSS Selector?

CSS is organized into rules. Here's an example rule:

h3 {
font-size: 35px;
}

The selector is the first part of a CSS rule. In the example above, "h3" is the selector.

When a browser sees a CSS selector, it knows to apply the styles inside the rule's curly braces to all of the elements on the page that match the selector. In this example, it would size every level 3 heading (h3) on the page at 35 pixels.

So, how do you know what selector to use? Let your browser's developer tools show you!

Using Developer Tools

Firefox and Chrome both have built-in developer tools that can help you identify the right selectors to use to style the font on your blog.

Overall, the developer tools in Firefox and Chrome are very similar. I use them both and I don't have a preference between the two. I'll show you examples of both so you can decide which one works best for you.

With Firefox

To use Firefox's developer tools, right click on the text you want to style and select "Inspect Element" from the dropdown menu. A "Developer Tools" window will pop up on your screen. On that screen, you'll see your blog's HTML markup. The element you selected is highlighted. In this example image, you can see that I've selected a level three heading (h3) with the classes post-title and entry-title (click image to enlarge).

If you move the developer tools window, you'll also see that your element is now highlighted on the page, too. The tooltip above the element tells you what kind of element it is, and the class(es) or ID associated with the element.


With Chrome

To use Chrome's developer tools, right click on the text you'd like to style and select "Inspect Element" from the dropdown menu. Your browser window will split in two, with your live site up top and your blog's source code down below (click image to enlarge).

Your element is now highlighted in the source code view. In the example image above, you can see that I've selected a level three heading (h3) with the classes post-title and entry-title. If you hover over that line in your source code, you'll see it highlighted on your live site, too.

Trying New CSS Rules

Now that you've selected the element you want to style, you can try out new styling inside developer tools without changing anything on your live site. This is great because you can experiment as much as you like without messing anything up!

In both Firefox and Chrome developer tools, you can test a new rule the same way. For this example, I'm going to change the font size of the h3 element I selected above to 35 pixels.

Both developer tools sets display the CSS rules for your page in a sidebar panel to the right. At the top of that panel, you'll see an empty rule with the selector element (on Firefox) or element.style (on Chrome).

detail of Firefox developer tools
detail of Chrome developer tools

Any rules you type into that empty selector will be applied to the highlighted element. So, for example, with the h3 element selected, anything you type in the element or element.style rule will apply to that h3 element.

So, let's change the font size of my post title to 35 pixels. On Firefox, I'd enter font-size: 35px; inside the element curly braces. On my blog, I'll see the heading font size increase instantly to 35px.

On Chrome, I'd type font-size: 35px; inside the element.style curly braces, and the heading size increases to 35 pixels.


Adding a New Rule to Your Blog

Once you've settled on a new rule for your blog, you can add it to your blog's CSS. If you're on Blogger, go to Template > Customize > Advanced > Add CSS and enter your new CSS rule. On Typepad, go to Design > Custom CSS. On Tumblr, go to Customize > Advanced > Add Custom CSS. On Wordpress your custom CSS location will vary. If you're using Jetpack's Custom CSS option, it's under Appearance > Edit CSS.

If after playing around with the size I decided I liked my h3 elements to be 35 pixels on my blog, I'd write it like this:

h3 {
font-size: 35px;
}

Looks familiar, right? That's the example rule I showed at the beginning of this tutorial. This would size every h3 element on my site at 35 pixels.

If I had multiple h3 elements on my page, and only wanted to style my post title h3 elements at 35px, I'd select them like this:

h3.post-title {
font-size: 35px;
}

You may have noticed from the developer tools screenshots that I could make the rule even more specific by selecting the h3 elements with h3.post-title.entry-title. But, I don't actually have to get quite that specific on this blog. That will vary from blog to blog, though.

Give It A Try!

Open up your developer tools in your favorite browser and play around with the style on any website — mine, yours, the New York Times, whatever! Spend some time inspecting elements and changing their size and color. You can't hurt anything with developer tools, so feel free to experiment.

If you're using Firefox's developer tools and you'd like to learn more, check out Virtual Blog Makeovers with Firefox.

What's Next?

Believe it or not, you just finished the hard part! The next step is to learn how to choose your font using the font-family declaration. Move on to

Blog Font Style with CSS - A Tutorial Series

Blog Font Style - A CSS Tutorial Series for Beginners

Blog Font Style is a 5 part tutorial series on styling text with CSS. This series is designed for absolute beginners — no CSS experience necessary!

Here's What You'll Learn:

Technical Requirements

If you can add CSS to your blog, you can use these tutorials. Blogger, Wordpress, Typepad, and Tumblr users, you're good to go. Wordpress.com users will need the premium Custom CSS option to add CSS. And, of course, CSS is not just for bloggers — any website owner who has access to their site's CSS can use these tutorials.

How to Follow the Series

There are a lot of ways to keep up with the series! You can add Code it Pretty to your favorite RSS reader. Or, you can follow Code it Pretty on Bloglovin. I'm also going to post all of the tutorials on my Code it Pretty Pinterest board, share them on Twitter, and post them on Google+. If you'd like to subscribe to my blog by email, please use the signup form at the bottom right of this page.

Get a Head Start

If you've got some time for weekend reading and would like to get a jump start, here are a few related tutorials from the archive to get you started:

See you Monday!!

Why Bloggers Love Google Plus - Part Three

Why bloggers love Google+, part three

This is the final post in a 3 part series. In part one, we heard from +Elaina Newton of the Rising Spoon. In part two, we heard from +Nickie O'Hara from Geekalicious. Today, I'm wrapping up the series with my little love letter to Google+!

I have to admit, I didn't take to Google+ at first. As a habitual early-adopter, I got myself an invite fairly fast, but once I joined, I jumped on the "G+ is a ghost town" bandwagon too fast and left.

It wasn't until I was invited to participate in Blogger Hangouts that I realized how much I was missing by giving up on G+ too soon. Here's why it's quickly becoming my favorite social network.

Marie Mosley

The Circles

Following on Google Plus is different than it is on other social networks. You add people to "circles", and you can adjust how often those circles appear in your main feed. This took me a little while to get used to, but once I got the hang of it, it became one of my very favorite features. I'm able to adjust the "volume" of different people and pages so the quiet ones don't get drowned out by super-active posters.

Planned circles also help me keep up with people and pages that post outside of my time zone. By placing them in a circle I check when it's convenient for me, I never miss out on their posts, even if they were made while I was asleep!

The Conversations

Google Plus is great for asking and answering questions, and for talking about big ideas. There are so many truly intelligent, thoughtful, and generous people on G+. The format of G+ posts fosters conversation among all those bright lights.

I've learned a lot from people I've met on G+, and I've also used G+ posts to expand on some of my tutorials and answer questions from readers.

The new-ish "Communities" feature makes it even easier to find and converse with people who share your interests. I'm involved in tech communities, blogging communities, and communities based on my hobbies outside of the blogging world. If you're new to Google+, I recommend checking out the communities first to find people to follow and start introducing yourself.

The Hangouts

I absolutely love G+ Hangouts, both as a spectator and as an active participant. As "co-host", I've done several Blogger tutorials via Hangout with Blogger's community manager +Lisa Ding. Those Hangouts give me a chance to share my tutorials & interact with my readers live. And, the videos are available on YouTube after the live Hangout, so anyone can watch them whenever it's convenient.

I'm also addicted to watching Hangouts, either live or later on YouTube. I'm a big fan of the Museum of Modern Art's MoMA Learning Hangouts, Hangouts with the White House, and Chef Dennis Littley's educational foodie Hangouts.

And, I'm very excited about the newest Hangout feature, remote desktop. The remote desktop lets you take temporary control of another user's computer (with their permission, of course), which makes it an amazing tool for providing tech support to friends, family, and clients. It's a brand new feature I haven't had a chance to try yet, but I know exactly what I'm going to do next time I get a tech support call from a relative!

The Data

I'm a bit of an analytics nut, and Google+ has plenty of data to offer. One of the coolest features is Ripples, a visualization of the sharing activity on G+ posts. Here's a screenshot of the Ripples from the sharing activity on Paperman, a Pixar short that became wildly popular on G+.

Ripples view of Paperman on Google+

Screenshot by +Zach Alcorn

That's an example of an extraordinary amount of sharing activity — the average post has a lot fewer circles! But, no matter how many Ripples come from your post, you can use those Ripples to discover influential people in your audience and find new, interesting people to follow.

Google+ is also an essential component of Google Authorship, which opens up new data in Google's Webmaster Tools. With a Google+ profile associated with my blog, I'm able to access author stats inside Webmaster Tools, which shows my how often my posts are showing up in search and how often they're being clicked. If you're not familiar with Google's Authorship program, check out Google Authorship: What It Is and How To Get It for a starter guide.

Come Say Hi!

I hope this series has given you some useful tips on getting started with Google+, and I'd love it if you got in touch on G+!

Many thanks to Elaina and Nickie for their insightful posts — make sure to check out their blogs, The Rising Spoon and Geekalicious!

Why Bloggers Love Google Plus - Part Two

Why bloggers love Google+ part two

This is part two of a three part series. In , we heard from +Elaina Newton of the Rising Spoon. Today I'd like to introduce you to Nickie O'Hara from +Geekalicious. Tomorrow, I'll wrap things up with my G+ love story. Now, without further ado, here's Nickie!

When Google Plus was first announced I attempted to stick my toe into the murky waters of yet another social media platform. I was unsure what to expect and because I am a heavy user of Facebook and Twitter I was inclined to compare. I needn't have bothered because it is so different.

Nickie O'Hara

Firstly, it was very quiet. I could almost hear an echo when I shouted into the virtual void but then I realised that this was a place to start again, hone my experience and use the platform in a different way to all the others. Facebook is the place for friends and family, Twitter is for short and snappy conversation (and a bit of blog pimping) and I soon found out that Google Plus is the place to expand my networks in a way I've never managed before.

Exploring

I read articles about Google Plus and I was encouraged to explore using the search bar, very much in the same way that I use the Google search engine, to find people connected to ‘subjects' or ‘themes'. I also took part in a Google Hangout at a conference I was speaking at (summer 2012) and that opened my eyes to an exciting way to connect with other people for many different reasons.

Growing an Audience

I concentrated on my own profile for a long time; I blog in my own name and I am in control of everything I put on the internet. I did not want to use a ‘page' for my blog because I felt that it would be yet another update to consider. However, I understood that the Search Engine Optimisation (SEO) built into page facilities was going to help boost search sight of my newer (geek- themed) blog. So I set out to test the theory by linking only Geekalicious to a page and continuing to interact in the way I had been doing and promote my personal blog on my personal profile.

It is, as I suspected, hard work. However, having the definite split has helped me to find a fresh audience and new, interesting communities linked to the theme of my new blog. I was also very lucky to connect to a Google Plus Community Manager and get my page verified. This has helped with a slow, organic growth that is manageable.

I'm a bit slack compared to many users but there are some very knowledgeable people using Google Plus and they are generous with their advice and assistance. They are keen to create a positive atmosphere on G+. As with many other people, I am tentatively using Google Plus because I am unsure where it will lead me and I don't want it to become a replica of all the other social media platforms that I use. Each has their own space and use on the World Wide Web and rightly so.

My Advice for Beginners

Here are my five hot starter tips:

  1. Set aside some time to familiarise yourself with the layout of G+
  2. Set aside some time in your social media time to create valuable updates relevant to your reasons for using G+
  3. Don't be afraid to +1 your own updates. This isn't in the same realms of “liking” your own status on Facebook.
  4. Respond to comments, shares and +1's. It's good community practice.
  5. If you use Chrome as your browser, add a +1 extension so you can interact and share online articles without leaving the page. Also look at having a Circle Count extension to check G+ relevance.

Google Plus isn't for everyone. I see a lot of ‘link dumping' and confusion but if you're prepared to invest some time and energy into finding out how G+ works then you will reap the rewards.

You can connect with +Nickie O'Hara on Google+, or read her insightful and entertaining blogs, Geekalicious and Typecast. When you're ready for more G+ love, check out .

Why Bloggers Love Google Plus - Part One

why bloggers love Google+

This is part one of a three part series about what makes Google+ so great for bloggers. For today's post, I asked +Elaina Newton of the delicious foodie blog The Rising Spoon to tell you about why she loves Google+. She has a big love for G+ — and a big following to match! On Tuesday we'll hear from Nickie O'Hara of Geekalicious, and on Wednesday, I'm going to finish off the trilogy with my somewhat-geekier reasons for loving Google+.

If you're like most people today, you either don't know much about Google Plus or you simply don't care. You may have read that Google Plus is an empty, abandoned social network. This is far from the truth.

The People

Google Plus is home to a thriving community of interactive, responsive members. I can personally attest to this because I am an active plusser (that's the term google plus users affectionately label themselves). As a relatively new Real Food blogger and enthusiast nerd, I've managed to build a decent number of quality connections in the eight months I've been using Google Plus. In that time, I've grown a moderately sized network of like-minded individuals using circles.

As of now I have about 1,400+ people circled (meaning I follow them, so they show up in my stream) and over 4,000 people have me in their circles. I achieved this by posting a mix of original and topical content and asking a lot of questions. Most importantly, I consistently liked (Google Plus calls it +1), shared and commented on other plussers' posts.

The Communities

While the main focus used to be on circles, it recently shifted when Google Plus implemented their communities feature. In essence, they are user created groups centered around specific niches. It's hands down the fastest and easiest way to connect directly with knowledgable and interesting people.

Right now, I'm a part of 18 communities that have thousands of members and vary in focus from cooking, writing, art, craft beer, science fiction, sustainable living and social networking. There's a community for practically any topic or activity you can imagine. Within these communities, I actively participate in four and am a moderator for two.

It would be an understatement to say that I love Google Plus. It goes much further than that. I owe its users so much for all they've taught me about blogging and expanding my content. If I hadn't discovered all the wonderful foodies, bloggers (especially Marie) and professional chefs on Google Plus when I first started my blog, it would have taken me three or four times longer to progress to where I am today.

So when I see online journalists and bloggers hastily creating profiles, barely using the social network and then making snap judgements that no one uses Google Plus...well, that doesn't sit right with me.

Keeping it Real

You can't just sign up, create a threadbare profile, use it a few times and expect to get the full experience. It requires a smidgen more dedication than that. Especially since Google Plus isn't your average social network. You're not just consuming information. You're interacting with others, starting conversations and building relationships. That's why I like it so much.

It's an amalgamation of both Facebook and Twitter's best qualities, plus new features exclusive to Google. Imagine a new social network that favors visual media, but also encourages lengthy posts that inform readers and facilitate conversations. A stream that updates constantly, is searchable by keyword, shows you trending topics and has no character limits. A network with a strong sense of community and high level of interactivity. A place where content creators, entrepreneurs and enthusiasts, ranging from professionals to amateurs, can connect, share information and build communities based on common interests.

This is Google Plus today. But it's still changing and growing. Unlike other social networks, Google actively responds to feedback from its users. And it thrives on adapting and experimenting with current versions of its products in order to meet the public's demands. So do yourself a favor and give Google Plus a chance. Start by creating a solid profile. Do this by uploading a genuine picture, flesh out your "About" section with a few personal details and start searching for people who have things in common with you. It won't take long to find awesome individuals who will gladly start up a conversation. Heck, I give you a personal invitation to circle and seek me out.

Go say hi to Elaina on Google+, or check out her absolutely mouthwatering blog The Rising Spoon. When you're ready for more G+ love, check out by Nickie from Geekalicious.

All About Disclosing Sponsored Posts

Disclose: Paid link disclosure for your readers, the FTC, and search engines

When you write a sponsored post, you need to let your readers know that you received compensation or a product in return for the post. It's not just good manners — if you live in the United States, it's the law.

And, no matter where you live in the world, you need to disclose paid links to search engines. If you don't, you risk damaging the search engine ranking of your own blog and your sponsor's website.

There's been a little bit of confusion lately about what exactly you're supposed to do to disclose sponsored posts. Your responsibilities as a blogger are actually quite simple. Here what to do:

Let Your Readers Know When You're Paid to Post

If you receive money or a product from a business or person, and you blog about them, you need to disclose — up front — that money or product was given to you by that company or person.

The easiest and most direct way to do this is to put "Sponsored" or "Ad" in your post title, and a brief description of how you were compensated in the first paragraph. If your post is long and your readers will need to scroll between the disclosure and the link to the sponsor, add another brief disclosure before the link to your sponsor.

I've seen some tutorials that suggest using an image to disclose a sponsored post. While that's an eye-catching way to do it, it's incomplete if you don't include alt text for the image. Images without alt text are not available to readers with visual impairments who use screen readers to browse the web. You need to make sure that all of your audience is notified that your post was sponsored.

BTW, The FTC Guidelines for Sponsored Blog Posts Haven't Changed

In March 2013, the FTC released a new set of guidelines for advertisers, ".com Disclosures: How to Make Effective Disclosures in Digital Advertising", and this made many bloggers think that the guidelines for sponsored blog posts had changed.

Sponsored blog posts and endorsements are still subject to the guidelines in the "Guides Concerning the Use of Testimonials in Advertising", which was released in 2009. If you're already familiar with those guidelines, you're probably already doing everything right.

There is one small new detail in the new document about disclosing sponsored links on social media. All you need to do to disclose those properly is add "Ad:" or "Sponsored:" to the beginning of the social media post. Piece of cake, right?

Identify Paid Links for Search Engines

Search engines penalize websites that don't disclose paid links, and those penalties are applied to the both blog that posts the undisclosed link and the advertiser whose link was not disclosed.

All you need to do to avoid this problem is add the rel="nofollow" attribute to your paid link. Last year I wrote a detailed tutorial on adding nofollow to links, but in a nutshell, you add rel="nofollow" inside your link to your sponsor, like this:

<a href="http://www.sponsor.com" rel="nofollow">My Awesome Sponsor</a>

You can read more about Google's policy on paid links and "link schemes" in the Webmaster Tools knowledge base.

Update - May 29, 2013:

Google's webspam team leader, Matt Cutts, posted a video that goes into more detail about how Google wants you to disclose your "advertorial" content:

What If My Sponsor Doesn't Want Me to Disclose?

Drop them like a hot rock and don't feel sorry about it.

The FTC guidelines are designed to compel advertisers to tell the truth about their products, and let people know when the media they're consuming is an advertisement. The search engine guidelines help prevent sites from getting an unfair advantage in search engine results. If your sponsor won't be honest with your readers and compete fairly, they don't deserve space on your blog.