Beautify your blog using free Google tools
My blog has been given renovation. It's a little more than my usual tweak the background, fonts and color. I've been inspired by others' beautiful blogs and have recently found myself scouring Etsy for the perfect template for me.
I've found a lot of really pretty ones.
My problem is that I really am kind of fickle. I just don't see myself paying money for a premade template that I will probably be bored with in a few months. That $30 could be spent on much better things. Like a Julep Box!
So, I decided to see what I could do on my own.
All the "design" was done in Google Drive using a free Google web font. I use that word design very lightly because there isn't much designing going on. I made a header, an About Me button graphic thing-y, three buttons and a new signature. All of these are about as basic as basic gets.
I also added a Pinterest widget, an Instagram widget, and a Pin-It hover button. I got the Pinterest Widget Code from Code It Pretty and the Instagram widget from SnapWidget. I have no idea how I did the Pin-It hover button. Oops! I do remember it was very easy, though. :) Some Googling will get you there!
Be sure to click on over and check out my handiwork--before it changes. Oh, and let me know if anything looks wonky or messed up?
Okay, so I'm going to do a tutorial on how to make graphic similar to this one:
I broke it down into a million parts. Sorry for the tedium if you didn't need all the steps. But maybe it will be helpful for somebody?
Go to Google Drive. Click on Create and then click on Drawing.
Pull up the image you want as your focal point by clicking on the little gray and white icon that kinda looks like a photo of mountains.
Also, you can edit the name of your drawing if you want, by clicking on "Untitled Drawing." I named mine "About Me," but it doesn't really matter if you change this.
This will pop up. I uploaded my image from my computer.
I chose a photo of me taking a photo of me in the OB-GYN bathroom at my last appointment. Classy. You can click on the corners or sides to adjust the image to whatever size you see fit.
This is where I tell you how loosey-goosey this whole process is. Google Drive does not give you an option to, say, adjust your image to be exactly 250px. Nor can you crop your image. Keep in mind that Blogger, however, will re-size your image when you drop it into your sidebar. So, if you make it too big, that's okay.
Go back to your toolbar and find the T in the box. Click on this icon.
Then, click anywhere on your workspace to create your text box.
I also like to center everything. If you would like to do this, right click and scroll down to "Center on Page". Then pick horizontally or vertically. Or do each one once to make it completely centered on your workspace.
Likewise, you can also drag the image (or text box or whatever) until you see the red lines. These either mean that you are centered OR that you are snapping into place along side another object. See, I have a red line because my image is centered and another red line because it is being snapped into place next to the text box.
Put in your text.
Too bad Arial is so boring. Want a new font and don't like any that you see? Click on "More fonts" at the bottom to access a nice array of Google Web Fonts.
Click on the one you want.
Ah, Josefin Sans. So simple. So pretty.
I want white text on a field of color, so I'm doing the field first.
Highlight your text and click on the icon that looks like a spilling bucket of paint. I know you played in MS Paint when you were a kid and are very familiar with the fill tool.
Next, change your font color.
Instead of making a whole new text box. I copy and paste then drag the new one to where I need it to go.
I realize that this isn't perfect. I mean, the text boxes are sticking way out past the sides of the images. But I woke up at 5am and couldn't go back to sleep. So, I'm not running on full power.
But you get the idea.
Feel free to adjust yours so it looks nicer than mine.
The colors in my buttons were inconsistent when I saved as JPEG images. Not sure if it was my computer, my eyes, or operator error. But I saved as PNG images and the issue went away.