How to Install Sidebar Photo on Blogger

1. Crop your image into a square at least 250x250px. Your image MUST be a square if you want it to turn into a circle like the demo. You can use a program like PicMonkey to easily crop your image into a square.

2. Copy the following code:

<div style="text-align:center;"><span id="hover">

<a href="LINK TO ABOUT PAGE"><img id="about-photo" src="YOUR IMAGE LINK HERE" /></a></span>

<div id="about">

Write a blurb about yourself here.


3. Go to your Blogger dashboard > Layout.

4. Click "Add a Gadget" in the sidebar. Select the HTML/Javascript widget. Paste the code from step 2 in the HTML box.

Leave the HTML widget open, don't save, and move onto the next step.

5. Go to PostImage and upload your square image. After it has finished uploading, copy the Direct Link.

6. Paste the direct link to replace YOUR IMAGE LINK HERE in the code in your HTML widget. Keep the quotation marks around the link.

7. You can fill in some text about yourself in the designated spot. If you want, add the URL of your about page to replace LINK TO ABOUT PAGE. If you don't want your image to link to a page, remove this portion from the code:


8. Once you've finished, hit Save on the widget and admire your new pretty sidebar photo!