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
- - Customize
- - - Advanced
Now, the following attributes in the scroll down list effect your sidebar content look:
- 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.
- 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:
- 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
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
- - Add a Gadget
and in the pop-up which appears, select
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:
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.
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
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
...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):
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|
Switch back to the HTML editing by clicking "Edit HTML"
immediately after the <p> code, you're going to insert
and change the number to whichever size you would like.
switch back to the Rich Text view and see if you like your new font size.
Once you're happy with your edits, hit
and take a look at your new "About Me"!
This week's BEFORE:
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!"