I put together a tutorial on how to get an e mail button and place it on a blog and included some other information as well.I did this for a new blogger I know, but I thought maybe others could also use it:
I've written a step by step tutorial for a couple of blogger topics that you may find helpful. Please read through this thoroughly before you begin. You can create a new blog for experimentation, rather than using an existing one; this will protect your existing blog from loss or corruption. You may want to bookmark the links I've included, for future use.
To put an e mail button in your blog:
1) Open the Template, and decide where you want the button to appear. Scroll to that location in the template and click the mouse. (If this step doesn't "stick", just scroll back down to where you want your button when you come back to the Edit Template tab in a moment.) Open a new tab in your browser. (If you aren't using a tabbed browser, just go to step 2.)
2) Go to http://www.dynamicdrive.com/emailriddler/ . The purpose of this step is to genetate code that will encrypt your e mail address, making it harder for bots to find your e mail address. This will reduce the possibility of getting spam in your e mail inbox, so don't skip this step. Put your e mail address in the first text box. You can enter whatever you like in the second Text box, but I usually just leave the second and third text boxes empty. When you've put your e mail address in, click the "encrypt e mail" button. The code will appear in the "Generate Script" box. When the code appears, click the "select all" link at the top of the box. The code will highlight. Right click your mouse in the generated script box with the code highlighted, and choose "Copy." This step copies the script to your clipboard in Windows.
3) Return to the tab that has your Template editor. Find the place where you want your e mail button to appear, and click your mouse if necessary (see step 1). When you have the desired location, just click Control+V, to copy the script code to your template.
There will be a line in the script that begins, "document.write(... Immediately after the > following the string of numbers in the link is where you want to put the code for your e mail button. First you need to generate that code.
4) Open a new tab if you need to, keeping your Edit Template tab open. Go to
http://www.nhacks.com/email/index.php . This is the E-Mail Icon Generator. It works for G Mail, and many other e mail clients, including SBC. you can open the list box to choose one if you don't want the G Mail button. Put your e mail address (everything before the " @ " sign in the first text box. Select your e mail client (G Mail, Yahoo, SBC, etc) from the second box, and the correct extension from the third. For my Gmail, I enter my G Mail account name "AngelSong214" (which is the way I want the text to appear on the button); @ "Gmail" and (dot)com from the third box. Then click 'generate.' The button will appear. Now it gets a bit tricky.
There is a url displayed that is a direct link to Nhack. You may or may not be able to use this link, because it's a "hot link". Some sites frown on hot linking. You could also choose to use the second URL. Or, you could just choose to save the button to your hard drive, which is also what I've done.
If you save the button to your hard drive (recommended), you will need to upload it to use it. There are any number of upload sites you can use; one that I like is http://www.ripway.com/ . Note that on Ripway (like most of these sites) you will need to register first. So enter your registration info, and just follow through. On Ripway, there are some nag screens; you can just cancel out of those and it will still work; even if you have to select an offer to proceed, you can always cancel later. When you've registered, log in to Ripway. It will say, "click here to view your files." You don't (of course) have any files yet. So click the Upload button.
Browse to where you saved the e mail button on your hard drive. I just saved mine on my desktop so that it's quick to find. When you've got it located, click "open". the path will appear in the text box to the left of the browse button. Click the upload button on the right at the bottom of the window. When it's finished uploading, you can view the file. Once again, you will see a direct link and an alternate link. Choose either of these links, and copy it. Then return to your Edit Template tab.
On that "document.write" line in the encrypt script, go to the > at the end of the line, just before the close anchor tag. Put your cursor immediately after the >, and click the mouse. Now, you will need to put an image source tag in there, so just type, < img src =" followed by the link to your image, and without the space between the < and the img. Now paste the link that you copied from Nhack. This is going to be an open tag; no close is needed for it. Immediately after the " in the image source tag you just opened, click Control+V to copy the URL for your uploaded button image at Ripway. Put a " after the .png, in front of the close anchor tag. Now hit the Preview button on the Edit Template window. When your blog loads you should see your new e mail button, and you can click it to ensure that it's "live." If so, go back and hit Save Template Changes on your Edit Template Window. Republish your blog.
Make a Backup!!! of your Blogger Template...
You may want to also make a backup of the code (links, 'stuff'...whatever) that you've added to your template. To do this:
Open the Template tab. Scroll down to the section(s) where you've placed your edits. Highlight and copy each of your edits, one at a time or in a group. Open Notepad, Word Pad, or whatever text editor you are using. I use NoteTab Pro. NOw paste (Control+V) each of your edits (or the group) into a new, blank document in the text editor. Save the file to your hard drive. That's it. Now, you can just copy and paste the file back to any template you like if you need to change your template. As you update your links in your blog, repeat this process so that everything is current. You can also copy the entire template by copying everything in the Edit Template window and saving it to a text file. Comes in handy if you muck up your template.
Read More...