Before we begin you'll need to have an image or two, set aside to install on your sidebar. You can find an assortment of free sidebar tags located within each of my designer blog themes by clicking this title: A-Z Blog Theme List Be sure to have your image ready to use and in an easy to remember location on your computer.
Once your image is ready we can begin~
1. Log into your blog and navigate to the back area by clicking on "Design"...
2. The back area looks like this...
3. Now click on "Layout" in the left link list...
This is the area we'll be working in to add a few sidebar images. You layout may look different than mine depending up how you have your blog set up. You can easily change your layout at any time by visiting the "Template Designer".
3a. To add an image to your sidebar area we'll be using the "Add a Gadget" link. You'll see they appear in several locations within the Layout view...
I find it easier to click the link with the area I want to add the gadget, this helps lesson the confusion that come when you have a lot of sidebar gadgets later on
4. So let's begin by clicking on the "Add a Gadget" in the sidebar area...
5. A pop-up window will appear with a selection of choices....
For those of you who are new to this area, this is how we add all sorts of bells and whistles to our blogs, from the "Followers" and "Subscribe" features to "Labels", "Archives" and "Polls", there truly is a plethora of sidebar goodies. I recommend taking the time to explore this area further and getting to know some of the tools offered here.
6. For now, we'll scroll down to the "Image" gadget, at the time I'm writing this it's the fourteenth selection down...
7. To open the gadget you can click on either the title or the plus symbol...
8. You will now see the options appear for adding an "Image" gadget...
9. Let's read over what the different options are for this section ~
Title - this is where we can title the item which helps when organizing or rearranging your sidebar items. Leaving this area blank can create a nice clean final appearance to your blog.
Caption - the information typed within this area will appear below the image. A good example is if you're holding a giveaway or sale you can insert the end date in this area.
Link - if you would your image linked to a blog post, page or an outside webpage then this is where that information would go.
Image - this section offers two choices; the "From your computer" option is to upload the image from your computer and the "From the web..." offers you the option of inserting a link so the image will show up. We will be using the first choice for this tutorial.
Shrink to Fit - the last option is a check box for the "Shrink to fit" option. This enables you to use a larger image and fit it within your sidebar area. The size it shrinks down to is dependent upon your own sidebar area settings at the time you're adding the image. I don't usually use this option myself because all of my free sidebar tags are already set to the standard size of 200 pixels wide.
10. Now, to add an image ~ click on the "Browse" button to navigate to where you have your image/s saved...
11. Click on the image you wish to use...
12. Then click "Open"...
13. Once loaded, you'll see the image you selected appear in the window...
14. You can add any other information you choose and once finished click "Save"...
15. Your new image will automatically be inserted at the top of your sidebar area...
...so if you have other images or sidebar elements there, you'll know the top one is new.
16. If for any reason you wish to change the image you can simply click the "Edit" link to open the gadget window again...
17. Once you have your image uploaded you have the option of moving it to a different location. To do this simply click on the image gadget and drag it to a new location...
18. When you're finished rearranging your sidebar gadgets be sure to click "Save arrangement" to keep your changes...
19. To view your new changes click on the "View blog" button at the top...
That's it! You can easily add and make changes to this area at any time by returning and using the steps we just followed above.
Enjoy~
Thank you for the easy precise step by step instructions, i found this article extremly helpful.
ReplyDeleteindie x
I'm so happy you found it helpful Indie ~ I know how you've struggled with this part of Blogger.
Delete♥Sharon
This comment has been removed by the author.
ReplyDeleteThanks for your comment Yanshuang, there are 2 reasons a PNG would have a white background ~ 1) the image was saved as a JPG (JPGs automatically fill in a background) or 2) the template you're using has a preset white background for images.
DeleteTo resolve these ~ be sure the images you're uploading are the original clear backed PNG images and be sure you're using the modified version of the Picture Window template as described in this tutorial: How to Set up & Adjust the Picture Window Template
Best~
♥Sharon
I loaded the side tags just perfectly but how do u link of pages to them so they actually work?
ReplyDeleteThanks for your comment Shayla ~ review step #9, "Link". You just paste the page's link in that area and save.
Delete♥Sharon
I'm so relieved there's an answer to this question, I faced the same problem, its wonderful of you to reply all the time too. :-) thank you for your great site. x
DeleteHi~! I really like your tutorial. This turn out well at my blog. But, the thing is I can't leave the title blank (like you said above) and I don't like it. Do you know how to fix it? thx a lot :D
ReplyDeleteYes Mela, unfortunately this is a current glitch in Blogger and hopefully they'll fix it soon. I just use a small period in a lighter color so it's less noticeable.
DeleteSharon
Currently with the newer blogger you can't skip the "Title" section you must fill it out. So since I'm using the tags as images so I don't need to use the "Title" section it kind of defeats the purpose of using really pretty images. Is there a way to hide or remove the title section once filled in. Weird question I know but had to ask it.
ReplyDeleteIt's actually a really good question Dawn since this is a temporary (let's hope) glitch with Blogger. What we're all doing at the moment is using a single period for the title and then going into the Template Designer and making the title color the same as the sidebar background, that way they're not showing up.
Delete♥Sharon
Thanks Plumrose Lane I actually just changed the title color in my Gadgets section to transparent. And instead of making each one a (.) I lettered each 1 A B C and so on so its not confusing later on. But by making it transparent that actually worked.
DeleteBrilliant idea Dawn, thanks for sharing!
Delete♥Sharon