how to add a stylish profile section to your sidebar

You can always add a basic Profile gadget to your blog right from your layout. Just go to Design / Page Elements, then, wherever you'd like the profile to be, click "Add a Gadget" and choose "Profile." (You can drag/drop this gadget to another part of your layout after you've created it, too.) You can edit the content of this section, as well as the picture, from your main Blogger Dashboard. However, this can be a bit limiting, since the image will be very small, and you'll be locked in to whatever bio content appears on your Blogger profile page.

If you'd like something a little more visually appealing, you can use a couple of quick, simple tricks to make your sidebar "About Me" just a bit more stylish, such as on this sample template - or this one. All you need is a Flickr account and about five minutes. Here's how:

1. First, upload your profile picture to Flickr (if you don't have an account, no worries, it's free!). Click on the individual picture to bring up a row of options above it. Choose "Edit Photo", and wait for the Picnik application to load.

2. Under Edit, crop or resize your photo as you like.

3. Under Create / Effects, use the various color processing tools to tweak your photos colors, convert it to black and white, or to give it a vintage tint.

4. Under Create / Frames, you can add a border (or two!), or round the photo's edges.

If you have a Premium Picnik account, you'll be able to add a drop shadow to your photo, or a postage-style stamp frame - or even a Polaroid-style frame.

If your sidebars have a background color other than white, and you'd like to add a drop shadow effect (so that the image looks like this over your colored sidebar), you'll need to know the hex code color value of your sidebar background. This is super easy to find. Just go to Design / Edit HTML, and scroll down a bit until you see this section:

#sidebar {
width: 320px;
float: right;
background: #F2F9F8;
border: 1px solid #cccccc;
padding-left: 10px;
padding-right: 10px;
padding-top: 10px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */eak-word; /* fix for long text breaking sidebar float in IE */
}

NOTE: depending on your template, you may have a colored background widebar, instead of sidebar. Also, your sidebar/widebar background color may be different, but what you're looking for is a six-digit code (such as what's in red above).

Now, go back to your photo on Flickr, and choose the drop shadow option. Leave the Shadow Color black (or you can try grey), but change the Background Color to the hex color code from your Layout. You can just copy/paste the code into the box, and hit Enter for the change to take effect.

5. Save your image, and return to your Blogger layout.

6. Upload your image to any published post in your blog, under the Edit HTML (Not Compose). If you'd like the image to sit to the left of the sidebar/widebar (example), upload it under the "left" alignment setting. If you have a smaller sidebar (or a larger picture), and you'd like it to sit in the middle of the column (example), upload it under the "center" alignment setting.

Copy/paste the HTML for the image into an HTML/JavaScript gadget from your Page Elements.

7. You can now type whatever bio content/greeting you'd like, and it will appear directly to the side and under (for left-aligned images) or below (for center aligned images) the picture.

If you'd like the effect of having multi-level text, such as this, you can use paragraph division tabs to create a new line (the equivalent of hitting Enter). Just type the first line, such as Your Name, then type this paragraph tag:

<p>

Then, type your next line, such as Los Angeles, California (or just skip to your main "about me" content). Add a new paragraph tag each time you want to start a new line.

And don't forget that you can control the colors of this text by following these directions!

RETURN TO TUTORIALS