Link Pinterest Pins to the Right Post on Blogger

Have you ever clicked on a Pin that took you to the home page of a blog instead of the post you wanted to see? Today I'm sharing a bit of code to help prevent that problem on Blogger.

Pinterest created a special image attribute, data-pin-url, that lets you add your post's permalink to all of the images in the post. Pinterest will link images with this attribute to the right post no matter what page your reader is on when they Pin it.

It's a time-consuming chore to add this attribute to all of your photos one-by-one, so I wrote some JavaScript to do it for you automatically!

What This Code Does

This code adds the data-pin-url attribute to every image in posts on your home page and the "index" pages (archive, label, search, "older posts", and "newer posts" pages). The attribute links each image to its original post.

After you install this code, new Pins created from posts on your home page or index pages will link to the right blog post, not the home/index page. This code can't change old Pins. It can only prevent future mixups!

Template Compatibility

This code works on all of the standard Blogger templates except Dynamic Views, which does not accept custom code.

It also works on custom templates that have the same internal structure as a standard Blogger template.

Installation

Back Up Your Template

Backup instructions here. Do not skip the backup.

Open the Template Search Box

After you save your backup file, click the "Edit HTML" button below your "Live On Blog" screenshot.

Next, open the template search box to search your code. Your browser's search function can't search the code, so be sure to follow these three steps exactly.

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor. It looks like this:

Enter </body> in the search box, then press enter. The code will "jump" down to the </body> tag in your template and highlight it in yellow.

Copy the Code

Select and copy the entire code from the code box below. Only copy the code, you don't need the line numbers.

If the embedded code doesn't load for you, or you're having trouble copying it, you can copy it from here.

Paste the Code

Paste the code into your template, directly above the highlighted </body> tag. Next, press the "preview template" button. If you get an error message, press the "revert template" button and start over. Otherwise, press the "Save template" button.

Test the Code

There are two different ways to test your installation.

Test Option One - Create a Test Pin

Go to the home page of your blog and create a new Pin from any of your post images. After you create the Pin, go to Pinterest and click on it. It should take you directly to the post page, not your home page. You can also try this test from any index page to double-check!

Test Option Two - Check Your Blog's Source Code

If you'd rather not create a new Pin, you can check your blog's source code to confirm that your new data attribute is in place.

Visit your blog's home page in Chrome or Firefox. Hover your cursor over any image in your blog post and right click it. Select "Inspect Element" from the context menu. You'll see something like this screenshot (click to enlarge):

Look for the data-pin-url attribute inside the img element. If it's there and the URL is correct, you're all set!

Note: this code adds the data-pin-url attribute to images on the home page and index pages only. The attribute isn't necessary on post permalink pages because Pins created from permalink pages automatically link to the correct page.

Alternate Version with data-pin-description

Pinterest has another attribute that's supposed to control the description of your image, data-pin-description. But, only the Pin It hover buttons pick up the text from this attribute reliably — the Pinmarklet and the Pinterest browser buttons don't always recognize it on Blogger.

If you don't mind a little inconsistency with your Pinterest descriptions, you can set both the data-pin-url and data-pin-description attributes for your images with this alternate version of the code. The installation process is the same as the url-only version. The alternate code adds both the data-pin-url and data-pin-description attributes to your post images. The code uses the post's title for the data-pin-description attribute.

More Pinterest Attributes

Pinterest has two more image attributes: data-pin-media, which you can use to specify a Pinterest-specific image for your posts, and data-pin-id, which counts new pins from your page as a "repin" on your original pin.

This post on Pinterest's blog has the full details of all four attributes. After you read that, this post from Blog Chicka Blog will show you how to add them to post images by hand. The tutorial shows how to do it on WordPress, but the same basic technique works on Blogger, too. Remember that you don't need to add data-pin-url if you're using this code (and data-pin-description if you're using the variation) — the code will do it for you!

Happy Pinning!

A Pinterest Gadget for Blogger - Updated 2015

This tutorial is obsolete. The code does not work anymore. This gadget was built with the Google Feeds API, which shut down in late 2015.

If you have the code installed on your blog, I'm sorry that it stopped working. Unfortunately, there's no way to make it work again. You can remove the code from your blog by deleting the HTML/JavaScript gadget with code that begins with this line:

<!-- BEGIN CODE IT PRETTY PINTEREST GALLERY -->

A New Related Posts Gallery for Blogger

Today I'm going to show you how to add a customizable related posts gallery to the bottom of your Blogger post pages. This is an independent alternative to nRelate and LinkWithin — you don't have to sign up for a service, share your stats, or show ads when you use this code.

Demo:

This is the related posts gallery I use on this blog. Scroll down to the bottom of this post for a live demo of this code (if you're on a home/index page, click into this post to see the gallery).

Features

What You Can Do With This Gallery:

• Set the thumbnail image size.
• Choose square or round thumbnails.
• Give the gallery a custom title, or leave the title off.
• Set a minimum and maximum amount of posts to show in the gallery.
• Track gallery clicks with Google Analytics campaign tagging. This is a good way to confirm if the related posts gallery is actually engaging your readers.
• Customize the CSS. The default CSS is very basic and won't interfere with your template's design. If you're comfortable with CSS, you can customize it to coordinate with your theme.

What This Related Posts Gallery Doesn't Do:

• Doesn't show on the home page and won't interfere with "read more" links.
• Doesn't invent relationships between posts that aren't really related.
• Doesn't re-route readers through another site before taking them to a related post.
• Doesn't require you to sign up for an account.
• Doesn't include branding or backlinks.
• Doesn't serve ads to your readers.

Technical Requirements

Visible post labels are required. The code relies on your post labels to find relationships between posts. The labels must be displayed on the posts — hidden labels won't work. This works best on established blogs with well-organized labels.

This gallery uses Blogger's built-in post thumbnails, so it works best on blogs that use Blogger's image hosting. If you host your images on Flickr, Photobucket, or another non-Blogger host, you can set a default image for all posts in the code options.

This works on all of the standard desktop Blogger templates except Dynamic Views, which does not accept customization.

This code does not work on private blogs.

Installation

Back Up Your Template

Backup instructions here. Do not skip the backup.

Open the Template Search

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

We're going to use the template search feature to search your code. Your browser's search function can't search the code, so be sure to follow these directions exactly.

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor.

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Copy the Code

Select and copy the entire code from the code box below. Just copy the code, not the line numbers.

If the embedded code doesn't load for you, you can copy it from here.

Paste the Code

Paste the code into your template, directly above the </body> tag. Next, press the "preview template" button. The gallery will not show on the preview, we're just checking for errors here. If you get an error message, press the "revert template" button and start over. Otherwise, press the "Save template" button and move on to the next step.

Check Your Gallery

Go to your live blog by clicking the "View Blog" button at the top of the screen. Click on any post. Scroll to the bottom of the post and look for your related posts gallery. If it looks good, you're done! Enjoy your gallery.

If you need to change anything, move on to the next section: "Options".

Troubleshooting

If you don't see the gallery, make sure you're on a post with at least one label. Remember that visible labels are required. If your labels are not displayed on your post, this code can't work.

If the post has at least one label on display, but there are not at least 3 other posts under that label, your gallery won't appear with the default settings. Check another post with more relatives, or move on to "Options" to see how to change the gallery's minimum.

The gallery matches posts by label. If your blog is brand new, or the post labels are inconsistent, you may not see the gallery. This is because I designed the gallery to only display posts that are related by label — if your post has no label relatives, it won't get a related posts gallery. If you add more posts and/or improve the post label strategy for your blog you'll see the gallery on more posts.

If you have a custom template and can't see the gallery, you may need to change the post label selector and/or the gallery's insertion point. They're the last two settings in the "Options" area.

Options

You can edit the gallery options in the "Code Options" section of the code. The code options section is between two comment lines that read //CODE OPTIONS and //END CODE OPTIONS (you can use the template search feature to find them). The options section looks like this:

Each option setting starts with the word "var" and ends with a semicolon (;). Be careful not to delete the semicolon if you update an option. After you update an option, press the "preview template" button to check for errors before saving.

Set the Maximum Posts Searched

The maxSearched setting allows you to control how far back into your archives the related posts gadget will search. The maximum is 500 posts. If you want the gallery to focus on newer posts you can decrease the search number.

Set a Minimum and Maximum Post Count for the Gallery

Set the minimum to lowest amount of posts you want to show in the related posts area. Set the maximum to the limit of posts you want to show in the related posts area.

Set the Thumbnail Image Size

The imageSize setting controls the thumbnail width and height. The image size you set here should not exceed the actual size of your post images. Just enter the size as a number, leave off the px.

Enable Round Thumbnails

Set the roundImages setting to true for round images in Chrome, Firefox, Safari, and the latest version of Internet Explorer.

Remove the Gallery Title

Set relatedTitle to false to remove the gallery title.

Remove the Label from the Title

The label that relates the posts in your gallery is added at the end of the gallery title by default. Set labelInTitle to false to remove it.

Change the Gallery Title

Change the text inside the quotation marks ("") for the relatedTitleText setting. Make sure to leave the quotation marks in place.

Add a Default Image

You can set a default image to show if some of your posts doesn't have images, an image fails to load, or your images are hosted on Flickr, Photobucket, or another non-Blogger host. Enter the direct link to your default image inside the quotation marks for the defaultImage setting. For best results, size the image to the width and height of your imageSize setting.

Enable Google Analytics Campaign Tracking

Set campaignTracking to true to enable Google Analytics campaign tracking. Then, fill in your source, medium, and name for your campaign between the quotation marks for the campaignSource, campaignMedium, and campaignName settings.

Change the Post Label Selector

Some custom templates give the post labels a different class than the one used by the default Blogger templates. You can change the selector with the postLabels setting. Find the class selector for your post labels and insert it after the dot inside the single quotes. If you need help finding the selector, check out my tutorial on finding CSS selectors, or check with the person who designed your template.

Change the Gallery's Insertion Point

If you're using a custom template that doesn't have the same features as a standard Blogger template, or you just want to put the gallery in another part of your post, you can change where the gallery is inserted with the insertBefore setting. Find the CSS selector for the div you'd like to place the gallery above and enter it between the single quotes for the insertBefore setting. Remember to include the dot (.) for class or hash/pound mark (#) for ID.

Back to Top

How to Use the Official Pin It Hover Buttons on Blogger

Updated 2014

Updated November 2014 to include screenshots and instructions for the newest version of the Pinterest code.

Pinterest's official hovering "Pin It" buttons have improved in 2014 — there are more button options, and they load faster than ever. And, in the year since I wrote my original tutorial, I've come up with a few new code snippets to help you control where the buttons appear on Blogger blogs. Since there's so much new stuff to tell you, it's time for a brand new tutorial. Let's get started!

What You'll Learn

This tutorial will show you how to add the official hovering Pin It buttons to your Blogger blog. The buttons will show up in the upper left corner of your post images when your readers hover over the images.

Compatibility

These buttons work on all Blogger templates except Dynamic Views, which doesn't accept customization. The buttons appear on images with a minimum width of 200px and a minimum height of 100px. Smaller images are skipped.

Get the Code

To get your own button code, go to the Pinterest Widget Builder (opens in a new window).

Make sure that the "Button Type" option is set to "Image Hover", then choose your favorite button style.

You get a choice of small or large rectangular buttons in gray, white, or red, or small or large round buttons in red. You can preview each button style to choose the right one for your blog.

Once you've chosen your button style, copy the code in the grey box below the preview image to your clipboard. The code will look similar to this:

Back Up Your Template

From your Blogger dashboard, go to "Template" and click the "Backup/Restore" button in the top right corner. Save the .xml file somewhere safe.

Open the Template Search

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

We're going to use the template search feature to search your code. Your browser's search function can't search the code, so be sure to follow these directions exactly.

1. Place your cursor on the template code.
2. Click once.
3. Press CTRL and F at the same time (PC) or Command and F (Mac).

The search box will open in the upper right corner of the template editor.

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Add the Code

Immediately above the </body> tag, enter the code you got from Pinterest.

Before you save your template, remove the words "async defer" from the code. This is important, your template will not save unless you remove the words "async defer".

Press the orange "Save Template" button up top to save your template. Then, go look at your blog. You should see the Pin It buttons you chose in the upper left corner of your images when you hover your cursor over each image. Nice, right?

Now, let's check out some more advanced things you can do to customize how the buttons work on your blog.

Advanced Options

Link "Homepage" Pins to the Right Post

If you do a lot of Pinterest browsing, you've probably had this happen to you: you click on a Pin for a recipe you want to try or an article you want to read, and end up on the home page of the blog, not the post you wanted to see! That happens when a reader Pins from the home page of a blog that doesn't have Pinterest's data-pin-url attribute on the images. You can add that to your blog with the code from this tutorial: Link Pinterest Pins to the Right Post on Blogger.

Remove the Button From Specific Post Images

If you want to take the Pin It button off of an image or two in a post or on a static page, you can use the "nopin" attribute. To "nopin" an image, switch over to the HTML view of your post or page, and find the img src HTML markup for the image you'd like to "nopin". It will look something like this:

Enter nopin="nopin" right before the closing slash and angle bracket of your image element, like this:

When you save your post, the Pin It button will disappear from that image.

Remove the Buttons from a Group of Post Images

Sometimes you'll want to remove the Pin It button from a large group of images in a post or static page. After an initial setup, this method will let you "nopin" larger groups of images quickly.

First, back up your template! Then, open your template code by going to Template > Edit HTML. Find the </body> tag again, and enter the following bit of JavaScript directly above the </body> tag.

<script type="text/javascript">
var nopinimg = document.querySelectorAll('.nopin img');
 for(var i = 0; i &lt; nopinimg.length; i++) {
   nopinimg[i].setAttribute('nopin', 'nopin');
 }
</script>

Save your template. Nothing will change yet; this code is the foundation for the next bit of code you'll use.

Now, switch to the HTML editor of the post with the group of images, and find the code for the first photo in the group. It will look something like this:

Add this line immediately above that first image:

<div class="nopin">

Then, find the last image in the group. Its code will look very similar to the code for the first image. Immediately below the last image, enter this closing div tag:

</div>

Save your post, and the Pin It buttons will disappear from all of the images you wrapped in the div. The next time you want to "nopin" a bunch of images, just wrap them in the div; there's no need to re-install the JavaScript part of this code.

There's a shortcut if you want to remove the button from all of the images in a single post — just add the first div tag above the first line of your post, and the closing div tag below the last line of your post. All of the images inside that div will lose their buttons.

Remove the Pin It Button from the Header

If the Pin It button appears on your header and you'd like to remove it, you can do it with a little snippet of code!

First, back up your template again. Then, find the </body> tag again, and enter this code snippet directly above the tag, after your Pin It button code:

<script type="text/javascript">
document.getElementById("Header1_headerimg").setAttribute("nopin","nopin");
</script>

Save your template, and the Pin It button will disappear form your header.

Remove the Pin It Button from Sidebar Images

The Pin It button may appear on your sidebar images, too. If you'd prefer that it didn't, you can add the "nopin" attribute! There are two ways to do that, and the how-to depends on how you added the images to your blog.

HTML/JavaScript Gadget Images

For images in an HTML/JavaScript gadget, open your gadget and find the <img> element(s) in your gadget. Add nopin="nopin" right before the closing slash and angle bracket of your image element(s), like this:

Image Gadget Images

If you added your images through the Image gadget, you can add the nopin attribute through the template editor. It's a little trickier than the other methods in this post — if you're not familiar with the template editor, I recommend reading How to Use the New Blogger Template Editor first to get comfortable with how it works.

Before you edit your template, be sure to make a backup.

To find your image in your template, you'll need the widget ID for your image. To get it, go to your blog and hover your cursor over the wrench icon at the bottom of your image gadget. When you do that, you'll see a URL appear at the bottom of your browser window. Look for "widgetID=" in the URL. The widget ID will say "widgetID=ImageX", where X is the image ID number.

Once you have your template backed up and know your widget ID number, go to Template > Edit HTML and select your image by its widget ID from the "Jump to Widget" menu.

The template will jump to your image widget. Expand your widget's code by clicking the small black arrows at the left of the template editor, until the code is completely expanded.

Find this segment of the code:

<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width'/>
      </b:if>

Add nopin='nopin' immediately after 'data:width' in both places it appears in the code. When you're finished, the code should look like this:

<b:if cond='data:link != ""'>
        <a expr:href='data:link'>
          <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
        </a>
      <b:else/>
        <img expr:alt='data:title' expr:height='data:height' expr:id='data:widget.instanceId + "_img"' expr:src='data:sourceUrl' expr:width='data:width' nopin='nopin'/>
      </b:if>

Preview your template to make sure everything still looks the same before saving. If you get an error message or anything looks weird, press the "Revert Changes" button and start over. If everything looks good, press "Save" to apply your changes. When you go back to your published page, the sidebar pin it button will be gone!

Make Your Own Tweetable Links for Blogger

"Tweet This" links make it easy for your readers to share your posts on Twitter. And, with a little bit of code, it's pretty easy to make any text on your blog tweetable! Today I'm going to give you the tools to make click-to-Tweet links of your own.

What the Code Does

After a one-time setup, this code lets you make any sentence in your post tweetable in a few seconds. A link to your blog post is automatically added to the end of the Tweet. Here's a demo link, styled to match my blog with optional CSS I've included at the end of the tutorial:

I'm learning how to make click to Tweet links on #Blogger from @MMosley

The colors and Twitter icon are part of the CSS styling, and you can change them to suit your blog's style, or create a completely different design.

Compatibility

This works with all of the standard Blogger templates except Dynamic Views, which does not accept customization. This will also work with custom templates that have the same internal structure as a standard template.

For best results, make sure timestamp links are enabled for your blog (here's how to check). If you have timestamp links enabled, the tweet will include a link to your blog post at the end. If you don't, the tweet will link to the page your reader was on when they clicked the link. Often that's ok, but if your reader tweets from from your home page or an index page, visitors who click the link in the tweet may not end up on the right post.

All set? Let's get started!

Add the Twitter Code

If you already have the official Twitter timeline widget installed on your blog you can skip this step.

Twitter has a code snippet that makes your tweet links open a new, small Twitter window, like this:

To install it: first, back up your template (instructions here). Do not skip the backup.

Next, open your template by clicking the "Edit HTML" button below your "Live On Blog" screenshot.

Then, open your template's search box by placing your cursor over the code, clicking once, and pressing CTRL and F at the same time (PC) or Command and F (Mac).

Enter </body> in the search box, then press enter. The code will "jump" to the </body> tag in your template and highlight it in yellow.

Paste the following line of code immediately above the </body> tag:

<script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

Then, press the orange "Save Template" button. Nothing will change on your blog yet — that comes later!

Add the HTML/JavaScript Gadget

Now, let's add the jQuery that makes your links tweetable!

Go to Layout and click an "Add a Gadget" space.

Select HTML/JavaScript from the popup menu and insert the following code into the gadget:

Save the gadget. Nothing will change on your blog yet, but it will after the next step.

Make Tweetable Links

Now that you have the code installed, you can make any text on your blog a tweetable link! Make sure to pick sentences that are 117 characters or less to leave room for the link to your post at the end of the tweet.

To make text tweetable, switch to the HTML view of your post and find the text you want to twitterize.

Wrap the text in <p></p> paragraph tags, like this:

<p>This is my tweetable text. Click to tweet it!</p>

Then, add the class of "tweetable" to the opening paragraph tag, like this:

<p class="tweetable">This is my tweetable text. Click to tweet it!</p>

You can use blockquote or span elements if you prefer, but I'm using the paragraph element here because it's a good fit for most blogs.

Save your post and check it out on your blog. Your text is now tweetable! Click it and see how it works.

Style Your Tweetable Links

At this point your link will just look like a regular link — but you want it to stand out, right? That's where CSS comes in.

I put an editable demo of a styled "tweetable" link on Codepen. You can play with it to customize the colors and styling.

Note: the "tweetable" link inside the demo won't open a new window when you click it because it's hosted on Codepen. Don't worry, that's just a Codepen thing — the code from this tutorial will open a new window on Blogger.

<div class="post-outer">
  <a href="http://www.codeitpretty.com" class="timestamp-link"></a>
<p class="tweetable">I'm learning how to make tweetable links for #Blogger from @codeitpretty!</p>
</div>

See the Pen 6b71bca216f2c7eb6ed8c85e246cd482 by mariemosley (@mariemosley) on CodePen

When you have it styled the way you like it, copy everything in the CSS tab and paste it into your blog's CSS field (Template > Customize > Advanced > Add CSS). Press the orange "Apply to Blog" button to save your changes. Now all of your tweetable links will have style!

How to Show and Hide Blogger Sidebar Gadgets

Blogger has a little-known power feature for template designers: conditional tags. With conditional tags, you can show or hide gadgets on specific pages of your blog — an option you can use in lots of creative ways.

Today I'm going to show you how to use conditional tags to show or hide sidebar gadgets on any page of your blog.

Compatibility

Conditional tags work with all of the standard Blogger templates except Dynamic Views, which doesn't accept customization. Some third-party templates may not accept conditional tags (but most do!).

The technique in this tutorial works on all gadget types except the "Google+ Badge" gadget and the old "Followers" (Google Friend Connect) gadget. You can hide those two gadgets using the instructions in this post's Appendix.

Difficulty

This tutorial is for beginners, but it's easiest if you have a little bit of experience with editing your Blogger template.

If you'd like to brush up on Blogger template basics first, check out How to Use the New Blogger Template Editor.

All set? Let's get started!

First, Back Up Your Template

Before you begin, back up your template (instructions here). Do not skip the backup.

Find Your Gadget in the Template

Open your template by clicking the "Edit HTML" button beneath your "Live on Blog" screenshot.

Now, use the "Jump to Widget" dropdown button to jump down to your gadget. In this example image, I'm choosing the widget with the ID "Image1".

If you're not sure what your gadget's ID is, there's a quick way to find it.

While logged into Blogger, go to the main page of your blog and hover your cursor over the wrench icon at the bottom of your widget. When you do that, you'll see a URL appear at the bottom of your browser window in Firefox, Chrome, or Internet Explorer (Safari users will need to turn on the status bar under View > Show Status Bar).

Look for "Widget ID" in the URL.

The text between the equals sign in "WidgetID=" and the ampersand (&) is the widget's ID. Select that ID from the "Jump to Widget" menu to go straight to that widget's section in your blog's HTML.

Expand Your Widget

Now that you've found your widget, it's time to expand its code so you can insert the conditional tag.

Click the black arrows at the left of the widget's code to expand the code. Most widgets have at least one bit of code to unfold, some have 2 or 3. You can stop unfolding when you get to the closing </b:widget> tag of your widget and see that there are no more fold arrows above it.

Now that your code is unfolded, let me show you where to add the conditional tags.

Inserting Conditional Tags

No matter what conditional tag you choose, it goes in the same part of your gadget's code, so I'm going to show you placement first.

The opening conditional tag goes immediately below this line:

<b:includable id='main'>

The closing conditional tag, </b:if>, goes immediately above this line:

</b:includable>

Both lines are highlighted in this image:

Now that you know where to put your conditional, it's time to choose your tag!

Show Gadget on the Homepage Only

If you want to restrict a gadget to your homepage only, use this conditional.

Insert the following line below <b:includable id='main'>:

<b:if cond='data:blog.url == data:blog.homepageUrl'>

Then, close the conditional by inserting this line above </b:includable>:

</b:if>

Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.

Show Gadget on the Homepage and "Index" Pages

The "Index" pages of your blog are the pages readers see when they click the "Older Posts" and "Newer Posts" links at the bottom of the page.

Insert the following line below <b:includable id='main'>:

<b:if cond='data:blog.pageType == "index"'>

Then, close the conditional by inserting this line above </b:includable>:

</b:if>

Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.

Show Gadget on Post Pages Only

This will show the gadget only when your reader is on an individual post page (aka the permalink page). The gadget will be hidden from the home page, index pages, and static pages.

Insert the following line below <b:includable id='main'>:

<b:if cond='data:blog.pageType == "item"'>

Then, close the conditional by inserting this line above </b:includable>:

</b:if>

Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.

Show Gadget on Static Pages Only

Static pages are the pages you make in the "Pages" section of Blogger — by default they show up in your top navigation, unless you've specified otherwise.

Insert the following line below <b:includable id='main'>:

<b:if cond='data:blog.pageType == "static_page"'>

Then, close the conditional by inserting this line above </b:includable>:

</b:if>

Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.

Show Gadget on One Specific Page Only

This one's a bit of an oddball, but it could be handy! You can use a conditional to make a sidebar gadget appear one one specific page of your blog only, and nowhere else.

Note: I only recommend this conditional for blogs with custom domains. Blogs with .blogspot.com domains may have issues with this conditional on localized versions of the domain.

Insert the following line below <b:includable id='main'>:

<b:if cond='data:blog.url == "PAGE URL HERE"'>

Replace "Page URL here" with the address of the page that should show the gadget. So for example, if I only wanted to show the gadget on my resources page, I'd write it like this:

<b:if cond='data:blog.url == "www.codeitpretty.com/p/resources.html"'>

Then, close the conditional by inserting this line below above </b:includable>:

</b:if>

Press the "Preview template" button. If you see an error message, double check your code and try again. Otherwise, press the "Save template" button to save your changes.

Reversing Conditionals

So, what if you want to set the opposite version of a conditional? Say, for example, you want a gadget to show up everywhere except the home page?

In that case, you'd replace the == in the conditional with != like this:

<b:if cond='data:blog.url != data:blog.homepageUrl'>
(Gadget code here)
</b:if>

In this conditional, != stands for "is not", so you can think of the conditional as saying "if the URL is not the homepage URL, show the gadget".

Why Is My Blogger Blog So Slow?

We Blogger users are lucky because we don't have to worry about our hosting or our bandwidth. When was the last time your blog went down because you got too many visits at once? Never, right?

But, in my years working with Blogger users, I've seen that the bandwidth liberty can lead to carelessness when it comes to page weight. Since we don't have to concern ourselves with hosting limits like our fellow bloggers on other platforms, we often forget that we still need to keep our pages "light" so they load quickly. Overstuffed pages can lead to seriously sloooow load times.

In this post I'm going to cover the two most common reasons why Blogger blogs slow down, break them down finely, and help you figure out solutions.

It's Your Images

Images that aren't properly optimized for the web make your blog sluggish. One image with a large file size is rarely a problem, but there is a cumulative effect as you add more images.

Let's optimize all those images, starting from the top!

The Header

A heavy header can slow your page load time at the worst point — the very beginning. If your page isn't loading well right at the start, your readers are much more likely to bounce. Keep your header light!

The dimensions of the header aren't as important as the actual file size. Keep in mind, an image that looks small isn't necessarily small in file size. For example, check out these two images:

Logo: 350x208px, 47kb

Rose: 150x200px, 90kb

Though the logo image is wider and taller, the rose image's file size is almost 2x as large.

Try to keep your header's file size under 50kb. If the header you love needs to lose a little weight, check out the links to image optimization tutorials coming up later in the post.

The Background

Ask yourself: do you even need a background image? Solid colors make beautiful backgrounds — in fact, solid colors are in right now as part of the flat design movement.

If a solid color doesn't do it for you, it's fine to use a background image with a small file size. I know that Blogger will let you upload a background image of up to 300kb, but realistically your background image size should be nowhere near that — try staying under 20kb to really make the browser happy!

Choose seamless repeatable background patterns over big images. For some examples (and free-to-use files) check out Subtlepatterns.com. Most of the images on Subtle Patterns are just a few kb in size. Some are so tiny they're measured in bytes!

And please, whatever you do, do not use one of those gigantic, full-page background images designed to create a "column" effect on your blog. The file sizes on those mega-backgrounds are huge — we're talking half-a-megabyte huge! That's way too much for the background.

Heavy Post Images

The photos in your post are awesome, no doubt. But, if they're not optimized for the web, they can have a negative impact on your page load time.

Photo optimization is a big topic I could talk about all day. Instead of actually doing that, let me link you to my three favorite tutorials:

"Prepping Images for the Web Using Photoshop and/or Preview" from developer Zoe Rooney's blog.

"10 Tips on Best Image Sizes for Your Blog" from One Dog Woof.

"Optimizing Images" from the Google Developers knowledgebase.

It's Your Gadgets & Ads

Many gadgets and ads contain content that is hosted on another server outside your blog. That content's "home" on the web can impact the load time of your blog.

One extreme example to illustrate the point is the big Facebook glitch that took giant chunks of the internet down with it in early 2013. Something like that is totally rare, and it's not a reason to avoid gadgets. But, it does demonstrate that a gadget with offsite content can impact your page's load time when something goes wrong at its source.

Even if your gadget isn't bringing in offsite content, it may still impact your page load time if it's poorly coded, or if it conflicts with other elements on your blog. This is common with custom code added through an HTML/JavaScript gadget.

The same goes for ads. I swear, this is not just me begin a jerk; Forbes magazine will tell you the same thing. Ads, especially too many ads, can slow your blog down.

Choose ads and ad networks judiciously. Don't cram your entire sidebar with ads. Even if your ads are flawlessly coded and served from the world's fastest server, adding too many will impact your page load.

And, though this doesn't have much to do with page speed, it's worth mentioning that search engines don't like excessive ads. Neither do your readers (though they may be too polite to tell you so).

Finding the Slow Gadgets & Ads

If you don't already know which of your gadgets or ads are slowing you down, there's a free online tool you can use to pinpoint them.

Use the Pingdom Website Speed Test to analyze your blog, then sort your results by load time.

If you find your gadgets or ads near the top of the results, cut the ones you can live without.

If even after you've pared down a bit you find that your ads are still a problem, get in touch with the ad's host (often your ad network, sometimes the advertiser themselves) and let them know that you're experiencing performance issues. They may be able to help!

Rose image CC-BY-SA T. Kiya via Flickr

Recipe Rich Pins for Blogger

Starting in the spring of 2015, some of my readers have not been able to successfully validate their blogs for Recipe pins using the markup from this tutorial. It seems that Pinterest may have changed some of the requirements, but hasn't updated the documentation for Recipe Rich Pins yet. Since the documentation hasn't changed I don't know what is different about the Recipe validation process. I'll keep an eye on the documentation to see if updates become available.

It can't hurt your blog to add this markup — it's recognized by other search engines, too — but it may not get you validated for Recipe Rich Pins.

I'm a total foodie, so I'm excited to share a little something special for food bloggers today! In this post I'm going to show you how to enable recipe Rich Pins for Pinterest on your Blogger blog.

If you haven't seen them yet, Rich Pins are Pins with a bit of extra information on them — for recipes, you can add ingredients, instructions, cooking times, and more.

We'll use hRecipe markup to enable Rich Pins in recipe posts. You can use this markup to turn any recipe on your blog into a Rich Pin-able recipe, even if you're not exclusively a food blogger!

I'm going to show you how to write the markup "by hand" first, then share a few free online tools to help you write your markup faster.

Ready to get started? Let's do it!

Markup For Your Template

The majority of the Rich Pins markup goes into individual posts, but I'm going to save you a little work by giving you one line of code to add directly to your template.

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

Next, open up your template by clicking the "Edit HTML" button below your "Live on Blog" screenshot. Find the <head> tag near the top of your template code (it's usually in the first 10 lines).

Immediately below the <head> tag, enter this meta tag:

<meta property="og:site_name" content="YOUR SITE NAME HERE" />

Replace "YOUR SITE NAME HERE" with the name of your blog. You can do that as a title (for example, "Code it Pretty") or as your blog's URL (for example, "www.codeitpretty.com").

Next, press the orange "Save template" button to save your updated template.

Marking Up Your First Recipe

I'm going to show you how to completely mark up a recipe to make a fully detailed Rich Pin, but you should know that Pinterest only requires you to mark up two parts of your post for Rich Pins: the title of the recipe and at least some of the ingredients.

If you want to leave a little "mystery" to entice Pinterest users to click through to your post, you can just mark up the title and key ingredients. Nothing else is required.

For best results, start with a recipe that has already been published on your blog, and has also already been Pinned to Pinterest. Also, if you don't already have a favicon for your blog, add one! It will show up on Rich Pins from your blog.

Switch to the HTML Editor

Open up a post you'd like to make Rich Pin-nable and switch to the HTML editor by clicking the HTML button at the upper right of your post editor. The HTML button turns a slightly darker grey when it's selected.

Wrap Your Recipe

Pinterest needs a signal to know your post includes a recipe, so we're going to wrap the recipe portion of your post with an HTML element called a div.

Find your recipe in the body of your post and add this line right above the recipe's title:

<div class="hrecipe">

Then, find the end of the recipe, and add a closing </div> tag below the last line of the recipe:

</div>

That closing </div> tag is super important. If you leave it off, your sidebar will get pushed to the bottom of the page, so don't forget it!

Next: Mark Up Your Recipe Title

Find your recipe's title in the body of your post. Add this line right before the first word of your recipe's title:

<span class="fn">

Then, add a closing </span> tag at the end of the title, like this:

<span class="fn"> Orange-Pineapple-Carrot Smoothie </span>

Again, the closing tag is important, so don't leave it out.

Next: Mark Up Ingredients

You don't have to mark up all of your ingredients, but it's helpful if you include the major stuff. Each ingredient needs to be marked up individually with the class "ingredient".

Wrap a <span> tag around each ingredient with a class of "ingredient", like this:

<span class="ingredient">3/4 cup chopped fresh pineapple </span>

Repeat the process for each ingredient you want to mark up.

If you wrote your ingredient list as an ordered or unordered list, you can insert class="ingredient" into the opening list item tags for your ingredients instead, like this:

<li class="ingredient">3/4 cup chopped fresh pineapple </li>

The effect is the same as adding a span tag, it just saves you some time!

Optional Markup

Yield

You can indicate your recipe's total number of servings using the "yield" class, like this:

<span class="yield">Serves 1</span>

Cook Time, Prep Time, and Duration

You can indicate cooking time, preparation time, and the total time it will take to make your recipe. Here are example of how to indicate each:

Cook Time

<span class="cookTime"><span class="value-title" title="10M"> </span>10 minutes</span>

Prep Time

<span class="prepTime"><span class="value-title" title="10M"> </span>10 minutes</span>

Duration (prep and cook time combined)

<span class="duration"><span class="value-title" title="10M"> </span>10 minutes</span>

To change the time markup to match your recipe, change "title" value to the correct amount of time. Minutes are indicated with a capital M, hours are indicated with a capital H.

Re-Publish Your Post

When you're all marked up and ready to publish, press the orange "Publish" button up top. Your published post will look normal to your readers — the little bits of markup we added around your recipe won't be visible in the published post. But, if you view your page source you'll see everything you just added to the post.

Test Your Recipe Markup and Submit to Pinterest

Now you're ready to test your Rich Pins! Before you test, though, you should know that the Pinterest validator is flaky. Your first recipe may not pass — one of my tests failed even though I was using Pinterest's own demo markup. If your first URL doesn't validate, try again with another post. As long as you're using the correct markup, you should be able to pass validation after a few tries. Here's how to get validated:

• Go to the Rich Pins Validator on Pinterest's developers site and submit the link to your post with rich pin markup — not your home page.
• If your URL fails, don't get discouraged. Mark up another recipe and submit that one, making sure to include the recipe name and ingredients markup. It can take a few tries before the validator recognizes your markup, even if it is correctly formatted.
• When your URL passes, you'll be prompted to apply for Rich Pins. Click the "Apply Now" link to continue.
• On the next screen, check the "website domain" field. If you have a .blogspot.com URL, you'll need to correct the URL to your blog's actual address (for example, codeitpretty.blogspot.com).
• Set the "Data Format" radio button to "HTML Tags" and press the red "Apply Now" button.

After you apply, you'll see a preview of how your Rich Pins will look. The screenshot below was provided by Olivia Morrissey from Not A Plain Jayne, one of the early testers of this tutorial.

Pinterest takes a few days to approve blogs for Rich Pins, and will notify you by email when you are approved. Olivia got her approval notification in 4 days.

Recipe Markup Tools

If you need a little help speeding up the process, there are two free online tools you can use to generate your markup.

RecipeSEO.com is an online recipe builder that generates hRecipe markup for you.

If you use the Chrome browser, you can use the hRecipe Helper extension.

Image in title card CC-BY Flickr user ilovebutter.

Customizing the Older and Newer Post Links in Blogger

Recently, I've received requests for tutorials on how to make changes to the "Older Posts" and "Newer Posts" links at the bottom of Blogger pages. So, I decided to bundle all the answers into one post. Today I'll show you how to move, style, and make changes to the text of your Older and Newer post links. Let's get to it!

Switch the Older and Newer Link Positions

It's undeniably odd that Blogger places the "Older Posts" link at the right of the page and the "Newer Posts" link at the left by default. But, it's also very easy to switch them around. Here's how:

Go to Template > Customize > Advanced > Add CSS and enter this in the "Add CSS" box:

#blog-pager-newer-link {
float: right;
}

#blog-pager-older-link {
float: left;
}

Press the orange "Apply to Blog" button and you're done! Now the "Older Posts" link will be at the left and the "Newer Posts" link will be at the right.

Add Arrow Icons to the Links (or any other icon you like)

With a little bit of CSS, you can add arrows or other icons next to your Older and Newer links. Here's how:

First, upload your icon images to the Picasa album for your blog (or your favorite image hosting service). Keep that tab open while you work, you'll need direct links to those images to add the icons to your blog.

Next, go to Template > Customize > Advanced > Add CSS and enter one of the following sets of CSS in the "Add CSS" box.

If your Older and Newer link are in their default right and left positions, use this CSS:

.blog-pager-older-link:after {
content: url('IMAGE URL HERE');
}

.blog-pager-newer-link:before {
content: url('IMAGE URL HERE');
}

If you moved the Older link to the left and the Newer link to the right using the instructions above, use this CSS instead:

.blog-pager-older-link:before {
content: url('IMAGE URL HERE');
}

.blog-pager-newer-link:after {
content: url('IMAGE URL HERE');
}

Replace IMAGE URL HERE with the direct links to your icon images.

If you uploaded the image to Picasa, click into the full-sized version of your image and find the "Link to this photo" link near the bottom of the right column. If you see the "Select size" dropdown menu, set it to "Original size". Then, click the "Image only (no link)" option below the size menu. Copy the "Embed Image" link — it will be long!

If you don't see the "link to this photo" option, or if the options don't match what you see here, you can get your image's URL by right clicking it and selecting "copy image location" or "copy image URL" from the menu.

Change the Font of the Older Posts, Newer Posts, and Home Links

If you read my Blog Font Style series you probably already have a good idea of how to do this, but for those who missed it, here's how:

Go to Template > Customize > Advanced > Add CSS and enter this in the "Add CSS" box:

#blog-pager-newer-link,
#blog-pager-older-link,
.home-link {
font-family: 'YOUR FONT NAME HERE', FALLBACK FONT HERE;
}

Replace YOUR FONT NAME HERE with the name of your chosen font. You can either use a web-safe font, or you can use a custom font that you've installed in your blog (you can learn how to use Google Web Fonts in this tutorial).

Replace FALLBACK FONT HERE with your choice of fallback font. I'd recommend using serif or sans-serif. There are other fallback options, but they can be quirky.

Change the Text of the Older and Newer Post Links

If you want to change the links to say something other than "Older Posts" and "Newer Posts", you can! Here's how:

1. First, back up your template. Seriously, don't skip this step. Go to Template and click the "Backup/Restore" button in the upper right. Click the "Download full template" button on the next screen and save your template copy to your computer.
2. Next, click the "Edit HTML" button below your "Live on Blog" screenshot.
3. Then, place your cursor over your template code, click once, then press Control and F at the same time (PC) or Command and F (Mac) to open a search box inside your template (see screenshot below). Your browser's search feature won't find the code you need to find, you have to use the template search.
4. Enter <data:newerPageTitle/> in the search box and press enter. The code will jump to that line in your template's code and highlight it in yellow.
5. Delete the highlighted code and replace it with what you'd like the Newer link to say instead.
6. In the next code block, look for <data:olderPageTitle/>. Delete that and replace it with what you'd like the Older link to say instead.
7. Press the "Preview Template" button at the top of the template window and scroll down to the bottom of your page. You should see your Older link with its new text. If it's correct, press the orange "Save template" button.
8. After you've saved your template, view your blog and go to the second page. You should see your Newer and Older links both updated with your chosen text.

Author Biography Boxes for Blogger

A few months ago, I showed you how to make automatic post signatures for Blogger, and now I'm going to expand on the automatic signature concept to show you how to make a detailed, deluxe "about the author" box with a portrait, text, and links included. With HTML & CSS, you can build an author bio box like this:

That's just a screenshot, if you'd like to see a real, clickable author bio, I put one on my demo site.

Difficulty: Advanced Beginner to Intermediate

You should be comfortable with editing your Blogger template before using this tutorial. The tutorial includes a complete author box template, so you don't need much HTML & CSS experience to do this. But, it helps if you have a little.

Template Compatibility:

This works with all of the standard Blogger templates except Dynamic Views, which does not accept customization. This will also work with custom templates that have the same internal structure as a standard template.

Let's get started!

Upload Your Portrait Image

Go to the Picasa Web Album for your blog and upload your author image. The image sizing is up to you; I used an image that's 150x150px for my example signature. After you've uploaded the image, click on it in your image gallery to open up the full size version. Leave the Picasa album open for now, you'll go back to it later for your image's direct URL.

Build the Author Bio Box

I've added all of the code for this tutorial to an editable "pen" on Codepen, so you can completely design your author bio before you place it on your blog. You can preview the code in the embedded box below, and you can open the editor in a new tab to code along with the tutorial.

 <b:if cond='data:blog.pageType == &quot;item&quot;'>
<div class='signature'>
       <p class='sig-content'></p>
       </div>
      </b:if>Check out this Pen!

I've added a placeholder author photo and the basic box styling to get you started. You'll change that to your own styling as we go.

The HTML

Your bio box is made up of two parts: a paragraph and a div that surrounds it. A "div" is a division in HTML — think of it as the container for your bio. The paragraph will include your biography and links.

Here's the HTML markup for the author bio box:

 <b:if cond='data:blog.pageType == "item"'>
<div class='signature'>
       <p class='sig-content'></p>
       </div>
      </b:if>

Enter your biography between the angle brackets >< of <p class='sig-content'> and its closing </p> tag. If you like, you can include links with your biography. Check out this post if you need a refresher on how to write HTML links.

The first line of the code tells Blogger to show your bio box on post pages only, so that your homepage and search pages don't get cluttered with repeated bios. If you want the boxes to show on all pages, remove the first line and the closing </b:if> tag at the bottom.

That's it for the HTML, let's move on to the style!

The CSS

Move to the CSS window in Codepen to style the author bio box to match your blog. The CSS has three rules: on for the .signature class, one for the .sig-content class, and one for the .sig-content a elements, which are links.

I've filled in some example styling in Codepen, but you'll need to make changes so the boxes work on your blog. The recommended changes are marked here in bold.

.signature {
    background: COLOR HERE url(PORTRAIT IMAGE URL HERE) left no-repeat; 
    width: BOX WIDTH IN PIXELS;
    height: SIGNATURE IMAGE HEIGHT IN PIXELS;
}

.sig-content {
    width: 475px;
    font-size: 1.2em;
    padding-left: IMAGE WIDTH + 20 PX;
    padding-top: 1em;
    position: relative;
    color: white;
}

.sig-content a {
    color: white;
    text-decoration: underline;
}

The line numbers that follow are from the Codepen display of this code.

In line 2, change the color to your background color of choice. You can use a color name, a HEX code, or rgba colors. Next, enter the direct URL to your portrait image inside the parentheses after url().

In line 3, you can change the box width. I have it set to 700px, but you can increase or decrease that to fit your blog.

In line 4, set the height to the height of your portrait photo. For example, if your portrait is 150 pixels tall, use 150px.

In line 8, you're setting the width of the biography paragraph. I've set it to 475px, but you can adjust that to fit your signature box.

In line 9, I've set the font size to 1.2em. You can increase or decrease that number.

In line 10, the padding-left puts space between the portrait image and the text. I've used a formula of image width + 20 pixels, but you can change that.

In line 13, I've set the text color to white. You can change that using a color name, a HEX code, or rgba colors.

In line 17, I've set the link color to white. You can also change that if you prefer.

Adding Your Bio Box to Blogger

Now that your bio looks like you want it to, it's time to move it from Codepen onto your blog.

First, Back Up Your Blog

We're going into the template to add your signature, so you'll need a backup in case anything goes wrong. Go to Template and click the "Backup/Restore" button at the upper right. Press the "Download full template" button on the next screen and save the resulting file.

Add the HTML to Your Template

After — and only after — you back up your template, click the "Edit HTML" button below the "Live on Blog" screenshot.

Hold your cursor over the template code, click once, then press CTRL-F (PC) or Command-F (Mac) to open a search box. Paste <b:if cond='data:post.hasJumpLink'> into the search box and press enter. Your template will jump to that line and highlight it in yellow. Starting with the highlighted line, you should see this group of five lines of code:

 <b:if cond='data:post.hasJumpLink'>
      <div class='jump-link'>
        <a expr:href='data:post.url + "#more"' expr:title='data:post.title'><data:post.jumpText/></a>
      </div>
    </b:if>

Copy and paste all of your HTML from the HTML tab in Codepen directly below the closing </b:if> tag in that code block. The screenshot below shows both blocks of code together.

Save your template.

Add the CSS to Your Template

Now, go to Template > Customize > Advanced > Add CSS, then copy & paste in everything from the CSS tab in Codepen. Press "Apply to Blog" to save the CSS.

After you save the CSS, go to your blog and click into one of your posts. You'll see your author bio box at the bottom of the page, right above your post footer.

Multi-Author Variation

You can modify this code to work on multi-author blogs, too! This variation only works if each author posts from his or her own Blogger account; it doesn't work if everything is posted by one author.

I've posted code for multi-author blogs in a separate Codepen demo.

Overall, the technique is the same, but this code adds a second conditional to the HTML for each author's bio. In that conditional, you'll need to fill in each author's name as it appears on their Blogger account.

The multi-author CSS includes a separate background declaration for each author's bio so you can give each author their own portrait.

LinkWithin Variation

If you use LinkWithin and would like your biography to appear above your LinkWithin thumbnails, add this right after the closing </b:if> at the end of your bio box HTML:

<div class="linkwithin_div"></div>

There's no similar option for nRelate users, sorry!

How to Use the New Blogger Template Editor

Blogger just made a big change to the HTML template editor, much to the surprise of many Blogger users — me included!

The new look is a bit startling at first, but don't worry; your template code hasn't changed, it just looks different. Everything is still in the same place it used to be, there are just new ways to get there.

I have updated all of my tutorials that include template instructions, but Blogger tutorials from other sources may not be updated yet. This little tour through the new features will help you translate old tutorials so you can still use them with the new editor.

So, let's take a look at what's new!

Opening the Template

There's one less step in the process of opening the template. Now all you have to do is go to "Template" and click the "Edit HTML" button below your "Live on Blog" screenshot. It used to be that you had to press "Proceed" on an intermediate screen before getting to the template code, but that's gone now.

The New Buttons Up Top

There are a bunch of new buttons at the top of the template now! Some of the buttons have obvious uses — the "Back" button takes you back to your Blogger dashboard, the "Save template" button saves your template. The others need a little explaining:

• Jump to Widget lets you go straight to a specific widget in your code (more on that later).
• Edit Template & Preview Template toggle these buttons to switch from the code view of your blog to a preview of your blog with the changes you've made to your template.
• Format Template cleans up your code to make it easier to read. It does not add or remove anything.
• Revert Changes lets you delete your unsaved changes to your template. This is your best friend if you catch a mistake in your preview!
• Revert Widget Templates to Default clears all of your changes to widgets and resets them to their original state.

No More "Expand Widget Templates"

Many Blogger tutorials ask you to check the "Expand Widget Templates" box at the top of the template, but that checkbox is gone now. Instead, all of your template's code is accessible when you open the template.

To get to a specific widget within your blog, you can use the "Jump to Widget" button.

This is fairly self-explanatory when you're looking for a default Blogger gadget; just select the name of the gadget you want to edit. But, HTML/JavaScript gadgets will show up in this list by their HTML ID number. There's a quick way to find the right widget ID so you can jump right to the widget you want to edit.

Finding HTML Widgets

To find the ID of an HTML widget, go to your blog and hover your cursor over the wrench icon at the bottom of your widget. When you do that, you'll see a URL appear at the bottom of your browser window. Look for "widgetID=" in the URL.

The HTML number after "widgetID=" is your widget's ID. Select that ID from the "Jump to Widget" menu to go straight to that widget's section in your blog's HTML.

Searching the Code

Some Blogger tutorials ask you to look for specific lines of code in your template. There's a built-in search feature in the template now that will take you straight to your line of code and highlight it in yellow to make it even easier to see.

To search for a line of code, place your cursor over the code, click once, and press ctrl and f at the same time (PC) or command and f (Mac) to open the search box.

Type in the code you want to find, then press enter.

The template will jump to your code and highlight it in yellow.

You can use the search box to perform find-and-replace searches, too. You can read more about this advanced option on Blogger Buzz.

Reading the Folded Code

Sometimes, you just need to read through chunks of your code, line by line. As you look through the new editor, you'll notice that the lines of code are numbered. And, you'll see that there are lots of big gaps in the line numbers; for example, a jump from line 13 to line 582. That's because the code is "folded". You can expand folded code by clicking the folder arrows.

In some areas, multiple levels of code are folded into each other, so you may need to "unfold" a few blocks of code to find the section you want. Don't forget, if the folding and unfolding gets tedious, you can always use the search feature to find specific blocks of code.

What Do You Think?

Are you warming up to the new editor? Let me know in the comments!