About   All Tips   Tips by Category   Tips by Ability   Help!

Sidebar Photo Customization - Intermediate

Have you ever wanted to put a centered photo in your sidebar? Would you like to be able to put a larger photo in your sidebar than Blogger's picture gadget will allow? On most blogs, the photo gadget will automatically resize your photo and make it left-aligned. Drives me crazy!

This tutorial will show you how to resize your photo to fit the space in your sidebar so that you can get an HTML code for it. Once you have this code, you will be able to upload your photo as an HTML/Javascript gadget instead of having to be restricted by the photo gadget. More control = better customization = beautiful blogs!

The first thing you'll need is an html code for your image. A lot of online photo storage places provide html codes for images that are uploaded to their site. I like to use Photobucket, as it's what I am most familiar with. If your photos are uploaded elsewhere, I suggest checking to see if you can get the html codes for them before proceeding with this tutorial.

How to upload a photo to make it fit your sidebar:

1. Create an account at Photobucket.com if you do not already have one. It's free!

2. Upload your photo as a 320x240 image.

(click on the photos in this tutorial to enlarge)

3. Once the photo has uploaded, return to the album and hover over the thumbnail of the photo. Click on 'edit'. Then click on 'resize'.

5. Check the box next to 'keep porportions'. Then enter a number into the first box that is about 5-10px less than the width of your sidebar.

To determine the width of your sidebar:

a. Log into your blog and go to edit html.

b. Scroll down and search for the section titled 'sidebar wrapper'. Click here for tip on how to easily search for sections within your template.

c. Look for the width measurement (circled in red below). If your template does not look like this, you'll need to hunt around for this number or simply take a guess. Most sidebars are 175-220px wide. The sidebar in the example below is very wide. Important: do not change anything within your template. You are just looking for the measurement of your sidebar.

7. Click 'apply', then click on 'save as a copy' below the image. You can replace the original if you'd like, but it sometimes takes original PB images a while to resize. Better to save as a copy to avoid frustration.

How To Install A Sidebar Photo From Photobucket:
1.. Go to your Page Elements page and click on 'add a gadget'.

2. Select HTML/Javascript. Paste the html code of the photo into the large box. Center it, if you wish. Can't find the html code for your photo? Click here for help.

That's it! Enjoy your new sidebar photos! Do you get html codes for your images in a different way? Please share your method with us in the comment section below!

Related Posts:
How To Center Sidebar Gadgets
Create a Grab Box for Your Button
Image Protection: Resize Your Photos! 
Get an HTML Code for Your Buttons/Photos

Have you been helped by my tips? 
Consider grabbing my button or adding this blog to your bloglist!

Want to share this tip with your readers?
I would be honored for you to link back to this post!

Please do not copy and paste my words and images into your own posts. I work hard on my tips and and wish for everything to remain on this blog. 
Thank you for your cooperation! :)


Mawar MahSury said...

thanks for the tutorial. It works! :)

Patty said...

Thank you for the great tutorial. I enlarged my photos in photobucket for my sidebar but when I click on them I want them to go to the post they are about. When I click on it, it goes to photobucket. Is there a way to make them go to my post instead?