Beautify your Blog - week 8: Sidebars, Part 1 (Basic Sidebar Customization and Custom "About Me")

7:30:00 AM

Hi all, and welcome back to the "Beautify your Blog" series here at Sew at Home Mummy.


If you're just stopping in for the first time, I highly recommend you start at the beginning of the series and work forward - as each week's tutorial builds on the one prior.

Please note that I highly suggest you start at the beginning of the series, and work your way through each tutorial. Each tutorial builds on the week previous.

It is very important that you make a back-up of your blog; read how to do this AND the disclosure statement in Week 1 before beginning.

Here are the tutorials to date for you to go through:
1. Start Here

Let's get started.


Customizing your Sidebar
From your Blogger.com homepage, and beside the blog's name which you'd like to edit, from the dropdown, select

- Template

- - Customize

- - - Advanced

Now, the following attributes in the scroll down list effect your sidebar content look:

Links
- modifying anything under this attribute will change what your hyperlinks look like to your readers; modify the Link, Visited, and Hover colors to ones which will fit the look of your blog.

Gadgets
- modifying anything under this attribute will change what your Gadget's titles will look like to your readers; "Gadgets" are your sidebar boxes of content you create and add. Later I'll show you how to create custom titles, like the ones here on my blog:
but for now you should play with the fonts and colors to create a look which you are happy with and which matches the look and feel of your blog.

Accents
- modifying anything under this attribute will change what "border" lines look like to your readers; you can choose to change them to a color which matches your blog, or, like myself, leave them transparent. As well, if you have opted not to have the custom navigation tabs covered in a previous week's tutorial, you can change the color of the separator lines for the tabs here, too.


Once you're happy with any of the modifications you've made here, click "Apply to Blog".



Custom "About Me" Widget/Gadget
1. The Picture
This week we'll be creating a custom "About Me" box in the sidebar of your blogs. You'll need a picture (of yourself, an avatar of you, a fancy-pants quilt you made, a little clip art swirly-mcgoo which matches the feel of your blog, anything. Or, if you want to be boring, (teehee) you can write something without a picture.)

That picture you create will need to be about 75px by 75px square - no bigger - but you *may* have to play with the size, depending on how wide you've set your sidebar to be. Please see previous tutorials on how to resize pictures (I use Pixlr.com/express for my resizing).

You will also need to 'host' that picture on a site such as Picassa, Photobucket, or Flickr. We'll need the image uploaded to the internet in a spot where we can 'grab' a url for it. I'll be using Photobucket.

So! Resize your photo now, upload it now, and grab the URL to the image and put it away for safe keeping - we'll need it later.

2. The Write Up
You need to write up a bit about yourself for the "About Me" info - things you may want to include in your write up:

  • Where you live
  • Who you are
  • What you like to do
  • Type of blog or the main content of the blog 
Here is what my write up says:
My name is Erin Davis and I am the Chicago-based author behind the blog Sew at Home Mummy, a website where I share my daily sewing and quilting shenanigans. I hope you'll sit down, stay a while, search around with a cuppa tea (or better yet, a nice glass of red). If you would like to read a bit more about me, read it here.
 3. The HTML Code
Hang on to your stitch rippers, Bloggers, because we're getting our first true taste of HTML today. You can do it. Don't worry. Heheh.

4. The Gadget
On your Blogger.com homepage, and in the drop down beside your blog's name, select

- Layout

- - Add a Gadget

and in the pop-up which appears, select

- - - HTML/Javascript

Okay! Now the fun begins.

Let's insert your image first.

the code for doing this is going to look like this:
<img src="INSERT YOUR IMAGE URL HERE" align="left" />

here's what mine looks like with the URL inserted:
make sure you copy the code and insert it without removing any spaces, adding spaces, and make sure that your " " stay put, etc.

Note: If you would rather that your image align to the right instead of the left, edit the code to say "right" instead of "left" behind the align= tag.

Okay!

Now it's time to insert your "About Me" write up you so skillfully crafted. :)

We need to insert some script to tell the text to "wrap" around your image. So here's how to do that.

1. Before the image script you just placed in the HTML Gadget, insert the script

<p>


2. After the image code you entered, insert the "about you" text you created, like so:


3. At the end of your write up, insert

</p>

...this closes the tag.

4. Now, see above where it says "If you would like to read more about me, read it here."
The word "here" I've made into a hyperlink, which, when clicked, redirects the reader to a whole "About Me" blog page with pictures of my kiddies, etc. To do that,

 - Highlight the word you want to make a hyperlink

 - - Click the little world symbol with the chain link over it

 - - - In the pop up which appears, insert the URL of the page you'd like to redirect your readers to


5. Now let's check our work - click the "Rich Text" link (circled in red above):
Wow! Lookin' good!

In the "Rich Text" view, you can muck around with things like making your text Bold (circled in red), italic (circled in green), and even the font color (circled in orange).

Here's what mine looks like after customizing the text a bit:

What you can't play with in the Rich Text view is font size.

If you'd like to make your font or text smaller in size - we need to use HTML to do it.

Here's a font size reference chart for you:
image courtesy of Clever Chimp.com
... these aren't actual sizes, but a good starting point for you. I'm going to change my font size to 2.

Switch back to the HTML editing by clicking "Edit HTML"

immediately after the <p> code, you're going to insert

<font size="1">

and change the number to whichever size you would like.
and then right before the </p> tag at the end of all of your writing, insert

</font>

switch back to the Rich Text view and see if you like your new font size.

Once you're happy with your edits, hit

Save

and take a look at your new "About Me"!

This week's BEFORE:


And

AFTER:

I can now get rid of that crummy generic "About Me" from Blogger. Look how much better this one looks!

And please, as always - I want to see your blogs!! Leave me a comment with your blog URL - I'd love to learn a bit more "About YOU!"

You Might Also Like

4 comments

  1. Thanks so much for this great blog tutorial series Erin! When I get some time to really dive in, I am going to try some of these things. Thanks so much for taking the time to create these great tutorials. I really appreciate it!!!

    ReplyDelete
  2. A couple months ago I won a digitalized picture of myself, it was never sent so I contacted the gal that's supposed to make it up, so I can use that as my photo for the About Me area. hopefully she will write back soon.

    ReplyDelete
  3. Erin, Thank you so much for these tutorials. I just started my own blog a month or so ago and these have been so helpful. Please feel free to visit mine and make any suggestions you might have. http://susanpaxton.blogspot.com/

    ReplyDelete
  4. Thank you so much Erin. My blog is coming along. I added the signature and just re-did the "About Moi" section. Here's the link: http://learningdesigncombo.blogspot.ca/

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question. Rather email me? Reach out at sewathomemummy@gmail.com.

I like to email everyone back when they've commented - so if you're a no-reply blogger, make sure to leave your email address in your comment so I can share the love back atcha!

SUBSCRIBE: Posts in your Inbox!