Blog Baby Blog: Week 3 Return to Top, Please

Hey hey! I'm back for week 3 of Blog Baby Blog.  Want to read learn more?  You can catch up by reading these posts:

This week's tutorial is on one of the most fun features of a blog: the return to top button.  I swear the first time I put this on my blog, I played with it for 3 minutes straight.

Go ahead and click on mine.  I’ll wait.

Want your own?  It’s a four step process: Get your colors, create, resize, install.

Get your colors

You want this to match, right?  Grab a screen shot or download your header image and open it in HTML Color Codes.  When you click on a part of the graphic, it will give you the six-digit code for your color.  You might want to have this screen open when you work on the next part, so you can grab your colors as you work.

Create Your Image

I used PowerPoint for this tutorial because I know a lot of my TPT friends use it.

1.  Set your page size to 1 inch by 1 inch.

2.  Create your image.  I used KG Why You Gotta Be So Mean, KG Eyes Wide Open, and KG Arrows to create this.  The matching colors are a pain to do but worth it. (The blue lines are just PowerPoint guides.)

Good to know:
**PowerPoint hates you, so it won’t let you copy and paste these codes in.  You’ll have to actually type them.
**When you put the code in, hit enter.  If you click on Okay, nothing happens.  Nice, right?

3.  Save your graphic.  Use your mouse to select all the pieces of your graphic, right click on one of the lines that pops up, and save as picture.  DO NOT USE FILE-->SAVE AS PICTURE TO DO THIS.  It will save your white background as part of the image, and then you’ll leave me nasty comments saying the tutorial doesn’t work.

Resize Your Image

Hop on over to PicResize (or some other site you like.)
1.  Upload your image:

2.  There was unused space around your image.  Drag your mouse to create a box around the image and select “Crop".

3.  In “Resize Your Picture”, select custom.  Change the width to 120 pixels and click outside of the number box.  It will automatically resize the height to the correct proportion.

4.  Click on "I’m Done", and then “Save to Disk" to download it to your computer.

Create Your Code

The good news? No need to go to the dark side of your blog-the HTML code.

1.  Copy the following code and paste it into a word document or whatever you use.

<a style="display:scroll;position:fixed;bottom:5px;right:5px;" href="#" title="Back to Top"><img src="INSERTURLHERE" /></a>

2.  Host your image somewhere.  Honestly, your blog is the easiest place for the this.

•Open a new post and upload your picture.

•Click on HTML in the top left corner of your post area

•Copy the address of your image (it will look like http://EightMillionLettersandNumbersinaRow/WhateverYouNamedIt.png)

•Paste it into your document in the part that says INSERT URL HERE.

3.  Copy your new personalized code.

4.  On your blog, click on Layout-->Add a gadget-->HTML-->Paste your code-->Save.

5.  Drag your new gadget to the bottom of your layout.  This is not actually necessary, but I'm Type A, and it will make me feel better if you do.

That's it! A little HTML code, but you didn't have to go to the dark side, so this is doable for pretty much everybody.

If you make one, share a picture on Facebook or Instagram and tag me.  I'd love to see what you create!

P.S. Feeling overwhelmed? Hop over to this post from The Teacher Wife at Teacher Blogging Basics. She has some ready made for you. Just copy, paste, and save!