June 21, 2013

Customizing the Older and Newer Post Links in Blogger

how to move and style 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 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.

click the image to enlarge

Show Off Your New Link Style!

If you've used any of the tips in this tutorial I'd love to see what you've done with your links! Let me know where to find your blog in the comments, Tweet me @MMosley, or get in touch on Google+.

June 6, 2013

How to Use CSS Hover Effects

Hover effects with CSS

Last month when I posted the Blog Font Style CSS series, Sara from Burnett's Boards asked about changing text color on hover. And then I realized that it must seem strange that I didn't cover hover effects at all when I talked about font style.

Honestly, I didn't even think to add hover effects to the font tutorials because you can use the CSS :hover pseudo-class on just about everything!

Today I'm going to show you some basic examples of hover effects you can try on your own blog, but first I'm going to talk a little bit about what a pseudo-class is, and about :hover compatibility.

The :hover Pseudo-class

In CSS, a pseudo-class is a "fake" class that you can apply to any HTML element. The pseudo-class effect is triggered any time a certain condition is met, like, for example, when the element is hovered over by your reader's mouse. There are lots of pseudo-classes available to web developers. You can check out a list of more pseudo-classes at the Mozilla Developer Network, but here we'll just focus on :hover.

When :Hover Works, and When It Doesn't

The :hover pseudo-class was created with mouse use in mind. If your readers are visiting your blog on a computer, they'll see your hover effects exactly as you designed them to work, even on older browsers like Internet Explorer 7.

But, visitors on smartphones and tablets will have a different experience.

The thing is, there's no real way to "hover" something on a touchscreen device. On a touchscreen, you're either touching something or you aren't — the screens haven't evolved enough to detect a finger hovering over the screen (yet!).

Since hovering isn't a real thing on touchscreens, :hover effects are usually triggered on tap instead, and the effect is typically very brief. But, sometimes they don't work on touchscreens at all. It's best to treat :hover effects as "nice to have" design details. Don't rely on them to do something essential.

Now that we've got that out of the way, let's play! If you're already familiar with CSS basics and would like to skip ahead to the live code demo, click here to open it up on Codepen.

The Very Basics of :hover Effects

You can apply a hover effect to any element on your blog by adding :hover after the element, ID, or class name in your CSS rule. So, for example, if I wanted to give every HTML paragraph on a page a pink background when it's hovered, I'd write a CSS rule like this:

p:hover { background-color: pink; }

With that CSS in place, every paragraph would have a pink background when a reader hovers their cursor over the paragraph. The background would turn back to its original color when the cursor moves off the paragraph.

Now that you've seen the basic structure of a :hover rule, let me show you some more examples!

Change Link Color On Hover

This is by far the most common use of the :hover pseudo-class. Links are special, and setting the :hover CSS for a link means you have to make a few other settings, too.

To style links properly, you need to specify CSS rules for four different states: Link, Visited, Hover, and Active.

The "link" state is when the link loads for the first time for your reader, before they hover or click on it. "Hover" is the hover state, when the cursor is over the link. "Visited" sets how the link looks if your reader has already clicked on it (either during their visit to your site or previously in their browser session). The "active" state is right when the link is clicked, and usually shows only very briefly as the link takes your reader to their destination.

In this example, I'm setting the colors for every state of all links on a site. If you want to set the colors for specific links only, you'll need to find the CSS selectors for those links.

a:link { color: black; }
a:visited { color: gray; }
a:hover { color: pink; }
a:active { color: yellow; }

I used X11 color names in this example, but you can use hex or rgb values if you prefer. Not sure how to find your color value? This tutorial will help!

Changing Backgrounds on Hover

You can switch the background color of any element on hover. All you need to do is write a :hover rule for your element with a new background color, like this:

.background-switch { background-color: pink; }
.background-switch:hover { background-color: lightblue; }

In this example, everything with the class "background-switch" will start out with a background color of pink, then switch to a background color of light blue when hovered.

You can change more than one thing at a time on hover, too. Let's say you'd like to change the color of the text in your element with the background-switch class. You can also set the text color inside the same :hover rule, like this:

.background-switch:hover { 
   background-color: lightblue;
   color: white;
}

Hover Effects for Images

Some of the most creative uses of hover are with images. I'm going to show you two quick examples here to get you started, but be sure to check out the advanced tutorials linked at the end of this post for some really amazing stuff!

Tilt an Image on Hover

You can give your images a little twist on hover using the CSS3 transform property. This works in Firefox, Chrome, and Internet Explorer 9 and up.

The CSS for this is going to look very repetitive, and it is. Since we're using a new CSS3 property, we need to use vendor prefixes to ensure that the effect works in every browser type. Here's how I would rotate an image with the class "rotate" -10 degrees on hover:

.rotate:hover  {
  -ms-transform: rotate(-10deg);
  -webkit-transform: rotate(-10deg);
  -moz-transform: rotate(-10deg);
  -o-transform: rotate(-10deg);
  transform: rotate(-10deg);
}
Image Outlines on Hover

This is another fun effect that gives your images a "framed" look when they're hovered. We'll use outline instead of border here because outlines make it easier to keep images lined up.

In this example, I'll give every image with the class .hover-outline a 5 pixel gray outline that is offset from the image by 10 pixels to create a "frame" look:

.hover-outline:hover {
  outline: 5px solid gray;
  outline-offset: 10px;
}

Try it Out!

I put up a Codepen with live demos of all the code snippets I shared above. You can visit the demo by clicking the "Edit on Codepen" link on the demo screen below, or you can click here to open the demo in a new window. You can edit the pen to test out different hover effects before you try them on your own blog.

<h1><a href="http://www.fakesite.doesnt-exist.com-tk">Hi. Hover me!</a></h1>

<p class="background-switch">Ok, now that you've done that, hover me next!</p>

<p>Now hover over the photos</p>

  <img class="hover-rotate" src="http://www.placekitten.com/100/100">
    
    <img class="hover-outline" src="http://www.placekitten.com/100/100">
  

    Check out this Pen!

When you're all set to add your new CSS to your blog, here's how to find where to enter your CSS:

If you're on Blogger, go to Template > Customize > Advanced > Add CSS and enter your CSS in the "Add custom CSS" field.

On self-hosted Wordpress, the place to add CSS will vary by theme & framework. If you're not sure where to enter it, you can use Jetpack's "Custom CSS" feature to add the CSS to your blog.

Wordpress.com users will need the premium Custom CSS option to add CSS.

If you're on Typepad, go to Blogs > Design > Custom CSS and enter your CSS in the "Custom CSS" field.

More Fun with :hover

My demonstrations are very simple, but there's a lot of other cool stuff you can do with hover effects! Here are three more advanced tutorials to inspire you.