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! :)

How To Easily Find HTML Sections of Your Template

Ever get frustrated while searching for a particular section within the HTML of your template? Sometimes finding the section that needs to be modified can be more time consuming than making the actual changes!

There is a little trick that I use whenever I need to find an elusive section. I am not sure it will work on all browsers or computers, but it works like a charm when using Firefox on my PC.

As always, be sure to download a copy of your CURRENT template each and every time you wish to make a change to the html of your template. It's fast, easy, and will save you A LOT of heartache should you accidentally make a mistake. 
If you wanted to search for your sidebar wrapper, here's what you'd do.

1. Click on Edit HTML from your dashboard or page elements page.

2. *Press CTRL and F at the same time. This will cause a skinny little box to pop up at the bottom of the screen. Click on the images to enlarge them.

3. Type the word 'sidebar' (no punctuation marks) into the find box and press enter.

4. The word sidebar will be highlighted everywhere it appears within the template. Click on the next and previous buttons until you find the section that you are looking for. Then modify your code and be on your merry way!

*If the word that you are looking for is located in the widget templates section, you will need to click on the expand widget templates box before searching.

This nifty little trick works for me all over the internet. For example, if I am referring to an online newspaper article and want to find a specific word, I can search for it by following the steps above and it will be highlighted, thus making it easy to find. :)

Related Posts:
Download Your Template

Please do not copy and paste my words and images into your own posts. I work hard on my tips and wish for everything to remain on this blog. Want to share this tip with your readers? Feel free to link to this post: http://sneakymommablogdesign.blogspot.com/2011/02/how-to-easily-find-html-sections-of.html  Thanks! :)