Learn to customize your own blog with confidence

Updates to the Pinterest Gadget for Blogger

I want to thank everyone who left a comment on the Pinterest gadget for Blogger, both for your support and for pointing out bugs and making feature requests. Your feedback is deeply appreciated! Thanks to your comments I have an Internet Explorer 9 bug fix and a new gadget option to share with you today.

Update and a New Option for the Pinterest Gadget

  • Internet Explorer 9 Bug Fix
  • Option to open Pinterest links in a new window

Internet Explorer 9 Bug Fix

Big thanks to Robert, who clued me in to an Internet Explorer 9 bug that happens on some Blogger templates. I'm happy to say there's an easy, quick fix for this bug if your template is affected.

Do You Need the Fix?

If you've got the Pinterest gadget on your site, take a quick look at it in Internet Explorer. Click on one of the thumbnail links. If the link goes to the Pinterest page, you don't need to change anything and you can get back to your Pin-happy day. If the link is broken, move on to the fix. I'll show you how to make a tiny tweak to your Blogger template and get the Pinterest gadget working!

The Fix: Step One

First, back up your template (instructions here). Do not skip the backup.

The Fix: Step Two

After you've downloaded your template copy, click the "Edit HTML" button below your "Live on Blog" screenshot. Click the "proceed" button on the next window.

The Fix: Step Three

In the top of your template's <head> you'll find a part that starts with: <meta content='IE=EmulateIE(some number here)' http-equiv='X-UA-Compatible'/>

Change whatever number is there to =edge so it reads: <meta content='IE=EmulateIE=edge' http-equiv='X-UA-Compatible'/>

This change tells your browser to act like the newest version of Internet Explorer when it reads your site. The lower numbers encoded in many Blogger templates (usually 7 or 8) can force IE9 to work below its potential and miss out on some great stuff, like the corrected links in the Pinterest gadget!

After you've updated the meta tag, save your changes and go check out your blog again in Internet Explorer 9. Click a link from your Pinterest gadget and it should go to the right place. If it doesn't, double check that your change was saved, and make sure you didn't add any spaces into the meta tag. If you've made the changes correctly and this doesn't fix the problem, please let me know in the comments. Link me to your blog so I can take a look at your template and the gadget.

Option to Open Pinterest Links in a New Window

This feature was requested by Michele. If you'd like your Pinterest thumbnails to open in a new window, too, here's what to do:

Step One

Save a copy of your version of the gadget to a plain text editor (like Notepad or TextEdit). Do Not use a word processing program to save your gadget.

Step Two

You'll be changing the jQuery here, so be super careful not to drop any of the curly braces {} or parentheses (). It's a fussy language!

Scroll down near the bottom of the gadget code and find the segment of the code marked with the comment "//correct href for images so they point to Pinterest". Add a line of code right before the last }; in that segment, like so:

$(function() {
$('.rssFeed a').each(function() {
var href = $(this).attr('href');
$(this).attr('href', 'http://www.pinterest.com' + href);
$("#pinterest a[href^='http://']").attr("target","_blank");

Save your gadget and click your Pinterest links. They'll now open in a new window (or tab, depending on your browser settings). If it doesn't work, check your code for typos or omissions, and watch those fussy braces & parentheses!

Have you had any trouble using the Pinterest gadget on your Blogspot blog?

I want to know and I'd love to help! Tell me about it in the comments. Be sure to link me to your blog so I can check it out.

Three Image Mistakes Bloggers Make

3 blog image mistakes

No, this isn't about choosing ugly pictures or failing to credit photo sources! Those are both big mistakes, for sure, but today we're going to talk about some less-obvious errors that can be equally bad for your blog.

1) "Writing" Your Post With Images

Now that Pinterest is the biggest thing since Facebook, bloggers are looking for ways to make their content as Pinnable as possible with eye-catching images. However, in an attempt to go image-heavy, some bloggers are burying important text in images. Here's an example of what I'm talking about (identifying details blurred to protect the well-meaning blogger):

blog post made up entirely of images with no alt text or descriptions

These pictures are the entire post. There is no text in the blog post other than the text in the images. This post is an extreme example — it doesn't even have a written title.

I found this blog through a heavily-repinned photo on Pinterest, so it did meet its presumed goal of being Pinteresting. But, oh boy, is it ever an accessibility and SEO disaster! For a quick glimpse of what's wrong with this picture (literally), let's take a look at the information a visitor with visual impairments would get from this post. Here's a screencap of this post as read by Fangs, a Firefox plugin that emulates a screen reader's output of a website. Again, I've blurred out information that could identify the blog.

screen reader results from an all photo blog post

Notice that Fangs doesn't "see" any of the text in the images. This all-image post would make a screen reader say a series of disjointed keywords to a visitor with visual impairments, and that's all.

That's bad enough, but here's another important consideration: that text isn't available to search engines, either. A search engine crawler would find a random arrangement of keywords in this post, just like the screen reader did. At best, the search engine would consider this "thin content". At worst, it would consider it spam.

There's nothing wrong with an image-heavy approach to blogging if it's done right. Striking images are wonderful, especially for wedding and craft bloggers, whose fans adore photos and arrive though highly visual sources like Pinterest or Stumbleupon. But you've got to remember that your human visitors all have different needs, and NONE of your robotic visitors have eyes.

If you've been hiding text in images, there are two things you can do to fix it. You could write out the text from each image as captions or in paragraphs below the photos, or you could enter the text of each image as alt text.

Not familiar with alt text? Then you might be guilty of image mistake #2.

2) Neglecting Alt Text

Even if you're not "writing" your posts in images, you might be neglecting your images' alt text, and that's a shame! Alt text assists visitors with visual impairments, provides valuable information about your images to search engines, and makes your images findable through visual search engines like Google Image Search and Bing Images. It also helps makes your site more useful to visitors on very slow connections.

Wordpress does a great job of encouraging you to put something in the alt text for your images; when you upload an image through the Wordpress media uploader, you're presented with this screen.

screenshot of the Wordpress media uploader

Whatever you type into the "Alternate Text" field will become the image's alt text. Easy as pie.

If you use Blogger, you'll need to take a little more initiative to provide alt text for your images. After you've uploaded a photo, switch to HTML view by clicking the HTML button above your post field...


Just a few days after this post originally went up, Google released a whole bunch of new updates to Blogspot, including an easy way to add alt text to images. Full details on Blogger Buzz.

Your images now make more sense to the whole Internet. Hooray!

3) Forgetting About Color Vision Differences

a red heart with black text that reads: not everyone can read this text

Color perception varies from person to person, and some color combinations in particular are hard for many people to see. If you have "normal" color vision, you may not realize that your favorite color combination is hard to read or totally invisible to others. For example, black text on a red background is invisible to some people with red vision deficiency (this is a color combo I see A LOT in graphics on wedding blogs).

There are some great resources online for learning more about color vision differences. Penn State University's AccessAbility site has a helpful rundown of common color combinations that are difficult for color deficient viewers to perceive. You can also use online tools to simulate the different types of color perception to test out color combinations before you run with them on your blog. Check out Color Vision for a cool color palette picker that can help you find color combos that are universally viewer-friendly. You can also view a simulation of how your site looks to people with different types of color vision deficiencies at Colorfilter.

Do you know of any blogging image trends that are really big mistakes? Let me know in the comments!

Selling Ads on Your Blog? You Need to Know Nofollow!

why, when, and how to nofollow links from your blog
Updated in September 2013 with new resources.

Most bloggers know that you have to disclose sponsored posts to your readers, but did you know that you should also let search engines know when links are sponsored by adding the "nofollow" tag to the link?

If you didn't, you're certainly not alone. This little detail is woefully under-explained and often overlooked. But don't worry, I'll get you up to speed today!

"Nofollow"? What's That?

It's a microformat tag added to the end of a link that instructs search engines not to "follow" the link. When a search engine encounters a link with a nofollow tag, it does not count the link toward the search engine rank of the target site.

You "nofollow" a link like so:

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

If your link to your sponsor is an image link (for example, in a sidebar ad), your link to your sponsor will be wrapped around an image element. Make sure to put the nofollow tag inside the link element , not the image element. Look for the anchor tags wrapping the link element (<a> and </a>) to help you tell it apart from the image.

What Happens When I Nofollow a Link?

Adding the nofollow tag to a link tells search engines that you added the link to your post because you were paid to, or because you don't want to necessarily endorse the linked site.

A nofollow tag does not change what happens when your readers click a link, and the link will not look different to your readers. Also, nofollowed links are not harmful to the search ranking of linked sites (no matter what some less-than-respectable advertisers may tell you).

Why Do Search Engines Want the Nofollow Tag?

Despite the complexity and sophistication of their algorithms, search engine robots are kind of dumb. Even if you clearly disclaim your sponsored posts and advertisements in a way that your human readers understand, your robot readers won't know that you've disclosed your paid links unless you use the nofollow tag.

Google expects you to either add the rel=nofollow tag to the end of paid links, or redirect the paid links to an intermediate page on your site that's blocked from search engines in your robots.txt file. For more information, see Google's official policy on paid links.

What about Affiliate Links?

Good question. Nofollowing affiliate links was the subject of a lot of debate in the SEO world for quite some time, but in June 2012, Google's Matt Cutts gave this answer about nofollow-ing affiliate links:

In summary: Google can recognize affiliate links from most major services, so nofollow-ing those links is not quite as important. But, it doesn't hurt to nofollow them, either.

Do I Need to Add Nofollow to Adsense or Network Ads?

Adsense ads do not need a Nofollow tag since they redirect through Google Ad Services and/or Doubleclick before going to the advertiser's site.

Many other ad networks work in a similar way — my two favorite indie ad networks, Passionfruit Ads and Adproval, use the nofollow and redirect methods, respectively. If you're running banner ads through a network and are not sure if they're redirecting or nofollowing outbound links, check the ad network's documentation or contact them for more info.

Oh no, I'm already running ads without Nofollow! What do I do?

Well, first, don't freak out, it's fixable! There are a couple of different ways to do your nofollows. The technically simple, but potentially time-consuming way, is to go through your existing ads and sponsored posts to manually add the rel="nofollow" tag to each sponsor's URL.

If you're using a Wordpress plugin to handle your banner ads, that plugin may already take care of your nofollow needs for you. Many advertising plugins either add nofollow to ad URLs automatically or redirect the URLs so you're not directly linking to your advertiser. Check the documentation for your plugin to find out how it handles advertisers' links before you set yourself up for an afternoon of unnecessary work!

Another option for self-hosted Wordpress users is a redirection plugin. Lisa from Elembee has a tutorial on using the Redirection plugin to redirect affiliate links, which you can easily adapt to work for your sponsored post links or links in banner ads.

Further Reading

The Process Behind the Pinterest Gadget

This is just the backstory behind my Pinterest gadget for Blogger. If you're looking for the gadget tutorial, it's here.

In these very exciting few days since I posted a Pinterest gadget for Blogspot blogs I've had the pleasure of seeing it in use on four great blogs I love: Oh Lovely Day, Kiss My Tulle (on Typepad!), and Budget Fairy Tale. It is so gratifying to find a solution for a problem of my own and see that solution work for others.

When I introduced the gadget, I mentioned that it was born after a lot of research, experimentation, and teeth-grinding. It was a major learning experience for me, and today I want to tell you a bit about the (occasionally very frustrating) process behind the gadget.

The Idea

Earlier this year a crop of great Pinterest plugins came out for Wordpress (my favorite: Jodi Wilkinson's Pretty Pinterest Pins. It is, indeed, quite pretty). I was in the planning stages of Code it Pretty at the time, and was just about 100% decided on doing it as a Blogspot blog. Seeing "Pretty Pinterest Pins" was the kick in the rear that I needed to get going on a Pinterest gadget for Blogger. I decided to make it my weekend project for however many weekends it took me to get it done. I was figuring 1 - 2 weekends. It ended up taking 4, with one weekend of "frack this, this gadget is never happening" included.

Trying the Built-In Options

I follow some of my favorite Pinners in Google Reader, so I immediately knew I would want to use Pinterest RSS feeds for the gadget. I thought perhaps I could use Blogger's built-in RSS gadget, which sure would have made this whole endeavor very simple. Here's how that turned out:

failed RSS project

Yeah, that sucked.

Next, I tried the built-in slideshow gadget, with even worse results -- nothing showed up at all. So, with none of the built-in gadgets doing what I wanted, I started looking around for different options.

Going DIY

I hadn't worked with RSS feeds in any kind of detail before this project. All I've done with them in the past is drop them into gadgets/widgets or subscribe to them in Google Reader. So, I wasn't familiar with Google's Feeds API and what it can do with RSS feeds. As it turns out, it can do quite a lot.

I used the Feed API's hosted "Code Playground" and tried to build a gadget there. The Code Playground is great, by the way. You can play around with code, get messy, then press one button and have it reset all sparkly clean.

I made some decent progress; the Feed API doesn't automatically show images but a helpful person in the API forum posted a snippet of code that made the thumbnails visible.

I noticed a little something weird about how the pictures were linked (more on that very soon), but I thought it was a quirk of the Code Playground and nothing to worry about. But, I wasn't entirely thrilled with how the gadget was turning out so I did some more looking around. Then I found something awesome.

The Instagram Gist

While Googling around for information about RSS feeds and the Google Feeds API, I came across Richard Mackney's brilliant Gist for displaying Instagram images on Posterous, written in jQuery. It looked like this was the perfect solution; it grabbed images from a feed neatly and it had easily-customized CSS. I was EXTREMELY excited about this find, and I thought my search was over.

But then I realized a horrible thing about the Pinterest RSS feeds.

That "little quirk" I'd noticed in the Code Playground was actually a real problem. In the Pinterest RSS, the href link from the image is a relative URL, like this:


So, when I placed my "presumed to be finished and looking really nice" first draft of the gadget on my blog and clicked on a Pin thumbnail, it linked to:


That is: a completely non-existent URL that would give my visitors a 404 error if they clicked on it. This was bad. And I didn't know what to do to change that.

A Half-Assed Solution

I'd consider myself an advanced beginner in jQuery. I've used it a lot but mostly for superficial things like adding color and animation effects to sites. I haven't had much reason to dig into its more practical uses, but this project gave me the opportunity.

First, I tried making small changes to the existing Instagram code but hit brick walls there. Then, quite frustrated, I decided to remove the hrefs on the images to make them unclickable using .unwrap(). At least then the gadget wouldn't produce confusing 404 urls. That worked; the links were removed. But I hated the gadget.

Giving Up

If the images weren't going to be clickable, I didn't want to build the gadget. I felt that a gadget with unclickable images would just go to show that Wordpress is cool and Blogger drools, and I didn't want to help perpetuate that with a crappy gadget. So, I took a weekend off from the project, sulked a bit, and played video games all weekend instead of messing with code (Civilization Revolution, if you must know).

Starting Again

But no, I wanted that damn gadget! So after cleaning up from my personal pity party, I got back to searching. I could not accept that I couldn't correct this problem, somehow.

Then I remembered something from a jQuery demo I saw what feels like ages ago. Prepend! I'd seen .prepend() used to help make, of all things, rounded corners, and I wondered if perhaps I could prepend the correct beginning to the href urls and fix my messy URL problem.

I took my newly remembered word to Stack Overflow, where the occasionally-grouchy-but-deeply-knowledgeable best minds of the Internet ask and answer questions about code. I searched for "prepend href" and found EXACTLY WHAT I NEEDED.

With this little snippet of jQuery, I fixed the linking problem, and the gadget was good to go. All it needed was some CSS enhancements to make it pretty and it was done and ready to rock.

Lessons Learned

Of course, the #1 lesson I learned here was that I need to study jQuery more seriously. I'm going to have to get over my dislike for the fussy little curly braces and parentheses and just dig into it for more than just photo galleries and fancy hover effects.

The #2 lesson I learned is that I probably would have finished this a whole lot sooner if I wasn't so shy about asking questions. It's HARD for me to admit that I don't know something in general, but it's 1 million times harder for me to do so on the Internet. I have these horrifying visions of my grandkids looking up what I posted on the Internet and thinking, "OMG LOL Grandma was a stupid n00b" (yes, I do think my grandkids will be thinking in text speak). If I had been cool about it and just asked somebody what to do I could have presented this gadget way sooner. I regret that I did not.


If you've read this far I appreciate you taking the time to check out my process, and I hope that some of what I've shared here might be useful for you in your own coding or web design process, even if it's just knowing that your tech frustrations are normal and surmountable. If you really want to make something happen, there are resources out there to help you through it and PEOPLE out there who know how to help. Some of them even want to help! I'm hoping Code it Pretty will be a resource for you, and I also hope you'll share your favorite resources with me.

A Pinterest Gadget for Blogger

Pinterest and Blogger together at last

There's a New Version of this Tutorial!

I revised this completely in 2015 and republished it at: A Pinterest Gadget for Blogger - Updated 2015. The new version is faster, prettier, and easier to install!

Support for this older version of the code will end in March 2015.

Blogspot bloggers can be forgiven for a little bit of Wordpress jealousy now and then, but today we can scratch one thing off the list of envy items: A Pinterest Gadget!

Yep, after a lot of experimentation, research, and teeth-grinding, I put together a rather stylish way to add a Pinterest showcase to your blog's sidebar. I'll tell you all about the teeth-grinding later when I post about how this was made. For now, let's get you going with your very own Pinterest gadget for your Blogspot blog!

Difficulty: Brave Beginner
If you're familiar with CSS at all you can do this in your sleep. If you've never worked with CSS before, wait until after you've had your coffee to try this ;)

Gadget Features:

  • Displays cropped thumbnails of your most recent Pins, or the newest pins on a specific board.
  • Cropped thumbnails expand to show full thumbnail when hovered.
  • Flexible! The gadget works as a sidebar gadget or as a horizontal gadget.
  • Customizable image size.
pinterest gadget hover effect before and after

Ready to get this going on your blog? Here we go!

Get the Code

I've posted the code for this gadget as a Gist on GitHub. We'll talk about GitHub in more detail someday, but for now all you need to do there is get the gadget code. Here's the link:


You can either download the code or simply copy and paste it directly from the website.

Edit the Code

If you're comfortable with Blogger's HTML/Javascript gadgets, you can paste the code right into a gadget box and edit it from there. Otherwise, open the file with a code editor or a plain text editor (Notepad is built in on PC, TextEdit is built in on Mac). Please DO NOT use a word processing program!

Edit the Pinterest URL

Find and replace the text YOUR-USER-NAME with your Pinterest username. For example, I changed:




This tells the gadget to get the photo feed from all of my Pinterest boards. If you want to narrow down to one specific board, use this structure for the RSS url:


Once you've done that, save the file and then let's move forward!

Add the Pinterest Logo and Latest Pins Link (optional)

Scroll down to the bottom, beneath the second </script> tag. You'll find a note there about the Pinterest logo and link. To enable this, remove these tags <!-- --> that surround the HTML.

Now, enter your Pinterest url into the quotation marks inside <a href="">

If you'd like to enable the logo, you'll need an image. You can get the official Pinterest logo on Pinterest's Goodies page. You'll need to scale it down A LOT; the image they give you is a 10,000px beast.

Once you've scaled the image down to a normal size, go into your Picasa web album for your blog and upload your resized logo there. After you upload the logo, right click it and copy the image's location.

Paste the image location url into the gadget code in the quotation marks inside <img src="">

Once you've made these changes, save the file.

You will probably need to tinker with the CSS after installing the gadget to get it looking perfect, but for now let's test it out with the built-in CSS.

Installing the Gadget

Now, open up your Blogger account if you haven't already.

  1. Go to "Layout"
  2. Click "Add a Gadget" wherever you'd like the gadget to appear.
  3. Select "HTML/Javascript" from the gadget menu.
  4. Copy and paste your code into the gadget.
  5. Save your gadget and check out your page! If it's not perfect, we'll go over how to make it perfect in the next section. If it's perfect, yay! Get back to Pinning!

Note that the gadget doesn't update instantaneously when you pin something new. New pins usually show up within an hour after they're posted. There's no way to speed that up.

Customizing the Gadget's Appearance

Now we can dig into the gadget's CSS to make some cosmetic changes if you'd like.

Customizing Image Size

The default sizing for the gadget thumbnails is 100px square. But, you may need to reduce the thumbnail sizes to fit into a narrower column, or increase the thumbnail size to go big. The thumbnail size setting is in here:

.rssBody li {
position: relative;
color: transparent;
width: 100px;
height: 100px;

overflow: hidden;
padding: 6px;
float: left;
z-index: 1;

You can play with those numbers to find the perfect sizing for your thumbnails, keeping in mind that the maximum width is 192px and the thumbnail heights vary. The padding can also be customized: if you're placing your gadget into a narrow sidebar, reduced padding can help make a tight squeeze a little easier.

Changing the Hover Direction

This gadget was designed with a left sidebar in mind, so when the images are hovered they translate to the left to keep them from flying too far out over the page. If you're placing the gadget in a right sidebar or horizontally, you may want to send them in a different direction. Here's where that's controlled:

.rssBody li:hover {
overflow: visible;
z-index: 1000;
-ms-transform: translate(-60px,-10px);
-webkit-transform: translate(-60px,-10px);
-o-transform: translate(-60px,-10px);
-moz-transform: translate(-60px,-10px);
transform: translate(-60px, -10px);

These pixel measurements are on an x and y axis. The first number controls how the image moves along the x axis (left and right), and the second number controls how the image moves along the y axis (up and down). Note: If you want to change these measurments, you need to change each set of numbers to match. The multiple vendor prefixes make sure the CSS will work in all the different browsers your visitors may be using.

Disabling the Hover Function

I think the way the images enlarge when you hover on them is cool, but if it doesn't work for your blog, you can remove that little bit of animation. To disable it, remove this section of CSS:

.rssBody li:hover {
overflow: visible;
z-index: 1000;
-ms-transform: translate(-60px,-10px);
-webkit-transform: translate(-60px,-10px);
-o-transform: translate(-60px,-10px);
-moz-transform: translate(-60px,-10px);
transform: translate(-60px, -10px);

CSS Experiments

That covers the basics of CSS customization options for this gadget. If you want to get a better feel for how CSS works, play around with the settings a little bit to see what you can do with the styling. You can't really hurt the gadget by tinkering with anything in the style section. It might get a little weird looking, but if you retrace your steps you can fix it! Worst case, you can grab a fresh copy of the gadget code and start over again.

So, how'd you do? Let me know in the comments. Leave your blog URL so I can go see!

BIG thanks to Richard Mackney, who wrote the Instagram RSS feed Gist I modified to work with Pinterest and Blogger. His generosity on GitHub made this possible. Thanks, Richard!

CRITICAL UPDATE March 26, 2012:
An Internet Explorer 9 link bug fix is in this post: http://www.codeitpretty.com/2012/03/updates-to-pinterest-gadget-for-blogger.html.

Mini-Update Sept. 17, 2012: I've added the "nopin" attribute to the Pinterest gadget images, so the Pinmarklet won't pick up your Pins. This won't affect any of the other content on your page, but it will keep people from "mis-Pinning" from your blog.

Follow Code it Pretty on Bloglovin

Follow my blog with Bloglovin

Hello World!

hello world

Welcome! I'm so glad you could join me.

If you're reading this post on Code it Pretty's inaugural day, you're probably a friend I made through my tumblr blog Favor Craver, and I want to thank you so much for your support and for visiting me here today. I've wanted to write a blog like this for years and your encouragement played a huge part in my decision to finally go for it.

So, what's Code it Pretty all about?

This blog is my love letter to the wedding-y, craft-y, food-y bloggers of the world who already have the basics of blogging down, but want to know more about how their sites work on the inside. I want to take you by the hand for a grand tour of the inner workings of your blog, and help you understand (and maybe fall in love with!) what you find in there.

If you're able to run a blog, you'll be able to use the tutorials here.

The tutorials and tech talk I post here will assume that you don't need another tutorial on how to upload a header image or change background colors. But, I won't assume that you know much more than the basics of HTML — and by basics, I mean that you know HTML is part of how your blog works. All of my tutorials are designed with the eager beginner in mind. And if you get stuck, let me know in the comments, on Twitter, or by email.

Code it Pretty is a friendly place to ask questions.

Cliché, but true: the only stupid question is the one you don't ask. That's doubly true when it comes to web design & development, where questions can have many answers, each of which can often lead to even more questions. If you're curious about digging into the code behind your blog, this is the place to be, and your questions are welcome.

So what's coming up next?

Oooh, you're gonna like this one! Tomorrow morning I'm going to unveil my Pinterest "gadget" for Blogger. You can get a little sneak peek of it in action right now in my left sidebar, but tomorrow I'm going to show you how to put it on your own Blogspot blog. Step-by-step, in full detail.

See you here tomorrow, bright & early! It'll be fun :)

Font in Hello World graphic: Mr. Bedfort by Sudtipos from the Google Web Fonts collection.