DIY Design: Make a Back-to-Top Button for Blogger

Okay, first a disclaimer: I am not an expert coder. If you ask me how to code anything on your website or blog, I will probably send you somewhere else, especially if it involves CSS. But HTML I can handle in small doses. And when I recently figured out how to make a back-to-top button without crazy coding, I just had to show you how I do it!

In case you have no idea what I'm talking about, a back-to-top button is the little button that appears in the corner of my blog and if you press it, you'll be catapulted back to the top of the page. For really long pages like archives, a long homepage or even a post with a lot of comments, this is super nice to have. 

First, make a small button. You can do this in Picmonkey or Photoshop, depending on your skill set (or I can make you one!). I made mine a circle, about 80 pixels in diameter. Upload the photo either in a post or in Flickr/Photobucket and then copy the image URL. If you upload it into a post, flip over to HTML first to find the image URL.

Then, open up your blog dashboard and go to Layout. Make a new gadget in a sidebar (or in a footer if you don't have sidebars) for simple HTML--it's called HTML/Javascript. Simply copy/paste this HTML into the box, add in your image link + admire! Look at you go, you HTML wizard.

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

If you need to change your margins, just change the number before 'px' and that will change how many pixels of margin you have between your button and the top and left sides of the screen. This code will automatically put the button on the left side, but you can easily switch it to the right side by putting 'right' in instead of 'left'. I chose to do that + I also changed my position to 34 pixels from the right side so that it wasn't half on gray, half on white (at least on my computer). 

Let me know if you have any issues! I probably won't be able to help but I'll try ;) If you enjoyed this tutorial, I'd lurvvv if you would pin the image up top! I'd love you even more if you pin it from the actual post page, not my homepage!

Easy peasy ways to make your blog prettier in 5 minutes

I may not be an expert on blogging, but I do know a thing or two about what makes a blog pretty. It annoys me so much to see a blog with fantastic content, but an awful design--most people won't give your words a chance if your layout isn't aesthetically pleasing! It's sad, but true. Here's how you can easily make your blog prettier without buying a whole new design.

1. Make all your photos the width of your text column. This isn't hard. Use high-quality pictures when possible and resize them in Photoshop or at Picmonkey (free/no registration). This goes miles to make your blog look more professional, and it's super easy! This also applies to your widget. You can alternate sizes but make sure your edges aren't jarring.

2. Please clean up your sidebar. You don't need to have a widget for everything, you just don't. A bio, categories and ads (if applicable) should be your basics and you probably don't need much more.

3. A note about backgrounds and fonts. Please make your background, or at least the part behind the words white. Make your words black or very dark. Please don't use cursive. That's so not okay. Also, don't make big blobby chunks of words; no one wants to read that. Tough love, you don't want your blog to read like a textbook. As a rule of thumb, keep paragraphs to six lines or under.

4. Make your social media buttons match your color scheme. Well first off, have a color scheme. If you don't know how to make social media buttons, have any designer make them, I guarantee they'll be under ten dollars. I'll make them for a buck each. (design) The ones with the brand colors are just not pretty and aren't doing you any good at making your blog look put together. It's the honest truth.

What do you think keeps a blog looking clean and pretty?