configure the sticky welcome post for Charlie

I've styled the sticky welcome post/title area of the Charlie template with three parts: a bio picture on the left, the welcome/about text in the middle, and the title/logo on the far right. There are a few different ways to configure a sticky section, and you're welcome to experiment, or find other directions online. Here's how I do it:

1. First, make sure you're using the "old editor" version of the post editor, selectable under Settings / Basic (down towards the bottom, below "Global Settings").

2. Then, size your self portrait/profile pic and title/logo to the sizes you'd like them to be. For the best look, they should be roughly the same height. On the Charlie sample template, the left-hand photo is about 200px wide by 145px high, and the title/logo is about 200px wide by 135px high. So when you size your photo and logo, you can adjust these values as you like, depending on whether you want these items larger or smaller. And remember, you can always resize any image for free using Flickr or Photobucket. You may need to crop (or add) white space around your photo or logo, to even things up.

3. Upload your profile pic to any published blog post under the "Left" alignment setting and the "Edit HTML" tab (not "Compose"). Copy/paste the HTML for this image to your clipboard. Then, delete the image and re-publish the post. You don't need to actually publish the image, since once you've uploaded it, it's saved to your Blogger Picasa album - this is where the image's HTML will be stored.

4. Go to Design / Page Elements, and select Add a Gadget from the element bar directly above the Blog Post element. From the pop up window options, choose HTML/JavaScript. When the Configure HTML/JavaScript window opens, paste the HTML code for the profile image from your clipboard into this space, and save.

5. Next, repeat the procedure with the image for your title/logo, only this time, do so under the "Right" alignment setting. Return to Design / Page Elements, and open that same HTML/JavaScript gadget. Copy/paste the HTML code for your title/logo image immediately following the HTML code for your profile pic. Again, you don't need to actually publish the image of your title/logo in the blog post you "used" - you only needed to upload the image so that its HTML would be stored in your Picasa album.

6. Finally, just type in your welcome message/bio directly following the HTML for these two images. You may wish to use the <p> tag to break your message into paragraphs (just type <p> before every word you want to start a new line). Switching to the "Rich Text" option with the Configure HTML/JavaScript gadget will allow you to modify the text's color and styling. I also have instructions modifying text color (beyond the choices given) and text size.

Save the gadget, and you should see your profile image, welcome message, and logo/title, in that order.

In order to not have the text "spill under" the images, make sure that these images (your logo/title and bio pic) are at least as tall as the content of your welcome message. If they're not, you can add some white space padding beneath the image(s), using any paint/graphics program.

If you'd like to make the images of your profile photo or logo/title "unclickable" (meaning, clicking on them doesn't open their Picasa storage page), here are directions for that.

NOTE: you certainly don't have to include all of this content in your sticky element; just leave off any that you don't want. If you'd prefer just one image and some text in your sticky element, here are instructions for that.

RETURN TO TUTORIALS