November 27, 2012

Notes from my Blogger HTML Hangout

I had another great Hangout with Blogger today! This time we talked about using Blogger's built-in HTML post editor to improve your posts' accessibility and give you more control over how your posts look. I used a cookie recipe as an example post to show you how to use HTML headings, paragraphs, and unordered & ordered lists. And, I showed a little bit of CSS styling to make the post look great!

Here's the "before" shot of the post:

cookies before

And here's the "after" shot, when the CSS styles are in place:

cookies after

And yes, I realize those are not oatmeal cookies in the photo. I'm better at HTML than recognizing cookies, apparently ;)

If you missed it, you can watch the whole Hangout tutorial on YouTube.

As promised, I put together a little "cheat sheet" of the HTML elements I used in the demonstration: View on Google Docs

More Resources

My Practical HTML for Bloggers post series takes you through the elements I used in the Hangout in depth. And, it takes you further into HTML if you'd like to go in deeper!

During the Hangout, I mentioned Codecademy's great HTML & CSS for beginners course. I tried this out myself last week and I was very impressed with the interactivity of the course and how much beginners can learn from it.

And, my Resources page features my very favorite tech resources for bloggers.

I want to thank the Blogger team for having me again, and everyone who watched for your time and your feedback. Thanks!

November 19, 2012

New Pinterest Board and Profile Widgets for Blogger

Pinterest board and profile widgets for Blogger

Big news! Pinterest has finally (caught up to me and) developed "latest Pins" widgets for blogs ;) Have you seen them? Here's a real one if you haven't — the picture above is just a screenshot:

Nice, right? Let me show you how to add one to your Blogger blog!

Start at the Pinterest Widget Builder

The Widget builder is at http://business.pinterest.com/widget-builder/.

Here, you'll need to decide between a profile widget and a board widget. A profile widget will show up to 30 of your latest pins. A board widget will show up to 30 of your latest pins from an individual board.

The Profile Widget

If you choose the Profile widget, you'll be prompted to fill in your Pinterest user URL. The format for that URL is http://pinterest.com/USERNAME/. Replace "USERNAME" with your Pinterest username, like in the screenshot below.

The Board Widget

If you choose the Board widget, you'll be prompted to fill in your board URL instead. The format for board URLs is http://pinterest.com/USERNAME/BOARD-NAME/. Replace any spaces in your board name with a dash (-). The easiest way to get this URL is to go to your chosen board and copy and paste the URL from your address bar.

The Preview

After you enter your URL, Pinterest will show you a preview of what your board will look like.

Don't worry if it looks super-wide. The widget is cleverly designed and will resize itself to fit the width of wherever you put it. If you want to strictly define the size, though, you can go into the advanced settings.

Beneath the preview you'll see the code for your widget. We'll use that later on.

Advanced Settings

You can fine-tune your widget's appearance by clicking the red "Advanced settings" link below your URL.

That's a screenshot of the board widget's advanced settings, but the advanced options are the same for either board type.

From the advanced options menu you can set a image width, board height, and board width.

Installing the Widget

Installation is a three-step process. Stay on the Pinterest page and open up a new tab in your browser to go back to Blogger and get started.

Step One: Back Up Your Template

Before you install the widget, back up your template. To do this, go to "Template" and click the "Backup/Restore" button at the upper right. Press the "Download full template" button on the resulting screen and save the .xml file to your hard drive.

Step Two: Add Pinterest's Script

After (and only after) you've backed up your template, click the "Edit HTML" button beneath your "Live on Blog" screenshot.

Once inside your template, place your cursor over the code and click once. Press ctrl-f if you're on a PC, or command-f if you're on a Mac to open a search box in the upper right corner of the template code. Type </body> into the search box and press enter.

Your template will jump down to the </body> tag and highlight the tag in yellow.

Immediately above </body> tag, enter this line of code:

<script src='//assets.pinterest.com/js/pinit.js'></script>

Here's a screenshot of that line of code in my blog.

closing body tag in Blogger

After you've added the script, press the orange "Save template" button. Nothing will happen on your blog yet, this is just the code required to make the widget work.

Step Three: Add an HTML/Javscript Gadget

Remember the code you saw below your preview? We're going to use it now.

Switch back to your Pinterest tab for a moment to copy your widget's HTML link. It will look something like this:

example of Pinterest widget code

Once you've copied that, switch back to your Blogger tab. Go to "Layout" and click the "Add a gadget" link wherever you'd like the widget to appear. Select HTML/Javascript from the resulting menu (you have to scroll down a bit to see it).

A new window will open. Make sure "rich text" is showing in the upper right corner of the gadget like in the screenshot below. If it's not, click the "Edit HTML" link to switch to the HTML view.

Paste the code you copied from Pinterest into this gadget. Press save. Wait a few minutes, then check out your blog. You should see the widget appear.

Mine didn't appear for almost 10 minutes at first, so if it doesn't appear immediately, don't panic. Give it an hour, go do something fun, then check it again. If it hasn't appeared after an hour, retrace your steps through the tutorial or get in touch with Pinterest support.

Other Uses for the Widget

You can embed the widget in blog posts or on static pages by entering the HTML link you receive from Pinterest into the HTML editor of your post or static page. Make sure to add the script from step two to your template before inserting the HTML.

Show me your boards!

Looking good, right! Leave me a comment with a link to your blog so I can go see your widget, or Tweet me @MMosley with a link.

If you're a regular Code it Pretty reader, or you've used my Pinterest gadget for Blogger, you may be wondering...

How Are These Widgets Different from the "Code it Pretty" Pinterest Gadget?

First, and most significantly, these new Pinterest board and profile widgets were developed by Pinterest and are officially supported by Pinterest. My gadget is not.

The other major difference is that the images in the official widget don't link directly to specific Pins. If you click on an image in the new Pinterest widgets, it goes to your profile or board page (depending on which type of board you set up). From there your visitors can find the pin they were looking for.

Of course, I'm partial to my own gadget because I made it myself, but this new option is great! I'd love to see your boards, whichever option you choose ;)

November 13, 2012

Set a Custom Text Highlight Color with CSS

set a custom text highlight color with CSS

Have you noticed that when you highlight text on some websites, the text's background color is unique and matches the site's color scheme? That's a little bit of CSS at work! If you can add custom CSS to your blog, you can set your own highlight color, too.

It's such a cute way to keep your color theme going through every aspect of your blog, and it's really easy to do with just the tiniest bit of very simple CSS.

Compatibility Note

This works in Firefox, Chrome, Safari, and the latest version of Internet Explorer. But, it doesn't work on older versions of Internet Explorer, mobile browsers, or on the iPad. Think of this effect as a little "nice-to-have" decorative detail. Your readers who can see it will admire your impeccable style, and your readers who can't won't feel left out.

Demo

Here's a screenshot of what a custom highlight color looks like, for my RSS & mobile readers:

screenshot of CSS ::selection effect

If you're here on the blog with a "desktop" browser, highlight any of the text in this post with your cursor. You should see the text turn white and appear on a medium purple background.

The CSS

You can create the same effect for your blog using this CSS snippet. Add it wherever you put custom CSS in your blogging platform (in Blogger, it's under Template > Customize > Advanced > Add CSS. In Typepad, it's under Design > Custom CSS. In Tumblr, it's under Customize > Advanced > Add CSS. In self-hosted Wordpress it varies by theme):

::-moz-selection { 
background-color: #BA9EB0; 
color: #ffffff;
}
::selection { background-color: #BA9EB0; color: #ffffff; }

That will give you the exact same color combination I have on my blog, with white text on a purple background. You can test it out with these colors just to make sure it works. Then, customize the colors!

To change the colors, simply edit the color codes to suit your theme. The "background" rule sets the background color, and the "color" rule sets the text color.

When you change colors, make sure to change them in both snippets. The "-moz-selection" one is for Firefox, and the "selection" one is for all other compatible browsers.

Also, make sure to choose colors with good contrast to keep your text legible while it's highlighted. You want it to be colorful, not confusing :)

That's all you have to do! Just add the CSS snippet, pop in your own color codes, and you'll have custom colors for your highlighted text.

Getting Your Color Codes

If you don't know the hex number color code for your colors, you can use Colorpicker.com to find them. Or, you can pick your colors using an online "eyedropper" tool, like Colorzilla. Eyedroppers for selecting colors are also in Photoshop and other image editing software.

Show me your highlights!

If you use this on your blog, let me know! Leave me a link in the comments, or Tweet me @MMosley so I can go see.

November 9, 2012

Practical HTML for Bloggers - Further Reading

Practical HTML for Bloggers - further reading

Now that you've finished Practical HTML for Bloggers, you're ready to move on to more comprehensive tutorials in HTML and CSS.

There are thousands of tutorials and books on HTML & CSS for beginners, and it can be mind-boggling just trying to figure out which ones to read. So, I'm going to narrow it down to four rock-solid, comprehensive resources that will help you go further into web development. No fluff, just the good stuff!

Web Resources

A Beginner's Guide to HTML & CSS: this tutorial series by developer Shay Howe covers the basics of HTML and CSS in a clean, easy-to-read format.

Mozilla Developer Network: The MDN's "Learning" section organizes the best HTML, CSS, and JavaScript tutorials from across the web in one place. These well-curated resources are all up-to-date and user-friendly.

Books

Learning Web Design: A Beginner's Guide to HTML, CSS, JavaScript, and Web Graphics: by Jennifer Niederst Robbins. This excellent book is now in its 4th edition. I've read the 2nd, 3rd, and 4th, and seriously, this book just keeps getting better. The author presents HTML/CSS and elementary JavaScript in such a clear, understandable way. And, the information on web graphics is incredibly useful for anyone working on the web. So much of what I know came from this book. I can't recommend it highly enough.

HTML and CSS: Design and Build Websites: by Jon Duckett. This is probably the prettiest technical book in the world right now. Its layout is absolutely beautiful and very appealing to visual learners. And, it's not just pretty, it's well-written and comprehensive; after you finish with this book you'll be able to create great-looking static webpages from scratch.

Thank You!

If you've followed along with this series I want to thank you for your time and your feedback, and wish you the best of luck with your blog! Keep in touch :)

Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.

November 8, 2012

Practical HTML for Bloggers - The Extra Elements

Practical HTML for Bloggers - extra elements

Hey, congratulations! If you've worked your way through this entire series, you've learned how to use all of these HTML elements in your blog posts:

With all that under your belt, you can write the average blog post in straight HTML. There are just a few more elements to learn before you're done. These remaining elements are simple enough that they don't require full tutorials all to themselves, especially now that you're comfortable with writing HTML in your posts!

So, today I'm going to give you quick rundowns of the remaining elements. Then, tomorrow, I'll set you up with some recommended reading in case you've fallen in love with HTML and want to go further into the wonderful world of web development!

So, here we go:

I've glossed over making links in previous installments of this series, but let's take a closer look at how a link is built.

Here's a basic HTML link:

<a href="http://www.example.com">Link text here</a>

The "a" stands for "anchor", and the "href" stands for "hypertext reference". Here's how that link would look in the browser:

Link text here

You can also link to email addresses, like so:

<a href="mailto:info@example.com">info@example.com</a>

Here's how that looks in the browser:

info@example.com

Your links will look different depending on your blog's CSS styling. There's an excellent, comprehensive guide to styling links at Smashing Magazine.

<q> - Quote

Use a <q> tag to mark up a very short quote. By default, most modern browsers wrap that text in quotation marks — last I checked, Internet Explorer does not.

Here's how to use the <q> tags:

<q>Curiouser and curiouser!</q>

And here's how that looks in the browser:

Curiouser and curiouser!

If you're using a modern browser, you should see quotation marks around that quote. If you don't, it's probably time to switch browsers ;)

<blockquote> - Longer Quotes

Use <blockquote> tags to mark up extended quotes. The <blockquote> element does not automatically add quotation marks like the <q> element, so you'll need to add them manually if you'd like to use them with the quote.

If your blockquote is one paragraph, you don't need to use paragraph tags inside the blockquote. If it's 2 or more paragraphs, use paragraph tags, like so:

<blockquote>
<p>"Well, it must be removed," said the King very decidedly, and he called the Queen, who was passing at the moment, "My dear! I wish you would have this cat removed!"</p> <p>The Queen had only one way of settling all difficulties, great or small. "Off with his head!" she said, without even looking round</p>
</blockquote>

Here's how that looks in the browser:

"Well, it must be removed," said the King very decidedly, and he called the Queen, who was passing at the moment, "My dear! I wish you would have this cat removed!"

The Queen had only one way of settling all difficulties, great or small. "Off with his head!" she said, without even looking round.

Blockquotes are indented on my blog. Yours may look different depending on the CSS in your blog's theme. Some blog templates have very creative styling for blockquotes, while others are quite plain. If you want to see just how creative you can get with blockquote CSS, check out this awesome gallery of blockquote styling examples from Codrops.

<cite> - Citation

Use a <cite> tag to cite the source of your quotes, or to reference a published or artistic work. By default, browsers italicize text inside <cite> tags. Here's a very basic example of how to use a cite tag:

We went to look at the <cite>Mona Lisa</cite>.

Here's how that looks in the browser:

We went to look at the Mona Lisa.

I'll show an example of a citation with a link to the source in the example for the next element, <pre>.

<pre> - Pre-formatted

Use the <pre> element for pre-formatted text when exact linebreaks are vital, like in a poem. Here's how I would mark up William Carlos Williams' "This is Just to Say" using a heading, <pre> tags, and a <cite> tag with a link to the source:

<h3>This Is Just To Say</h3>

<pre>
I have eaten
the plums
that were in
the icebox

and which
you were probably
saving
for breakfast

Forgive me
they were delicious
so sweet
and so cold
</pre>

<cite>- <a href="http://www.poets.org/viewmedia.php/prmMID/15535">William Carlos Williams</a></cite>

And this is how that would look in the browser:

This Is Just To Say
I have eaten
the plums
that were in
the icebox

and which
you were probably
saving
for breakfast

Forgive me
they were delicious
so sweet
and so cold
- William Carlos Williams

By default, most browsers set text in a <pre> element in a monospaced font. You can, of course, change that with CSS.

<small> - Small text

Though HTML's <big> tag has been removed from the HTML5 specification, <small> lives on. There's some controversy in the web development world over whether it's semantically correct to use <small> or if we should only use CSS to make text smaller. Personally, I use <small> fairly often to add "fine print" to my posts.

You can create a <small> element like this:

<small>This is small text </small>

Here's how that looks in the browser:

This is small text

Exactly how small that small text is will vary depending on your blog's CSS and/or your reader's browser settings.

You made it!

That was the last lesson in this series. You're ready to write all your blog posts in HTML! If you're ready to learn more, check out Practical HTML for Bloggers - Further Reading.

If you have any feedback or questions about anything you've learned in this series, or if you'd like to show off your new HTML skills, leave me a comment, Tweet me @MMosley, or say hi on Google+.

Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.

November 5, 2012

Pinterest Verification for Blogger, Tumblr, & Wordpress.com

Pinterest verification for Blogger, Tumblr, and Wordpress.com

Updated December 2012: Pinterest released a meta tag verification option! I've updated the Blogger and Tumblr sections of this post to reflect that change. The Wordpress.com instructions have not changed.

Oh Pinterest, you sure do keep bloggers busy!

In late October, Pinterest introduced a new domain verification feature. When you verify your domain with Pinterest, you get a red & white checkmark next to your URL in your Pinterest profile. This is nice because it helps your fans make sure they're following the right account.

But, since the verification instructions ask you to upload an HTML file, you may be wondering how you're supposed to verify your blog if you're on Blogger, Tumblr, or Wordpress.com. Thanks to the ingenuity of some very clever bloggers, there are workarounds, and I've rounded them up for you here!

Important Note: Pinterest says they only verify custom domains right now. If your blog is .blogspot.com, .tumblr.com, or .wordpress.com you may not be able to verify yet — Pinterest says they're working on it. (One of my readers was able to verify a .blogspot.com blog, though!)


Pinterest Verification for Blogger

Update! You can now verify your Blogger blog using a meta tag. It's quicker and easier than uploading the HTML file. There's an excellent tutorial at Scattered Thoughts of a Crafty Mom.

If you want to try it the hard way, I used this tutorial from TopTrix to verify Code it Pretty on Pinterest, and it worked. See!

Pinterest Verification for Tumblr

Update! Tumblr users can now use the meta tag option, too! To add a meta tag to your Tumblr blog, go to Customize > Edit HTML, and enter the unique meta tag Pinterest gives you at the end of the list of <meta> tags in your blog's code.

If you'd like to try the HTML file upload option instead, a helpful gentleman named Francois Mathieu shared the steps to verify a Tumblr blog in his comment on the Pinterest blog. I followed his instructions and they worked for my Tumblr blog.

Pinterest Verification for Wordpress.com

Pinterest recommends this tutorial from Generate More for verifying Wordpress.com blogs. I have not personally tested it, but since the recommendation comes directly from Pinterest I think we can assume it's legit.

Solutions for Other Platforms?

Those are the only three workarounds for hosted services that I know of right now. I know there are other hosted blog and website platforms that will need workarounds, too. If you have written a tutorial for another platform (or know of someone who did), let me know and I'll add it to the list! You can let me know in a comment or Tweet me with a link @MMosley.

November 1, 2012

Practical HTML for Bloggers - Images

practical html for bloggers - images

Now that you've learned how to use HTML headings, HTML paragraphs, HTML lists, and strength & emphasis in your blog posts, you should be quite comfortable with the HTML that makes up most of your blog posts.

But, I bet you've been wondering, what's up with images? Today we're going to talk about them!

Images are Different

In the previous installments of this series, I've encouraged you to write your HTML elements "by hand", without relying on your blog's automation features.

Images are different, though. You should use your blog's built-in uploader to add images to your posts. The image uploader adds your image to your blog's file system and generates the HTML to make the images appear in your posts. All that in one step! This is much more efficient than creating image elements manually with HTML.

So, rather than show you how to make an image element from scratch, I'll show you what's inside the image elements your blog makes for you.

The Anatomy of an Image Element

If you look at the HTML view of one of your posts, you won't see any photos. Instead, you'll see the HTML that adds your image into your post.

Depending on your blogging platform, that HTML might be a single line of markup or a paragraph-length block of text. Let's start with the basics of what makes up an image element so you can recognize one when you see one. Then, I'll explain all the extra stuff you may see in your images' HTML.

Here's what an HTML image element looks like at its absolute bare minimum:

<img src="http://www.example.com/image.jpg" alt="description">

And here's what all those pieces mean:

  1. IMG stands for "image". This lets the browser know that it's an image element.
  2. SRC stands for "source". The source is the URL for where your image is stored in your blog's file system. When you upload your image through your blog's post editor, the source is automatically filled in for you with your image's URL.
  3. ALT stands for "alternate text". An image's alt text describes the image for users with visual impairments. For more detail on alt text, see All About Alt Text.

If you've been following along with this HTML series, you may have noticed that there's no closing </img> tag like in other HTML elements. Good catch! The <img> element is one of the few HTML elements that don't have a closing tag.

Now, like I said, that's just the bare minimum HTML for an image. Let's look at a more detailed <img> elements.

Clickable Images

In this next example, the image element is wrapped with an <a> anchor element with an href attribute, better known as a link. The link wrapped around the image element makes the image "clickable". This clickable image would take the reader to a larger version of the photo when the photo is clicked.

<a href="http://www.example.com/larger-image.jpg"><img src="http://www.example.com/image.jpg" alt="description"></a>

Notice the </a> tag after the end of the image element? That closes the link.

Changing the Link

Usually, clickable images in blog posts are automatically linked to a larger version of the photo. But, if you want to link to something else, you can change the anchor link. For example, if you want to link an image to another blog post, you can change the URL after href, like this:

<a href="http://www.example.com/a-different-blog-post.html"><img src="http://www.example.com/image.jpg" alt="description"></a>

The image still looks the same, but now when it's clicked your readers will go to another blog post instead. You can use this same technique to link to anything else on the web, including other websites, of course!

Opening in a New Window

I'm not a big fan of opening new windows for users without warning, but that's just my personal preference. If you'd like an image to open in a new window when it's clicked, you can add target="_blank" to the link URL, like this:

<a href="http://www.example.com/a-different-blog-post.html" target="_blank"><img src="http://www.example.com/image.jpg" alt="description"></a>

That will open the link in a new window. Use with care, lots of people don't like new window surprises!

Common Attributes for Images

Many blogging platforms insert useful attributes into an <img> element. This information helps your images load faster and provides important information for your readers and search engines. Here are the attributes you may see when you view the HTML of your blog images.

Width and Height

Specifying the width and height of your image helps speed up your page load time because it lets the browser know exactly how much space an image needs, even before it loads.

Most blogging platforms automatically include your width and height information for you. They'll appear in the HTML for your image like this:

<img src="http://www.example.com/image.jpg" alt="description" height="500" width="500">

Technically, you can resize images by changing their width and height attributes in HTML, but it's not the ideal way to handle images sizes. There's a good article on why not to resize with HTML at About.com.

Alt

You may have noticed that I'm including an alt attribute with every image element example, including the "bare minimum" example. The alt attribute is that important.

Accessibility advocates and the W3C, the rulemakers of HTML, encourage us to include alt attributes for every image. For purely decorative images that would have no importance to readers with visual impairments, you can leave the alt attribute blank, like this: alt="". That tells screen readers to ignore the image.

Title

If you add a title attribute to your image element, your users will see the title as a "tooltip" on their cursor when they hover their cursor over your image. Give it a try, hover over this image:

Jack Skellington

A title attribute is intended to provide "advisory information" about an element. For images, good examples of advisory information are the name of the artist or photographer that created the image, copyright information, or the official title of an artistic work.

You can add a title attribute to an image like this:

<img src="http://www.example.com/image.jpg" alt="description" title="advisory information">

Titles are not required and do not replace alt text. When in doubt, just fill in the alt text and leave the title off.

Class

Adding a class attribute to an image is useful for CSS styling purposes. There are about a million different things you can do with CSS, but I'll show you one quick example just for fun.

I'm going to give this image the class of "rotate", then give it some instructions with CSS. Give it a try, hover over this photo with your cursor.

Jack Skellington

Did you see it move? That's the CSS rotate property at work! The CSS rules for that need a tutorial all of their own, and you can find a good one at http://davidwalsh.name/css-transform-rotate

Here's how you add a class to an image attribute:

<a href="http://www.example.com/larger-image.html"><img src="http://www.example.com/image.jpg" alt="description" class="rotate"></a>

Putting it All Together

Here's an example of the HTML markup for a clickable image with all of the attributes mentioned in this post. This may have looked like a big bowl of alphabet soup to you before, but I bet it makes a lot more sense now!

<a href="http://www.example.com/larger-image.html"><img src="http://www.example.com/image.jpg" alt="description" title="advisory information" width="500" height="500" class="rotate"></a>

Now that you're familiar with the working parts of an image element, you can confidently customize and alter them as needed to suit your posts.

What's Next?

You're almost done! Learn about a few more handy elements in Practical HTML for Bloggers - The Extra Elements

Title cards for this series designed by the lovely & talented Jenna from Little Bit Heart.

Photo by me, CC-BY-SA