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 Add a Post Signature

If you're looking to add a decorative signature to your blog posts this tutorial is for you. Basically we'll be installing a snippet of code so that a signature image will automatically show up each time you write a new blog post.  This saves you the step of manually inserting a signature image with each posting.

Before we begin: You will need a signature image - preferably a PNG with a clear background so that any color background show through. You can either create an image using a graphics program like Gimp or Photoshop or you can purchase a signature image from a designer like those I offer in my Etsy shop.

If you make your own you will need to host the image with an online image storage company like Photobucket which will supply you with a direct link to the image. This link will be used in combination with some Html code so that your signature shows up with each blog post.  Note that when you purchase a signature from a designer, most will host the image for you and supply you with the completed code.

Now that you have a link to your signature image, let's begin...

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

2. Next click on the "Settings" link in the left side link area...

3. Now click on the "Posts and comments" link...

4. Within this section, locate the second option down "Post Template" and click on the "Add" link...

A rectangular area will appear, this is where you'll insert the Html code for your image signature.

5. Copy the code below and paste it into the box...
<p> <image class="centered" alt="post signature" src="SIGNATURE URL"></image></p>
6. The box should now look like this...

7. Then replace the words "SIGNATURE URL" with the address of where your own signature image is stored. I'll insert mine in the example below...

 8. With you own link now inserted into the code, you can now save your changes by clicking the "Save settings" button...

9. Your signature image will now appear the next time you go to write a new blog post. To confirm that your signature image is correctly installed you can click the "New Post" button to open the new post screen...

10. There your signature image should appear just as mine can be seen below...

11. If instead you see a broken image symbol...

then the link to your image may not be installed properly.  You'll need to return to the "Posts and comments" area and double check each character to be sure the link is correct and none of the code was accidentally left out.

Because the signature image was installed today, it will not appear in any previously written blog posts.  If you would like to manually add an image signature to a specific blog post then follow the steps below.  If you're happy with the results so far then, Congratulations!

Special Note: At the time I am writing this, Blogger is currently experiencing a technical difficulty with displaying post signatures and preset signatures are showing up as a broken link. If you are experiencing this issue then for the moment you will need to manually install your image signature in individual blog posts which is covered below.

Manually adding a signature image~
To manually add an image signature to a blog posts follow the steps below.

1. Picking up directly from where we left off, click on the "View blog" link at the top of the page...

2. Click you mouse within the box area and then click on the "Insert image" symbol...

 3. A pop-up window will appear, click on the "Choose files" button...

4. Navigate to where you have your signature image saved, click on the image and then click...

5. In the next view click on the "Add selected" button...

6. You should now see your signature image inserted into your post...

7. If you want to change the location of your signature, simply click on the image and an option bar will appear....

8. Select where you would like your signature to appear and you image will move to that location... 

 That's it!  Once you've completed writing your blog post you can click either the "Save" or "Publish" button to continue.

Congratulations!

Enjoy~

How to Add a Favicon Icon

Today I'd like to talk about a new feature I noticed while roaming around the back end of my blog. I noticed a new item I hadn't see before, there under the "Design" tab was a new goodie titled Favicon.

Now, for those of you who aren't familiar with this term, a favicon is the little icon associated with a website. It can appear in the address of a website or in your browser's favorites & bookmarks area. Mine is the little plumrose inserted above as an example. 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...

Blogger has now simplified the process of adding a favicon icon to our blogs; where we once had to dabble in the html code section of our blogs, we can now easily upload an image and voila! Our own personal favicon appears. So, if you're interested in adding your own favicon to your blog simply navigate to the "Design: tab of your blog and click the "Edit" link next to the Favicon object to upload an image. I'm not sure if there are size minimums as favicons are usually very small, so here's a link to generate a free tiny favicon online ~ Dynamic Drive Favicon Generator.
Enjoy~

How to: Work with "Pages"

Working with "Pages" is one of the key parts to organizing our blogs. It enables us to mimic websites by creating individual pages to feature key information. Common Page titles can be "About Me", "Gallery", and "Contact Me", just to name a few. Pages can also be used to features items for sale and by installing Paypal cart buttons we can turn our blogs into pseudo shopping carts.

Working with the Pages feature of Blogger is fairly easy and involves two parts; creating the page and then working with the Page gadget to display the page. This tutorial covers both aspects of this handy built in tool.

When you see written links or images links, like those displayed at the top of this blog, chances are you're see the "Pages" tool being utilized.  When you click on the link you're being taken to an individual page on that blog. In this tutorial we'll cover how to create a page and how to display a link to that page on your blog.  This will enable you to create your own set of written links on your blog. Please note, this does not include how to create image links as they are created using custom images, html code, and mathematical calculations. If you are interested in this type of custom navigation then please contact me for more info.

1. Begin by logging into your blog...

2. and from the main page, click on "Design"...

3. You are now on the "Template" page of your blog...

4. To begin creating "Pages" click on the "Pages" link found in the left side link area...

5. Here you'll see a view of all of the "Pages" you have created for your blog. In this case, I've never created a page so there are no titles present...

6. To create our first page, we'll click on the "New page" button in the top navigation area...

7. In the next view you will see and area that looks identical to the posting area of your blog...

8. This is where you can add information and most importantly, create a title for page.

Please note: If you need help learning how to use this area, be sure to view my video tutorial on "How to Write a Blog Post".

9. For now we're going to add a title to the page and add some simple text, so begin by clicking in the "Page title" area and type the title you want for your page...

Please note: This title is what will appear in your navigation area too so keep your titles short and to the point.

10. Next click in the text area and type in some information...

11. Once you're finished inputting your information you can click the "Publish" button...

12. Now that your "Page" is created you will see the title appear in the list of "Pages"...

13. Each time you create a new "Page" the title will be added to the list...

14. Remember, all we've done so far is create the "Pages", we'll now need to add them to our blog. This is done by working with the "Pages" gadget which is found in the "Layout" area of your blog so click on that link in the left link section...

15. Choose the area you would like to add the list of "Pages" (in this case I would like them to appear just below my banner) and click on "Add a Gadget"...

17. A pop-up window will appear...

18. Scroll down to the "Pages" gadget and click on the blue + button, or title...

19. Here you will see all of the "Page" titles you created and an additional title, "Home". This "Home" link is very important because it helps visitors navigate your blog to find their way back to the main page of your blog...

20. Within this area you can

• rearrange your titles by clicking and dragging them into a new order
• Retitle the gadget from "Pages" to another name like "Blog Links"
• and Add a new linked page

21. For top navigation I like to leave the title off, so once you have everything set the way you like, scroll down and click the "Save" button...

22. You will now see a new gadget title appear in the "Layout" section titled "Pages"...

23. Any time you wish to make changes to this gadget you can return here and click on the "Edit" button....

24. To view your new gadget in place on your blog, click the "View blog" button at the top of the page...

25. Congratulations! You've successfully added "Pages" to your blog...

Whenever you wish to add pages to your blog, simply return to the "Pages" area and create a new page. The new page title will automatically be added to the "Pages" link list.

Enjoy~