Beautify your Blog: week 9 - Sidebars, Part 2

Tuesday, June 3, 2014

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

The Image:
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:

- BROWSE

select your image from your computer which you'd like to upload

click

- - - 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.
Depending on the shape of your image, you may want to change the proportions of the image to make it shorter, so it would be more in style with a banner - in this case, click the "Keep Proportions" button and then you can edit the width and height of your image independently.

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.

Click "Apply".

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!
Play with it for a bit. If you need to add text to two separate areas of the pic, like I've done, you need to repeat the Type setting process twice.

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%.

Image Hosting

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

Layout

then, click

Edit

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

<center> </center>

tags to either side of the image coding, like so:
If you click on the "Rich Text" button, top right, it'll flip the view of your Gadget from HTML code to "normal", so you can check your Gadget:
Once you're happy with your image and Gadget, Click

Save

and then view your blog.

Viola!

BEFORE:


AFTER:

Now!

What if you have a Gadget which you can't add HTML to, like your "Archive" Gadget?

No problem!

Just add an HTML Gadget directly above your non-HTML gadget, like this:

which looks like this:
... and once you're happy with what you've done, you can "Preview" your blog before you make a final "Save arrangement":

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!
Follow on Bloglovin

3 comments:

  1. Thanks for all these posts! I recently started a blog and am using your tips to make it more aesthetically pleasing (to me at least). Another free program that works for making these labels are the Google drive functions. I used 'drawing' to make my own buttons (pretty simple ones at that, but you can add in images). I liked it because I could set the size in pixels, which I didn't feel like trying to figure out in Microsoft publisher.

    ReplyDelete
    Replies
    1. That's an awesome tip, Liz! Thank you so much for sharing - I didn't realize you could do that with Drive!!

      Delete
  2. Thank you so much for this wonderful series... I'm hoping to find some time later in the summer to put them to use!

    ReplyDelete

I ♥ to hear from you!

Thank you for taking the time to leave a comment or for asking me a question.

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!