Alrighty then! A bunch of you have asked...and I have shown...how to add a favicon to your blog URL. If you look up at mine on this page, it's a gun and magnifying glass. It goes along with my website http://bonniescalhoun.com, where I am going to integrate this page like the rest of my blogs.

(Update: this is still a valid method for your website, but Blogger has now added the ability to your Page Elements page. At the top left corner of the Page Elements layout, click the edit button on the Favicon element, and upload your image...Viola! If you are using a customized template that doesn't have Page Elements, you may still need this method for your blog!)

LOL...the favicon is that little itty bitty image. They are only 16 pixels by 16 pixels. So when you are creating one use a square image so that it reduces correctly.

First you are going to decide on what image you want, and using your favorite imaging software I's say reduce it to at least 50px X 50px then you will get an idea of how it is going to look small. Take that image and go over here to Dynamic Drive-Favicon Generator and input the image. It will create a favicon for you.

Now if you are uploading it to your website (not blog) just follow the directions on the lower portion of the Dynamic Rive page. (no sense rewriting what they have). If you want to use the favicon on your blog in place of Bloggers Orange B, follow these directions.

Upload the favicon to a blog post, label the post as "Favicon" and save it as a draft. You are doing that to get the image onto the Blogger (Picasa) servers. Now you are going to create the code that you need. Copy this code:

<link href='http://3.bp.blogspot.com/-eO5-qj5k9V0/TfJs66ovG3I/AAAAAAAAD64/OlazI7MKM/s1600/favicon.bmp' rel='icon' type='image/x-icon'/>
<link href='http://3.bp.blogspot.com/-eO5-qj5k9V0/TfJs66ovG3I/AAAAAAAAD64/OlazI7MKM/s1600/favicon.bmp' rel='shortcut icon' type='image/x-icon'/>

The red links are the part that you are going to replace with your own image link from Blogger. It may be an .ico or a .bmp, that's all right. The one thing that you have to watch for when creating this code is that if you create it in Word.com it will add a bunch of funky coding to it, and even "smart quotes" Blogger...nor the rest of the world like smart quotes, so be sure to create the code in NotePad, and check all the quote marks or apostrophes to be sure that they look like the ones I have in the picture :-) Click on the picture and it will open larger so you can see it clearly.

Now we are going to add them to your template code. Click the Design Tab, then the Edit HTML link. It will open up the box of code for your template.

Now right here I must stop you and say, before messing with your template... "BACKUP A COPY" of your template to your computer. Right click on the code box and "select all", then open a NotePad doc (NOT Word.doc) and paste the template into NotePad and save it on your computer where you can find it in case you have a catastrophic failure of your brain connecting with your fingers on the keyboard :-).

Okay...now that we have that out of the way...use Ctrl-F to open a Find box at the bottom of your screen like in the picture to the right. You are going to type </head> into the find box and click "next". It will light up the word just like it does in the image, Then you are going paste in the code you just created.

Now...another important point...Click the PREVIEW button to see the change. If the preview shows the Share buttons at the bottom of the post, then close the preview and click Save Template. As long as it gives you a preview of your blog the favicon will show up in a while if it doesn't immediately. So close the Preview and click Save Template!

If the preview does not open...or the buttons are not there when the preview does open...click DISCARD Edits.

And start again. If you get stuck...email me.

Blogger has created a wealth of standardized templates, and out in the Blogosphere you can find a wealth of Blogger XML templates (Some of my favorites places are in the right sidebar). But I've noticed that a lot of them don't activate the Share Buttons for posts. You can see mine at the bottom of this post.
This code is built into all XML templates, so all you have to do is activate it. First off let's go check to see if you have the function turned on. Go to your Design Tab. The Page Elements page opens by default. See the edit button on the Blog Post box (#1) in the image to the left here?
When you click there it will open up a "Configure Post" box. That has a plethora of things that you can turn off and on for your posts, and at the bottom of the page it allows you to organize how they are laid out on the page. (Now sometimes that part doesn't work at planned, so that's the reason for the res of this post.)

Once you have the Share Buttons checked as in the image to the right, go check your blog page. If you see the little list of boxes that I have at the top of this post...or below my signature...then you're good to go! If not *sigh* then we have some more work to do. We're going into the template HTML.

I know...I know ...this is not for the faint at heart, but I have confidence that you can do it, if you follow the instructions to the letter. First thing, click the Design Tab, Then click on the Edit HTML tab. (You will see that marked as #2 in the image above.

When the box of code opens you are going to check the little link above the box that says "Expand Widget Template.  Now right here I must stop you and say, before messing with your template... "BACKUP A COPY" of your template to your computer. Right click on the code box and "select all", then open a NotePad doc (NOT Word.doc) and paste the template into NotePad and save it on your computer where you can find it in case you have a catastrophic failure of your brain connecting with your fingers on the keyboard :-).

Okay...now that we have that out of the way...use Ctrl-F to open a Find box at the bottom of your screen like in the picture to the right. What we are going to look for is the post-footer lines (designated lines at the bottom of a post). There are usually 3 of them. Write  post-footer-line post-footer-line-3 in the Find box (like I have circled in green.) It will actually find and highlight those words. Those words are ABOVE the words that are highlighted in blue because I skipped that picture to save space. When you find the footer-line 3...or 2...or 1 (You can experiment where you stick it in those three lines), you are going to insert this section of code:


Then insert the code right where I stuck it in the picture. (The piece of code is in blue.)

Now...another important point...Click the PREVIEW button to see the change. If the preview shows the Share buttons at the bottom of the post, then close the preview and click Save Template.

If the preview does not open...or the buttons are not there when the preview does open...click DISCARD Edits.

And start again. If you get stuck...email me.

Hi folks! Yes...I've been remiss at posting here but I've not had enough interesting things to share. That is going to change. I've got a whole new group of people that want to learn to blog, so here we go again.

This post is going to give you a technique for finding things easily on a page or in HTML code (which is what we mainly work with here). I did know how to use this but someone just pointed out that it would help newbies find the places that I want them to go to in code...much easier than scrolling. (Sheesh...sometimes the simplest things elude me.) ROFLOL...but I can write code like nobody's business :-)

Anyhow...just click Ctrl-F (ROFLOL...F is for Find, so that makes it easy to remember). A little light blue bar will appear at the bottom of your screen like in the image to the left.

I have circled the phrase I inserted in the search box, and you will see where it found the line in the Template HTML. You can make the image larger by just clicking on it! So that way you can see it clearly.

This neat little trick also works on just regular webpages when you are looking for a particular term or word in a long page of text.

Oh...and as a shameless plug for myself I have inserted my new signature that I use as a fiction author. ;-) Blessings to you all.

A nice young lady asked me to help her make a Blog Button, so I thought this would be a good learning lesson!

What we are going to do is use the image that I have created here to the left and turn it into a clickable button in a text box do that people can grab your button to put on their blog

First create the image, and upload it to a Blogger post, click the box for "No Layout" before you upload it. Save the post as a draft.

That will be the image that sits on your blog (Your personal image doesn't need to be clickable because it resides on the place that they are going to click to) so we won't add the blog link to yours.

To make a clickable image in the text box that you put below your personal image so that people can grab the code. Follow these steps:

We will be using the code for this blog's button for our example!

Take the image code, remove the blogger address (code highlighted in grey) that is in the first set of brackets You will keep the code that starts with <img...


<a href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s1600-h/Blogbutton.jpg"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a>


In front of that code you will add the link for the place that you want it to click to...written in this format: <a href="URL of Blog"> (Added in the grey highlighted code).


<a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a>



Then wrap that whole piece of code in a textarea box, using <textarea name="HTML for Picture" rows="4" cols="20"> at the beginning....and </textarea> at the end.


<textarea name="HTML for Picture" rows="4" cols="20"><a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 186px; height: 126px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKdYkaG4oIvSN5oeqPw7TVAHdgYOyhqArfokYDsP8kctZNEHffzbr2mUexmFj9sQFeSViIl0SuTQ3-kluMJAELdT4_6-MZ6JtdLtpPg8gakNlSB0krUqV34EQLkWYs_VT_OTcJ/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415908285347859266" /></a></textarea>


The rows...and columns (cols) can be changed to change the height and width of the box.

Then take the original code that you got when you uploaded the image, and add the textarea box underneath it, and viola! It comes out looking like this on your blog:



<a href="http://howcanidothat.blogspot.com/"><img style="cursor:pointer; cursor:hand;width: 180px; height: 122px;" src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhwBckeA1fiVtIBHG612Jt2mSQid7LGkoD1rSsNHeBxQ9HPbstW7-KsX5IriUS2mXGHa5jtracsNVMcaDD8ibIrKK-Y28nG9HrI6B9yXzZNE4m1aHRDMtII5Spr_u0dJKW9n6Cm/s320/Blogbutton.jpg" border="0" alt=""id="BLOGGER_PHOTO_ID_5415917550402078946" /></a>

by Bonnie Calhoun

Hi guys and gals! It's been a while since I had something new to teach you! But I just helped a gentleman with this last night so I thought I'd pass on the info.

What we're going to learn today is how to customize a table to work in Blogger, and all the cool things you can do with it.

This particular table that I'm going to show you how to make has three columns (that go across) and five rows (that go down) on the page.

That is what it will look like, and this is the code that you copy to create it!


<style type="text/css">.nobrtable br { display: none }</style>
<div class="nobrtable">
<table style="text-align: left; width: 460px;" border="1" cellpadding="2" cellspacing="2">
<tbody>
<tr>
<td>Day</td>
<td>Food</td>
<td>Child</td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>Monday</td>
<td>Hot Dogs</td>
<td>Mike</td>
</tr>
<tr>
<td>Tuesday</td>
<td>Chicken</td>
<td>Mary</td>
</tr>
<tr>
<td>Wednesday</td>
<td>Hamburger</td>
<td>Paul</td>
</tr>
</tbody>
</table>
</div>


Now! What you can do to add customization:

If you want more columns(across) across the table, add more table data units, like this. Note: You must add the same amount to each row!

<tr>
<td></td>
<td></td>
<td></td>
<td></td> .....notice extra td unit!
</tr>


If you want more rows (going down the page. Add more table rows (tr).

<tr>....this is the beginning of a tr unit
<td></td>
<td></td>
<td></td>
<td></td>
</tr>.....this is the end of a tr unit


If you want the table to be wider or narrower, change the pixel number in the width unit:
width: 460px

If you don't want a border, turn the border number to zero:
border="0"
Note: the higher the border number, the thicker the border.

And the cellspacing numbers tell you how many pixels between the cells of the table, while the cellpadding tells you how many pixels between the sides of the cell and the writing that you put in it!
cellpadding="2" cellspacing="2">

Have at it, and have fun!!

by Bonnie Calhoun

Hi folks! Another tip has been pulled to the forefront of my memory by an inquiring blogger...the necessity of using target="_blank".

LOL...don't look at me like that...I'm not talking dirty :-) Using target="_blank" in an outgoing link on your blog or website causes a new browser window to open when the link is clicked. It is desirable for two reasons.

First, the visitor is still on your website when they close that window after perusing, and they don't have to navigate back to your page.

And second, it helps to decrease your "bounce" rate.

LOL...I knew I'd get your eyes to roll up in your head at least once in this post :-)

Bounce Rate is defined as how many times a visitor "bounces" away from your site and comes back. If you are involved in increasing your SEO (Search Engine Optimization), the bounce rate on an entry page can help to determine how effective it is at grabbing people's attention.

Now before you running screaming from the room yelling, "SEO, SEO!" I must add caviar...LOL...I mean...a caveat. Bounce rate is only an SEO factor is you have a site for commerce. If your site is about ordinary stuff like blogging, news or just plain information you really don't have to worry.

The neat and conclusive reason for adding target="_blank" is to keep people on your page!

Write your links like this:

<a href="URL of SITE" target="_blank">

by Bonnie Calhoun

Man, oh man! I'm just full of posts lately! *snort-giggle* I've been helping a lot of friends get their blogs redesigned.

Well here is a problem I've noticed on several of my friends blogs. When they re-install their templates, they can no longer get their header images to show. Well I've come up with a work-around....LOL...and yes...you have to go play with your HTML!

I'll turn ya'll into template gurus yet!

This problem is especially prevalent on the Scribe template. When you switch templates the Header gadget should stay, but in the Scribe it doesn't...so go figure!

Here's how we're gonna fix it. We're going to delete the present Header element from the template and add a new one. LOL...I think the old one has a bad case of the ick! But first we have to allow the Header section to allow another gadget (You will notice that there is no "Add a Gadget" section on the Scribe Header.

Here's where we go play with HTML. Start at your Dashboard....go to the Layout tab...then click the Edit HTML link. We are going to scroll down to the highlighted section of code in the below image. If you can't read what it says, click on the image and it will open in a larger window.



What you are going to do is change the line where it says...showaddelement "no"...to "yes" This will allow the "add a Gadget to show up in the header section of your template. And you are going to remove the <b section that has your bad Header, so that that section looks like this when you are done.



Now you will click "Save Template". It will tell you that you are deleting a Widget, like in the below image. That's okay...click yes!



Now go to your Page Elements page...see the "Add a Gadget" in the Header section. Click it! Scroll all the way to the bottom of the list and pick Page Header.

When it opens, click for the image to show "instead of the title and description" Then either find your image on the internet at your storage site, or use the top link and upload it from your computer. Then click save! Viola! You have your header back!