Blog Design 101: "About Me" sidebar photo & text

All right, I'm bringing you all the second installment of the "Blog Design 101" series a day early because I didn't have another post scheduled for you all today. Lucky you. ;) Today we'll be getting into the "about me" section. Beside the header, I think the "about me" section is the most important element of a blog's homepage. It's so important to pick a good photo that will draw in the eye and show your true self. Not only that, but if you plan on using text underneath it, you need to be sure to pick just a couple of concise sentences that will relate what you/your blog is about in a fun way.

Let's get started. Now before we get into specifics I think, at this point, it'd be a good idea to talk blog and sidebar widths. Generally speaking I think a good width for a blog (with a left sidebar) is 1160x320. Not too big, not too small. However, don't feel like you need to stick to those dimensions. To adjust this all you need to do is go to the template tab, hit customize, and click on "adjust widths". Play around with the width settings and see what works best for you and the type of blog you're trying to create. Again, I can't stress enough that you toggle around with the widths to find the widths that suit your blog best.

(original source here)

Once we've picked our photo we need to size it down to a size that will fit into the dimensions that we've set for our blog. I'm going to go for a more rectangular shape for my photo because I think it'll suit the theme I want to go with best. For a longer rectangular shape I generally like to go with 250x380, for a wider and shorter rectangle I like to go with 250x180. If you want to go with one of those circular "about me" photos that seem to be pretty popular right now you can do that too. The best way I know how to do this is in photoshop, but since many of you don't have that to work with, you can do it through picmonkey as well. All you need to do is go to the "frames" option, select the "rounded corners" setting and increase the corner radius until you've got a circle.

All right, so I've got my photo picked out and I've got it sized down to the dimensions that I want. Now I need to install it. To do that I'll first need to upload it to an image hosting site. I like to use photobucket. The uploading process on photobucket is pretty simple so I won't guide you through it. Once you've got your image uploaded you'll need to head back to blogger and click on "layout". Once there, you need to select the "add gadget" option on the sidebar. That should open up a dialogue box with options to choose from to add. We're going to pick, "html/javascript". Now, before we enter the code, we need to head over to the image we uploaded to photobucket. On the right hand side there should be a box that says "links to share this photo". Click on the option that says, "direct", and it'll copy the link  you will need to your clipboard. After that, you'll need to return to your "html/javascript" gadget dialogue box and enter in the following code. 

<img src="ENTER THE DIRECT LINK FOR YOUR PHOTO IN BETWEEN THE QUOTATION MARKS"/>

Now, before we exit that dialogue box, let's add our text. You can really add "about me" text in two ways but I think the way I'm going to be showing you all today is the easiest. Just hit enter after you've entered in the code for your image and type in whatever it is you want your "about me" to say. Once you've done that, just hit save and both your image and text should show up on your sidebar. The text will show up in whatever font you have set as your "gadgets" font in the template>advanced option. I tend to think this option is the best because it's the easiest and looks the most uniform/cohesive. However, if you want to use a different font, all you need to do is open up your "about me" photo in a paint document and add a text box below it with your "about me" blurb in whichever font you want to go with. Of course, you'll need to complete this step before you upload the photo to photobucket.

After that, we should all have a nice functioning "about me" gadget. :) Once again, I hope this tutorial helped and if you have any questions just comment down below and I'll do my best to answer! Remember to stay tuned for next week because we'll be talking about how to make your own clickable social media icons! 

Much love!