Beautify your Blog: week 9 - Sidebars, Part 28:00: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
This week we'll be continuing to tackle our sidebars.
Customized Sidebar Titles
I'm going to show you how to make customized sidebar titles, like this:
... except I'll be using an image I previously purchased on Etsy for a few dollars, the needle and thread image - the one you see in my signature:
So pick an image which you could easily add text to - like the framed image above, or a mini banner, or maybe the same background image(s) you used for your custom navigation tabs in Week 5. Something which fits the feel of your blog, matches your color scheme, etc.
Make sure that you use an image which you have either purchased or was free to use (you'll know if it's 'free' if it doesn't have a stamped watermark over it).
Once you have your image you'd like to use, we're going to use Pixlr.com/express again this week (or the like - whichever photo editing program you like to use) to add your custom text.
on Pixlr, click:
select your image from your computer which you'd like to upload
- - - ADJUSTMENT
- - - - - RESIZE
So, we need to resize our image to fit our sidebars. We adjusted our sidebar widths in Week 2 - I suggest you head back into your Blogger Template (Adjust Widths) to check to see how wide you set your sidebars to - because we'll want to be a little bit smaller than that.
You'll see in the pic above, I've set my width to be 310px. I'm going to want to resize my sidebar title banner to be a bit smaller than that; I'm going to set it to 295px.
When you resize your image, it'll automatically appear as much smaller - just slide the "Zoom" slider bar, top right, to 100% so that you can see what your image will look like, real-size.
Next, we'll add our text.
Click on the "Type" Button, bottom right.
Use a text which again, fits with your blog. You may have used a particular text in your header you'd want to mimic, or maybe you want to pick a font which is close to the one you use for your post titles. Or maybe, you just want to have fun with it, and do something different! Go for it!
There's a cute font in the "Dotted" section which looks like x-stitch, FYI ;)
Once you're happy with your image, Click SAVE.
Save the image to your desktop, and maximize the quality of the save to 100%.
Now we need to 'host' our image to a site. For this example, I'm going to use Photobucket, but you could use any site you're comfortable with, such as Flickr or Picassa.
In another window, I upload my image to Photobucket, and I click on the image so that I see the links to the right (circled in red) - we'll need the "Direct" link to the image URL (circled in green) in a future step, so leave this window open.
Editing our Gadgets
Now we need to head over to our Blogger Dashboard, (Blogger.com homepage) and click on
on the Gadget which you'd like to add your custom gadget header/banner to.
We are going to have to enter some HTML code here. Don't worry - just copy and paste what you see below, and insert your image's Direct Link URL where it indicates, and you'll be fine :)
Delete the "Title" field of the gadget. You won't need this anymore, since you made your own.
Immediately above the Gadget's content, enter the following HTML script:
<img src="YOUR URL HERE"/>
and where it says YOUR URL HERE , insert the direct link to your image, like so:
...and, if you'd like to center your image, add the
tags to either side of the image coding, like so:
and then view your blog.
What if you have a Gadget which you can't add HTML to, like your "Archive" Gadget?
Just add an HTML Gadget directly above your non-HTML gadget, like this:
which looks like this:
then click "Save arrangement" if you're all good in the hood!
I hope you're enjoying this series. Make sure to post comments with the links to your blogs, I love to see what you're up to!