How to: Install a Blog Badge (or add an Html Sidebar Gadget)

This tutorial will cover the steps for installing a sidebar gadget that using html or java script code.  It's a simple but important process as it allows you to easily install badges, buttons and widgets from all of the internet. Whether it's my own blog badge, a fellow blogger's button, or one of those nifty gadgets, the few steps involved are quite useful in helping us create our own blog space.

To use this tutorial you'll need to have a sidebar item selected that uses Html code.  For example purposes we'll use my own blog badge seen below but you can also find a wide range of free inspirational sidebar buttons from this page: http://www.prl-images.com/blog_buttons.html

<center> <a href="http://www.plumroselane.com/" target="_blank"><img border="0" src="http://www.prl-images.com/images/my_images/badges/PrL_badge.png" alt="Plumrose Lane" /></a></center>
To install this badge on your own blog you'll need "grab" the code or "copy" it and "paste" it into an Html/Java Script gadget. If you need help understanding or practicing how to copy and paste with your mouse I recommend following along with this easy video tutorial: http://www.youtube.com/watch?v=mXRT2YH8EDM  The most important thing to remember when copying and pasting html code is that if you loose a snippet of code it may affect how the button appears so be sure to "grab" all of the code.

So let's begin...

1. Begin by logging into your blog, and click "Design"...

2. Now navigate to the "Layout" section of your blog...

In this area you can see a skeletal view of your blog. Looking over the various sections you'll see the navigation bar, "Header" area, "Blog Posts" area, and any sidebars you have setup on your blog.  This is where you can easily install, move around, and remove various gadgets for your blog.  Clicking on "Add a Gadget" enables you to access a wide range of built-in gadgets that Blogger offers it's user.  

So let's go on and access this area...

3. Click on the "Add a Gadget" link in the sidebar area of your blog...

4. You'll see a small window up...

This is where you can access all of the built-in add-ons that Blogger offers.  

5. We're going to be using "HTML/Java Script" gadget so using the scroll bar, scroll down until you see that option...

6. Now click on either the title or the blue + button...

In this area you'll now see where we can title your gadget and paste in any Html or Java Script code.

7. Going back to the code from my own blog badge at the beginning of this tutorial, copy the Html code and paste it into the large rectangle as shown below...

When I'm working with a lot of sidebar gadgets, I find it easier to temporarily title new ones so I can easily move them to their final location so let's do that too while we're here...

8. Type a simple title in, something easy like "new button" works and you can always change this or delete it later...

9. With that completed we can now click "Save"...

10. You will now see your new gadget present on your blog's Layout...

Now let's reposition this new gadget so we can remove that temporary title...

11. By clicking on the gadget with your mouse, you can easily drag the object to a new location within your layout...

12. Choose where you would like to place your new button and then click the "Save arrangement" button...

13. With that done, you can click on the "Edit" link within your new gadget to remove the temporary title...

14. Just be sure to click "Save" to keep your change...

15. Your new gadget will now be titled by it's default gadget title...

16. That's it! Congratulations ~ you've now added an Html/Java Script gadget! You can click the "View blog" button to view your new item...

Enjoy~

How to: Install Sidebar Tags

In this tutorial we're going to cover how to install and move sidebar tags on your Blogger blog.  The sidebar area is the column or columns to the side of your main posting area.  The process for working with sidebar elements is surprisingly easy and opens up a world of possibilities for customizing your blog.

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~

How to: Add an Email Link to a Sidebar Image

In this tutorial we'll add an email address to a sidebar image link. The process is easy and you needn't know any html coding.

Before we begin you'll need to have an image you will use to link to your email. You can select from any of my free sidebar tags which can be found here. Once you've decided what image you want to use for your email link be sure to save it on your computer in a location you can easily find again later in this tutorial.

✻Remember, you can click any of the images to enlarge for a better view✻

And now we'll begin...

Log into your blog and click on the "Design" link found in the top right corner...

Working under the "Design" tab, click on the "Add a Gadget" link in the sidebar area...

In the pop-up window, scroll down to "Picture" and click the blue plus symbol...

In the next pop-up window we will work with a few features. The first is to uncheck the "shrink" box, this will ensure your image stays it's proper size...

Note: all of my free sidebar tags are sized at 200 pixels wide and fit within the standard sidebar area size. If you are using an image other than one of my sidebar tags then you may need to reduce your image down and this would require keeping the "Shrink" box checked.

Next we will add a sidebar image to be used in your sidebar so begin by clicking the "Browse" button...

Navigate to where you saved the image you wish to use, click on the image, and then click "Open"...

With the image now added we will then work on adding the email link. Begin by removing the "http" in the "Link" box...

Next, type in "mailto:" in the same "Link" area, being sure to include all of the letters and the colon...

Next, as in the example below, type in your exact email address, without including a space, like so...

You are now finished with this section so go ahead and click the orange "Save" button...

Congratulations! You have successfully added an email link to a sidebar image. To view your new button click on the "View Blog" link...

There you have it...

This email link button, when clicked, will allow individuals to send an email to you directly from your blog. This type of link works for most people using commonly known email programs such as Google.

Enjoy!

Now all of my tutorials in one fabulous package for one low price

$10.95 buys the complete set of 25 digital tutorials
in PDF format ~ including my exclusive three part series

"How to Create Your Own Blog Background"

available only with this purchase.

Click the book above to purchase from my Etsy shop..