Blog Baby Blog Week 5: So You’ve Got a Slider


Hey hey! This week’s post is focused on making the most of your slider.  Want more Blog Baby Blog?  Catch up on Weeks 1-4 here:


Tips and tricks for making the most of your blog slider.

Know Your Slider Size

One of the most important things to do is to make sure you’re creating an image that is the correct size.  Nothing’s sadder than a cut off or pixelated image.  Do you have a blogger template from Georgia Lou Studios?  Hop over here to check your sizing for some of the most popular templates.

Don’t have a GLS template or your GLS template is not listed on that page?  If you have a Mac, use CMD Shift 4 to grab a screenshot of an image in your slider.  Open the screenshot in Pixlr (Pixlr.com-->Launch Web Apps-->Pixlr Editor-->Open image.)  The first option on the image dropdown is image size.  Now you know what you’re working with.

Grab Your Readers’ Attention

Grab your readers’ attention by designing a bright, eye catching image.  Consider using stock photos or styled stock photos for high quality images.

For this image, I used a stock photo from Deposit Photos. To keep the photo from taking over the text, I did two things.  First, I put a light blue layer on top of the photo and make it pretty transparent. That softened the photo.  Then I added a transparent white rectangle to put my text on.  You still get the idea of the shovel, but my text is clearly visible.

For this image, I used a styled stock photo that I purchased from Etsy.  I added some quick text, the printable I was sharing in the post, my watermark, and boom.  I’ve got a slider image.
Want to see a little cheat I use to make my stock photos work for me?  Watch this tutorial.  I used Photoshop.  You could probably do this with Pixlr or PicMonkey.

Insert Your Slide Correctly

If you have a slider that is the full width of your blog, you want to make sure the images aren’t pixelated.  Even if you make them using the correct dimensions, they can still end up fuzzy.  If you have a template from Georgia Lou Studios, make sure to choose original size when you add the image.  It will look huge in your post area, but your template will automatically size it down to fit in the post.

Hide Your Slider

You’ve made this beautiful slider, but now you’re going to want to hide it from your post.

What? Why?
Your slider image looks so nice that people are going to want to pin it, and you don’t want that.  A horizontal layout does not work well on Pinterest.  Your readers don’t care about that though.  Good post + pretty picture = pin.  Add your image first, but hide it using this trick.

•Switch to HTML view

•Delete the first line of code
<div class="separator" style="clear: both; text-align: center;">

•Replace it with this line:
<div class="separator" style="clear: both; display: none; text-align: center;">

Now your slider image is first (necessary for your template to pull it) but it’s not visible to your readers.

Two Birds, One Stone(ish)

While you’re making that lovely slider image, you might as well make a good pinable image while you’re working.  It takes a bit of time when you first start, but after a while, you’ll get in the habit of it.
Here’s how each of the slider images I shared earlier were rearranged to become optimized for Pinterest:
 

Slider Options

Unless you’re on Wordpress, you’ve been pretty much stuck with the first image/featured post combo.  There are other sliders available for blogger, but they’re kind of buggy and slow.  Heather recently released a tutorial on how to use a slider that goes to a post on your blog or anywhere else (think Page on your blog, label, your TPT store.)

You can check out the tutorial here: Use Slider with Random Images Instead of Posts

**This involves DELETING your current slider gadget.  This cannot be added back in later with out installing a new template, so be sure to back up your template first in case you change your mind later on!!

Any other tips for making the most of your slider?