|
I wrote this for a friend who asked me to explain it, but I've since realized that a LOT of people are wondering how to do it. It's easier than you'd think!
{ All images will pop up bigger (you know, so you can actually see what I'm talking about!) if you click on them. } How to put images in your Typepad blog sidebars: 1. Decide what size the image should be. Usually sidebar images work well at 150 pixels wide (which is 1.5 inches at 100 ppi, or 2.08 inches wide at 72 ppi. Oh, and this is for when your sidebar is 200 pixels wide.) Save your image to this dimension as a JPEG if it's a picture, as a GIF if it's just text and/or includes transparency. If you have a sidebar that you have made larger than this, you can experiment with what size the image should be. 2. Save your sized down image on to your desktop with a name that is easy for you to find and remember. 3. Sign on to Typepad. 4. When you're signed in, your page should look like this. (See image.) Click on "Files" from the Control Panel. 5. Toward the top right you should see "Upload a new file." Click the browse box and select your file from your desktop and upload.
6. Once it's uploaded, find the file name in the list of all your files. Click on the file name and a new window will open containing your file. At the top is the web address that this image is located at. Highlight it and copy it (by holding down "ctrl" and "C." (You may want to paste this URL somewhere to make sure you don't lose it between this step and the next few. I usually have a Notepad document open while I'm working on things. If you know you're going to do several pictures, it makes sense to do all steps at once with each picture -- upload them all and copy their address locations in a notepad document to use in step 10. [you paste the address you copied by putting your cursor where ever you want it to go, and holding down "ctrl" and "V."]) 7. Now we're going to leave the Control Panel and go to the Typelist section. (Use the green tabs at the top of the screen to switch.) We're going to "Create a New Typelist": Under "[1] List Type," choose "Notes." Type in [2] what you want the list to be called (this CAN be changed later,) and click on the "Create New List" tab.
8. This takes you to a screen to work with the Typelist you just created. (If you make a "links" list and want to include HTML, before you do anything, you have to change configurations. Click on the "Configure" tab at the top (you should be within the "Manage" tab to start.) Ignore part 1. Part 2, advanced configuration, where it says "Display notes," the circle next to "As Text" has to be selected. YOUR PICTURE WON'T DISPLAY IF YOU DON'T DO THIS. Then hit the "save changes" Button. But if you create it as a "notes" list, you're fine.) 9. Ok, now we can go back to the Manage portion of this Typelist. Right under the "Manage" tab are some links: Add a new item, all items, etc. You'll want to click on "add a new item." 10. Place your cursor in the Notes section. Paste the picture image address. Now we need to put HTML around it so Typepad knows it's an image. I have to show you this in a picture, because if I write HTML right now, Typepad will still read it as trying to insert an image. (Click the below image to open and read.)
11. Select "Save and update" when you are done. Now go to the "Weblogs" tab to get to the Blog you want to put this Typelist in. (If you have more than one, they will all show here. If you just have one, you'll only see one here.) Each Blog has it's own box -- in the appropriate blog's box, select the "edit design" at the right. You're now taken to a screen that looks like this -- the "Edit Current Design for [Blog]" screen. The second part says "Your Content." This is what we are changing.
12. Select "Change Content Selections." Scroll down to find the name of the Typelist you want to include, check the box next to it, and at the bottom select "save changes." Now you should be back to the "Edit Current Design for [Blog]" screen. Under Your Content, now we're going to select "Change Ordering." This screen lets you click and drag the various Typelists around to an order you like them. Select "save changes" when done. When you get back to the "Edit Current Design for [Blog]" screen again, YOU HAVE TO SELECT THE "REPUBLISH WEBLOG" BUTTON FOR THE CHANGES TO SAVE!!!
13. After republishing, view your blog and see if the changes worked. If they didn't, go back and figure out why. (E-mail me if you must. heh.) If even one HTML character is off, it won't work. HTML is pretty precise. If you want multiple images, just start the typing process again after your previous image's URL. (Can hit "ctrl" and "end" to get to the very end of all typing in the list if there's a lot of items.) If you want to start rearranging things, you have to be able to figure out where the HTML for each image begins and ends -- just highlight and drag. If you've sized them to 150, one image should take up the width of the column -- since there is no room for the images to be next to each other, the will stack up on top of each other automatically. The next entry will tell you how to use HTML to make a picture a link button, linking to another site. (I promise it's easier than it sounds!!!) |