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!


your photo name

12 comments

  1. You amaze me with your knowledge and skills!

    Susan
    PassioninPortableland

    ReplyDelete
  2. This is great info...luckily I have got a blog design by an amazing lady so I do not need to stress out :)
    Have a great time in Vegas!!

    ReplyDelete
  3. I love this!!! Thank so so so much for sharing!!! I will be working on my blog design today, so this info came at perfect timing, wow!!! Thanks again! :))

    ReplyDelete
  4. You are so fabulous! I did it. I'm not sure I love how I designed it, but your step-by-step process was really easy to follow. Thank you SO much!

    ReplyDelete
  5. I have followed your steps and I am happy with my image but I keep getting a tiny bit of html garble showing as well. here is a link to show you http://k-2kapers.blogspot.com.au/. What am I doing to get this? Can you help please?

    ReplyDelete
  6. Also it takes me to a page with my picture not back to the top. Help

    ReplyDelete
  7. Thanks for sharing! I gave it a try, but I just got a tiny square with a ? mark, so I ended up using one of The Teacher Wife's arrows. :)
    Sarah

    ReplyDelete
  8. Thank you so much Megan!
    It took a while, but I made one. It shows up under the comments. Is that what it is supposed to do? http://amymezni.blogspot.com/2015/06/what-worked.html

    ReplyDelete
    Replies
    1. You’re almost there! Grab that widget with your mouse and drag it over to the bottom of the sidebar list of gadgets, and it will be perfect. P.S.-It looks darling!

      Delete
    2. Thanks Megan. I managed to get it to the side, but it doesn't take me to the top. Did I do something wrong? I end up just on the image.

      Delete
    3. Hi Amy! Go ahead and email me at meganfavre@gmail.com, and I can help you out! Easy fix.

      Delete

Thanks for stopping by! Leave a comment-I'd love to hear what you think!