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: Push (or Center) a Blog Header

This tutorial is to serve as an alternative to my other tutorial titled How to: Center a Blog Header.  Although that method works well in most cases, it can fail to center if used with other enhanced template features so if you find your banner image is not centering properly then go ahead and give this simple method a try.  The code below is not meant to be used in combination with any other code for centering a header so be sure to remove any prior "banner centering code" before moving forward.

To use this tutorial you will need to have a banner already loaded onto your blog.  If you need help installing a blog banner then follow this tutorial: How to: Install a Blog Header.
With a banner in place you are ready to move forward with "pushing" your blog header, so let's begin...

1. Log-in to your blog click on the "Design" link in the top right corner link list...

2. This should bring you directly to the "Template" page, in the left links list...

3. Click on the "Customize" button...

4. We are now in the "Template Designer" area...

This interface offers you the ability to easily change aspects of your blog.  We will be adding some code to the "Advanced CSS" area so let's navigate to that area...

5. Click on "Advanced" at the bottom of the left link list...

6. Now using the scroll bar...

7. Scroll down the inner link list until you see "Add CSS"...

8. Click on that link to be taken to the CSS area...

If you've previously inserted any CSS code then you will see it present in this area. If you have not then this area will be empty on your blog.

9. Now copy the code from the scrolling box below...

#header-inner img {margin: 0 auto 0 30px;}
10. And paste it into the CSS area...

and you should see your banner image immediately shift to the right.

11. If you wish to move it over further to the right or left you can easily do this by either increasing or decreasing the last number in the code.  So, if the setting is at "0", then your banner will be all the way to the farthest left position it can go...

12. And if you increase the number to say "100", then you will see your banner image move way over to the right side...

13. Personally, I think somewhere between 30 - 50 works best but test it out and see what looks best on your own blog....

14.  Once you have your banner image set where you want it, then save your changes by clicking the "Apply to Blog" button...

That's it! You've now successfully centered your blog banner.  If you decide to change the dimensions of your blog layout in the future, you can simply return to this area and increase or decease that last number to recenter you banner image.

Enjoy~

How to Add a Favicon to Your Blog

With this tutorial I'll show you how to easily add a favicon to your blog. A favicon is the little icon associated with a website. It can appear in the address bar when you're visiting a website or on a browser's tab or in your browser's favorites or bookmarks area.  Blogger's in a large white "B" surrounded by orange as show in the example below...

These icons cater to the part of our brains which absorb symbols and icons, as described by Carl Jung, but we'll save that topic for another day.  For bloggers and indie business, they're a great way to personalize your blog and an easily recognizable symbol is you select something simple that personally relates to you and your blog.

Before we begin ~ you'll need to select an image to use for your own favicon.  It should be something simple like a flower, butterfly, or any other element and image size should be small and square since favicons are square and you don't want yours to appear cut-off. I've never tested whether there are size limitations and favicons are usually very small at 16 x 16 pixels, so here's a link to generate a free tiny favicon using your own image ~ Dynamic Drive Favicon Generator.

Begin by logging into your blog, then click "Design" link found in the top right corner of your blog...

Next click on the "Layout" link in the left side link area...

Locate the "Favicon" rectangle and click on the "Edit" link...

A pop-up window will appear, click on the "Browse" button to begin locating your favicon image...

Navigate to your image, click on the image and then click "Open"

Now click the "Save" button...

That's it!  Your new favicon is now in place...

Congratulations!  Often times the actual change won't take affect in your browser until you've closed it and reopened so if it doesn't show up right away in that view just be patient.  As long as it shows up in the "Layout" view, your favicon is properly installed.

Enjoy~

How to: Center a Blog Header

In this tutorial we will walk you through the steps for center a blog header (or banner as it is also called). If you need help installing your blog banner then please view this tutorial first: How to Install a Blog Header  If you need a banner image I offer several free versions which you can find by browsing through my A-Z Theme List.

Below is an example of a blog banner image in place but obviously set off center. The default setting for most Blogger templates is for the banner image to show up toward the left side of your blog as shown below...

So let's begin...
1. Log into your blog and then click the "Design" link found in the top right corner...

2. In the next window click on the "Customize" button...

3. This will open the Blogger Template Designer which you can see an example of shown below...

4. Click on the "Advance" link in the bottom of the left side list...

5. Using the inner scroll bar...

6. Scroll down to the "Add CSS" link...

7. This is the area where you can add a snippet of CSS code to tell your blog to center the header...

8. Now copy the code below and paste it into the rectangle...

#Header1 {width:900px;margin:0 auto}
9. Now it should look like this...

Within the code you'll notice the number "900" ~ this is the standard size for all of my wide banners.  This size, when used in combination with the "Shrink to Fit" option when uploading a blog is how you can achieve the best fit for your blog.  Playing with both of these settings in different combinations will help you achieve the best look. 

10. To check your blog width, click on the "Adjust widths" link in the far left link list...

11. In case of my sample blog in this tutorial the blog is set to 860 pixels wide...

12.  So I'll jot this number down and return to the "Advanced" area by clicking on that link again...

13. Now, we can change that "900" to "860" as shown in the example below...

14. And preview the changes in the preview area below to see how the changes have taken affect...

15. In the example above it appears the banner has not moved.  This is common and you may need to play around with the number a bit until you begin to see the results you're looking for ~ you can see a few examples of making changes in the screen shots below...

:-----In this example the number is too small so the banner is cut off-----:

:-----In this example the number is too big so the banner is still sitting to the left-----:

:-----In this example the number is just perfect & the banner is centered-----:

16. Now that you have your banner code in place and the image is situated just where you want it, click the "Apply to Blog" button to save your changes...

That's it!  You can now click on the "View Blog" link to view your blog and centered banner.  Remember to use this tutorial in combination with my "How to Install a Blog Header" to find the right adjustments and fit for your own blog.

Enjoy~