More and more smug gallery owners are taking the step of customizing a blog to match a SmugMug site. There is currently information scattered in several threads in this forum. Based on the number of questions I've seen recently I thought it might be helpful to have a thread devoted to getting a blog (on www.blogger.com, ususally accessed as <name>.blogspot.com) to match a SmugMug site from an overall look-and-feel standpoint.

My experience is with blogger, but it's quite possible that the steps I've listed here could apply (in a general sense) to other blog hosts as well. I'm sure the actual structure of other blogs will vary, but I'd imagine that some of the information could be usable.

The steps listed below should help you to customize your blog so that it bears the same look as your SmugMug site. These steps assume that you are using a navbar on your SmugMug galleries and that you want to duplicate your banner and navbar on your blog.

There is a simple way to show a blog within your smug site, and that is to embed your blog within an HTML-only gallery. If you'd like to take that approach, richW posted instructions in this post - http://www.dgrin.com/showpost.php?p=628906&postcount=4. If that's your chosen method, you're done!


But if you want a more seamless look, please continue reading.

First, some examples... it might be helpful to see some more examples of a blog linked to smug with a seamless appearance. I'm going to start a list here. If your site also plays in this game and you'd like to see it listed, let me know!

Sites with blogs inheriting the smug site's appearance:

www.denisegoldberg.com
www.carolineshipsey.co.uk
www.photoscapedesign.com
www.moonriverphotography.com
www.loricareyphoto.com
photos.lmsportspix.com
www.chrishumphreys.net

In all cases, click on the blog navbar entry to wander there, other navbar entries jump back to the SmugMug site.

A quick warning before we go on - I've only done this with sites that have a plain background. I'm sure if you're using a background image or pattern for your galleries that you'll be able to manipulate your blog to match, but these instructions are for a more straightforward match.

Warning! Blogger templates have changed. These instructions assume that you are using one of the old templates. These are still available. See the post Using Blogger's old templates for notes on how to get started with one of the old templates.

First, identify the code you'll need from your SmugMug site. You'll need

• CSS for your banner
• CSS for your navbar
• HTML for your banner (probably in the Header box)
• HTML for your navbar (also likely to be found in the Header box)
• color codes for items within your CSS (text color, hover color if specified, etc.)

Note: if you created your site using SmugMug's Easy Customizer, this code is not in the Advanced Site-Wide Customization screen. You will need to use the Firefox Web Developer Extension or an equivalent tool to find this code. If you've never used the Firefox web dev tool, there is a tutorial at http://dgrin.smugmug.com/gallery/1354921. You will find your code on the CSS tab with the name starting user_<your identifier>-stretch.css, and in the info brought up when you Edit HTML (again in web dev).

Next, head over to your blog.

Before you start making changes to your blog, go to the layout screen and make a backup of your current blog template. There is a backup facility within blogger, but I usually just copy all of the code in the Edit Template box and copy it into a simple text document.

To get to the CSS and HTML in your blog, click the Template sidebar entry. You'll see a page like this:

Click Edit HTML under the Live on Blog image. That will give you a screen that looks like it's doing something, but it is really waiting for you.

Click the Proceed button, and you will then see the edit html box:

Something you might want to consider is creating a second blog for experimenting. You can them make all of these changes in a blog that isn't currently known to people, and when you get your "play" blog set the way you like it you can just copy that entire HTML box over to your real blog. That's what I did when I started experimenting.


I created another blog. My real blog is at http://denisegoldberg.blogspot.com. I created a blog called http://denisegoldbergplays.blogspot.com. I copied the HTML from my real blog to the play blog, and I created a couple of blog entries in that play blog. That way I could experiment until I was happy and not worry about the world seeing my sometimes messy transition.

If the blog template you are using doesn't come close to your smug look, you might want to select a different template that comes closer to matching before you start this customization exercise.

I started with a clean white background in both my blog and my SmugMug galleries.

The first thing that I changed in my blog was to remove the blogspot search / login bar at the top of the page. Luckily richW cracked the mystery of how to remove that bar. Jump over to the post here and follow Rich's instructions to remove the bar. Then jump back here to continue your customizing. Or... here's the code that needs to be added to your blog template to remove the blogger bar:
Under 'edit template' look for the following:

/* Header */ in the css section, then add: #navbar-iframe { height: 0px; visibility: hidden; display: none;}

The next step is to start matching the text colors and behavior. Go to the Fonts and Colors page on the Layout tab for your blog.

You can make your first changes here by clicking on items in the list on the left and then either selecting a color from the palette or entering the hex color code that matches the colors in your galleries.

Continue the color selection with all of the elements in the list that you want to change.

As you continue to scroll the list of elements, you will move on to the fonts that you want to use. Set the fonts as desired.

If you'd prefer, you can specify your color and font choices directly in the Edit Template box on the Edit HTML page within the Layout tab. The colors and fonts can be found at the top of the template.

As you scroll through your blog's template, you will start to see CSS.

I found an entry #myBlogTitle. That's where the title was displayed in my blog template. I wanted to replace that title with my SmugMug gallery banner/navbar, so I set #myBlogTitle to {display: none;}

I've seen the title displayed in most blogs in the #header entry in the blog's CSS. Look through your template, find #header, and set it to display: none;

Right after that is the #navbar-iframe entry that I changed based on richW's notes.

That seems to be a good spot to paste your CSS for your banner and navbar that you copied from your SmugMug site.

After my banner / navbar CSS, I also pasted in CSS to define the hover behavior. In my case, this is what I copied from my SmugSite:

 
a:hover /* select all the link hover states on the whole site */
  {
   color: #c0f !important;  /* change the color to grape */
   text-decoration:overline !important;  /* overline them */
}

Obviously, if you choose to add hover behavior here you'll want to copy that code from your smug customization.

Next, continue to scroll down through your template until you start to see HTML instead of CSS.

Your blog structure may be different than mine, but hopefully you'll be able to see where to paste your banner and navbar HTML based on my description.

Warning - yes, it's more than possible that your blog structure is different than mine was. Look for the <body> tag and start experimenting with placement after that. In my blog, I [B]put my navbar and banner code before the outer-wrapper and content-wrapper entries.

If you're using one of the newer (more modern?) blogger templates, look for the entry <div class='main-outer'> and place your banner / navbar HTML right before that.

This is where it is very good to be playing in a test blog. I remember needing to adjust my code placement a couple of times before I got the look that I wanted.

I found this in my template:

 
  <body>
  <div id='myBlogTitle'><h1>Denise Goldberg's blog</h1></div>

I already set #myBlogTitle to display: none; - so I just left it in the template. I pasted in my banner/navbar HTML (as copied from my smugmug customization) immediately after the code shown above. In my case, my banner/navbar code is just before <div id='outer-wrapper'>.

I looked at someone else's blog, and in her case things were slightly different - even though we had started with the same blogger template. She would need to set #header-wrapper to {display: none;}, and her banner/navbar code needed to be placed after the line

<div id="space-for-ie"></div></div></div>

and just before

<div id='outer-wrapper'>

A minor change was needed in the HTML since I don't include my full URL in the code on my smugmug site. Since the blog is a totally different site, I need the full URL for the links within my galleries.

Here's part of the code from my SmugMug customization:

And here's the equivalent code from my blog:

And - the magic is done! You should now have a blog that matches the look of your galleries.

Please note that the divs shown in the screen shots above were from my site. It's highly likely that your divs will have different names. Note the divs that you used in your smugmug site for your banner and nav - that is the code you will need to copy to your blog.

OK, OK, nothing's ever perfect - but these steps worked very well for me.

Save your template, and view your blog to see if you have the look you want. Tweak as needed.

There's a lot of information on this page, and I don't want to cause confusion by including even more here. What I'm going to do is include links to other posts in this thread that contain information that you might find useful. That way you'll be able to quickly find information even if it is scattered through the thread.

• Adding photos to your blog - http://www.dgrin.com/showpost.php?p=886014&postcount=2
• But, but... can't people steal my photos from my blog? - http://www.dgrin.com/showpost.php?p=886262&postcount=3
• Make sure to WRITE! - http://www.dgrin.com/showpost.php?p=886264&postcount=4
• Check your blog settings - http://www.dgrin.com/showpost.php?p=886274&postcount=5
• Adding a safe "contact me" email link to your blog - http://www.dgrin.com/showpost.php?p=892840&postcount=20
• Adding a random photo or slideshow to the sidebar of your blog - http://www.dgrin.com/showpost.php?p=915850&postcount=91
• Validating XML syntax (thanks to Offtopic for the tip) - http://www.dgrin.com/showpost.php?p=...&postcount=210
• Changing to a stretchy format for your blog - http://www.dgrin.com/showpost.php?p=...&postcount=217
• Adding a recent photos link to your blog (pointing back to your smug site, of course!) - http://www.dgrin.com/showpost.php?p=...&postcount=324
• Changing the look of a sidebar gadget - http://www.dgrin.com/showpost.php?p=...&postcount=332
• Adding a favicon to your blog - http://bloggertricks.com/2007/12/how...rblogspot.html. Many thanks to Barb for providing this link!
• Adding a feed to your blog - http://www.dgrin.com/showpost.php?p=...&postcount=637
• Floating a photo to the right or the left and wrapping text around the photo - http://www.dgrin.com/showpost.php?p=...postcount=1014
• Mouse-over photo changes to another photo - see blog entry http://denisegoldbergplays.blogspot....to-change.html
• Stack photos vertically or horizontal with little intervening space - see blog entry http://denisegoldbergplays.blogspot....orizontal.html
• Using a custom domain for your Blogger blog - see http://www.google.com/support/blogge...n&answer=55373
• If you're getting started in 2010 or after and are having problems with your customizations, see Using Blogger's old templates for instructions on how to get back to a simpler template as a starting point.
• blogger initially removed the ability to edit your html with their latest upgrade, but they have since replaced it with new functionality. If you've been upgraded and you want to customize your blog to match your smug site, see new blogger, changes to edit template.

Please keep in mind that this thread is intended to help you match your blog (in Blogger) look & feel to match your SmugMug site. It is not intended to answer general Blogger questions (as in how to implement specific blogger features). You may get answers to blogger feature questions, but you may not...

Important: DO NOT READ THIS ENTIRE THREAD. All of the information you need is in this first post or is linked to from this post.

--- Denise

This information applies to embedding your photos anywhere - not just in your blog.

Blogger - and I'm sure other bloggging tools too - provides a button to insert a photo into your blog.

Don't use that photo button!

Why? Because it won't drive traffic to your galleries. If someone clicks on that photo in your blog, they will see a small copy of that photo on an otherwise empty browser page.

A better approach is to use a combination of <a href= and <img src= html statements. The <a href= will tell the browser where to go when the photo is clicked, and the <img src= identifies the photo to be displayed from your galleries.

Here's an example of the code I used to display a photo on one of my blog pages:

<center>
<a href="http://www.denisegoldberg.com/Wandering-near-home/Spring-color-2011/16269227_emnc2#1262342868_CbnktP4"/>
<img src="http://www.denisegoldberg.com/Wandering-near-home/Spring-color-2011/i-CbnktP4/0/M/201104_7d_7416l-M.jpg" alt="magnolia, pink blooms" title="magnolia, pink blooms">
</a>
</center>

Where do the URLs come from?
The easiest place to pick up the URLs is from the Share button, Get a link page.The URL I use in the <a href= statement comes from the Gallery link. And the URL I use in the <img src= statement starts with one of the photo links. Then I change the -M or -L or whichever of the Direct photo links I picked up from that page to use a custom size.

Easier yet is to go to the embeddable links tab on the share page and pick up the html from there. That will give you a preconstructed <a href= and <img src= statement that when clicked will take the viewer to the photo in lightbox.

Fill in the title="" entry for mouseover text.

If you want to use a custom size you must change both of the size entries in the link you picked up from the share... get a link page. For example, change both of the highlighted Ms in the statement below to 450x450 if that's the size you want:

<img src="http://www.denisegoldberg.com/Wandering-near-home/Spring-color-2011/i-CbnktP4/0/M/201104_7d_7416l-M.jpg" alt="magnolia, pink blooms">

If you have a pro site and you want a click on the photo to go to the (shopping) cart with that photo selected, you can use the Buy link instead of one of the photo links as the URL in the <a href= statement.

I used to use the URL from the gallery link for the <a href= statement, but I changed to use the URL from the browser address bar. Why? Because Smug changed what they considered to be a bug (although it had been that way for a number of years) so the URL from the Gallery link of the Get a link page takes you to the first photo in the gallery. I find that confusing to viewers, much better to take them to the photo that they were viewing in the blog entry.

What about that odd size?
I sometimes use custom sizes because the photo fits the space better than with the standard sizes like -S or -M. See http://www.smugmug.com/help/custom-photo-sizes for more information.

Thanks, and...
And I owe thanks to both OffTopic and ivar in pointing out that you should always use alt= as part of the <img statement. From Lori's (oops! OffTopic's) note in another thread:

You should also use ALT tags for the images you post to your blog (as long as you use a relevant caption and don't keyword spam). Not only is it highly recommended by W3C (World Wide Web Consortium) for the benefit of readers who surf the web with images turned off (or blind web surfers who use a reader and therefor required for ADA compliancy), I have had some of my best search results from the ALT tags on the images I've posted to my blog.

Do you want to see an example? Wander over to my blog, and click on one of the photos. You will be taken to the gallery containing that photo.

If you'd prefer not to construct the code yourself, you can use one of the "blog" links from the Share.... Get a link page, on the "Embeddable Links" page. The links in this section are a combination of <a href= and <img src statements. If you choose to use this link, clicking on the photo will take the viewer to the Lightbox view of your gallery. Using the code I posted above will take the viewer into the gallery positioned on the specified photo. Both are good methods to link your photo.

--- Denise

Are you concerned about people grabbing your photos from your blog?

You're absolutely right, folks can do a right-click save from your blog and grab your photo. Should you be concerned about that? It depends...

If you are a professional taking people pictures where you think your subjects may be prone to grabbing images to show on another site (like myspace or similar sites) - yes, maybe you should be concerned.

If you're not a professional, you may have a different level of concern.

Here are some things to think about:

• Right-click protection on smug is only a deterrent. If a photo if viewed in a browser, it is sitting in the browser cache - and people can grab the image from there.
• If you are selling people-images and are concerned about the images being grabbed - watermark your images.
• Even if you are not selling people-images, you still may want to watermark your images. Recognize that the watermarks with the most protection are those that are splashed across the image. But that type of watermark can discourage folks from even viewing your photos. I'm well aware that someone can easily crop my corner watermark - but I'm one of those people who won't bother to look at galleries containing photos with an intrusive watermark, so I can't do that to my own photos.
• If you are sharing your photos like I am - because I want people to see them - get comfortable with your exposure. Do a right click save of one of your images in your blog. Compare the size of that file with the size of your original. You will find that the right-click-saved version is very very small. Getting a good quality print from that size file will not be possible.
• If you really don't want the exposure, don't post photos in your blog.

For me, I decided that sharing my photos and attempting to drive traffic to my SmugMug site was important - and including photos in my blog makes my blog more interesting. (Well, at least I think so.) So my decision is to share my photos.

It's all up to you.

Information on image protection (in the SmugMug home for your photos) is at http://www.smugmug.com/help/image-protection.

--- Denise

Adding a link to your blog won't be very helpful if you don't post new entries on a somewhat periodic basis. If I wander over to a blog a few times and find no new entries, I usually won't go back again.

You don't need to write every day, or even every week, but do write.

Your entries don't need to be long. An entry can be a single photo, or just a sentence or two. Or it can be much longer.

When I travel, I usually keep a journal at http://www.crazyguyonabike.com or its sister site http://hiking.topicwise.com. The "like a book" organization there make more sense to me than the "most recent first" entries of a blog. I want people to read my journal too, and I want people to know I haven't abandoned my blog, so when I head out on a trip I usually post an entry in my blog pointing to my journal. Here's a link to one of my "I'm on the road" blog entries, just as an example - http://denisegoldberg.blogspot.com/2008/06/hiking-not-hiding.html. When I get home from my trip, usually after I've created my photo galleries, I add another post to my blog about that trip. Here's the "I'm home" entry that goes with that hiking-not-hiding post - http://denisegoldberg.blogspot.com/2008/06/glimpses-of-zion.html.

You've added a link to your blog to your SmugMug site - now don't forget to write!

--- Denise

Check the settings on your blog to make sure that your blog has the characteristics you want.

To do that, log on to Blogger, enter your blog, and click the Settings tab. Click each of the options across the top of Settings and adjust the settings as needed. For example, that's where you indicate that you want your blog indexed by blogger, available to search engines, allow feeds, set the archive frequency (and indirectly the organization of entries in the side bar - mine is set to monthly). You can always change the settings later, but at least take a look and see what is available to you.

-- Denise

Oh Shoot!

I replied on the old thread. I am still learning how to use this forum, ugh! Can you check the old one? I have a few more help needed. I am not sure if I should post the reply here or not. Didn't want to spam the forum.

Thanks Denise!

~ Melanie

Originally Posted by pinaywife I replied on the old thread. I am still learning how to use this forum, ugh! Can you check the old one? I have a few more help needed. I am not sure if I should post the reply here or not. Didn't want to spam the forum.

Melanie -
You were replying to a post on that thread - and you replied in the right spot. It would be very confusing if you posted a reply in this thread to something that I answered in your other thread...

--- Denise

Denise this is brilliant, excellent to have this information all in one place.
Perhaps you would be willing to take on paid commissions to do this customization for people like me who just find it all too challenging despite being so clearly explained.

Well done and many thanks.
Caroline

Originally Posted by caroline Denise this is brilliant, excellent to have this information all in one place. Perhaps you would be willing to take on paid commissions to do this customization for people like me who just find it all too challenging despite being so clearly explained. Well done and many thanks. Caroline

Caroline -
Thank you so much for your compliment - that means a lot to me.

You're right, maybe I should consider a paid commision to help customize blogs. But for now I'll just follow my curiosity in solving puzzles.

I took a look at your site to see if I could figure out how to clarify my instructions - and I've made a couple of updates to my notes above. Luckily web dev works when looking at blogger sites too.

I find it a little odd that while it looks like you and I started wtih the same blogger template, some of the items - like the tags surrounding our headers - are different.

If you go in and edit the HTML for your blog, look for the CSS for #header-wrapper and add display: none; to the code. I'd leave the other entries there as is in case you ever want to go back to the original format. Just hide it with display: none;

Paste in your CSS as noted in my first entry.

Find this in the template for your blog:

 <div id="space-for-ie"></div></div></div>

and paste in your navbar html code (from your smug header, with the full URL in the <a href= statements) immediately following this line.

I believe that will get you your matching sites.

--- Denise

Hi Denise, I can see the code referred to below when I look at the html in webdev but when I actually go to edit the blogger template the code differs and is not there at all. I have tried pasting my navbar html in various places but cant get the banner to show. However if I edit html in webdev and paste in as you advise here my banner shows

Caroline
[quote=denisegoldberg]

Find this in the template for your blog:

 <div id="space-for-ie"></div></div></div>

Originally Posted by caroline Hi Denise, I can see the code referred to below when I look at the html in webdev but when I actually go to edit the blogger template the code differs and is not there at all. I have tried pasting my navbar html in various places but cant get the banner to show. However if I edit html in webdev and paste in as you advise here my banner shows Caroline Find this in the template for your blog: <div id="space-for-ie"></div></div></div>

Wow, that's a bit odd. Funny, all I had to go on was webdev...

Should be fine if you paste it right before the <div id="outer-wrapper">

--- Denise

Please take a look at my site and blog which Denise (and Allen & Doc) has helped me with over the past couple of weeks. I'm really thrilled with the look of both now, BIG THANKS

Caroline

Originally Posted by caroline Please take a look at my site and blog which Denise (and Allen & Doc) has helped me with over the past couple of weeks. I'm really thrilled with the look of both now, BIG THANKS Caroline

Looks great Very seamless between sites.
Would never know they are different sites.

Now more importantly, where are your feeder bird pics.

http://www.moonriverphotography.com

http://blog.moonriverphotography.com

Blogger kicks butt I had a blog at wordpress, but it's not as fully and completely customizeable as blogger is. W00p

Denise kicks butt!

Don't forget to change your blogger favicon, too:

you must have your favicon hosted somewhere, I have mine on Google Pages.

This would go right after the <head> line in your code on Blogger:

<link href='http://XXXXXXXX.googlepages.com/XXXXXXX.ico' rel='shortcut icon'/>
<link href='http://XXXXXXXX.googlepages.com/XXXXXXX.ico' rel='icon'/>

Originally Posted by denisegoldberg --- Denise

Hey Denise,

Thanks for your note; I hadn't yet subscribed to this thread.

I've got several questions...
I'm a bit confused; while I understand search engine reason for using alt= in your image source

<center>
<a href="http://www.denisegoldberg.com/gallery/5475439_pkNaq/1/334797478_t98sS">
<img src="http://www.denisegoldberg.com/photos/334797478_t98sS-450x450.jpg" alt="Revere Beach sand sculptures">
</a>
</center>

I don’t know how to take my changes and put them up on a new blog.
I can read HTML, but it's more difficult to deal with CSS and XML.

Question: can you show how to put this specific HTML in the Edit Template?

Nor did you explain what to do when you've saved everything as a text file (downloaded a blog page source), modified the file (in HTML), then need to upload your changes (in what format) to re-create your blog.

Question: can you clearly defined the steps for a changed blog upload?

That'll do it for now; I think you did a good job making this thread come alive with your post!

Originally Posted by BistiArt I'm a bit confused; while I understand search engine reason for using alt= in your image source <center> <a href="http://www.denisegoldberg.com/gallery/5475439_pkNaq/1/334797478_t98sS"> <img src="http://www.denisegoldberg.com/photos/334797478_t98sS-450x450.jpg" alt="Revere Beach sand sculptures"> </a> </center> I don’t know how to take my changes and put them up on a new blog. Question: can you show how to put this specific HTML in the Edit Template?

That doesn't go in the edit template. That html is used instead of the picture button to place a photo in a blog entry. So when you are creating a blog entry, you can use html (like that in my example above) to show your photo plus have a viewer's click on the photo to take them directly to your gallery.

Originally Posted by BistiArt Nor did you explain what to do when you've saved everything as a text file (downloaded a blog page source), modified the file (in HTML), then need to upload your changes (in what format) to re-create your blog.

The only reason for saving the blog template as a text file is in case you make some bad changes to your blog template and it no longer looks anything like it should. You can then paste this text back in the blog template to essentially restore the overall look and feel.

Originally Posted by BistiArt Question: can you clearly defined the steps for a changed blog upload?!

The steps in this thread are to change the overall look and feel of your blog. They are not about adding posts to your blog.

To add a post to your blog, click "New post" from your blogger dashboard.
Or if you are in the "manage posts" section, click "New post" from there.

Again, if I am making changes to the overall look and feel of my blog, I make those changes directly in the Layout tab, edit HTML page, in the edit template box.

--- Denise

Thanks Denise.
Still needs some adjustments :) http://blog.lmsportspix.com/

Originally Posted by richW Thanks Denise. Still needs some adjustments :) http://blog.lmsportspix.com/

Thanks back to you to Rich. I've added your site to the "blogroll" in the first post.

And - I love that video of Shizam. Your makeup artist is just amazing.

--- Denise

Many thanks to Andrew Young of http://www.fallingrunphotography.com/ for asking how to safely put an email address in his blog by applying Ivar's Stop Junkmail/Spam method shown at http://www.dgrin.com/showthread.php?t=81235. (Andrew's question is in this thread - http://www.dgrin.com/showthread.php?t=102072.)

His question was a bit of a puzzle - since it isn't obvious where to place Javascript in a blogger template - and I've always liked puzzles!

This answer is also in Andrew's original post, but I thought it would be helpful to have it here as well.

I have a blog I use for experimenting, so I played there. You can see the end results of my playing at http://denisegoldbergplays.blogspot.com.

I took the code from Ivar's method (linked above), surrounded the code wtih script tags, and added it close to the bottom of my blogger HTML as found on the Layout tab, Edit HTML, Edit template.

Here's the end of that HTML, including the norobotmail function:

 
.......
<script type='text/javascript'>
function norobotmail(aUser, aDomain) { document.location = &quot;mailto:&quot; + aUser + &quot;@&quot; + aDomain; }
</script>
 
</body>
</html>

Then I went to the Page Elements page on the layout tab in my blog. I clicked add a Page element, then selected HTML/Javascript. I left the title blank, and pasted the reference to the function in the Content box:

 
<a href="javascript:norobotmail('my name', 'my domain')">Email me</a>

That's it - the email link is active as soon as you publish your blog.

Update on January 28, 2009

LLywellyn discovered that special care was needed to add this link to her blog's navbar. Somehow, the single quotes within double quotes got scrambled in the navbar, even though they worked correcly in a sidebar widget.

Luckily she found that the problem was easily resolved by replacing the double quotes with single quotes, and replacing the single quotes with double quotes.

Instead of using:

 
<a href="javascript:norobotmail('my name', 'my domain')">Email me</a>

she successfully used:

 
<a href='javascript:norobotmail("my name", "my domain")'>Email me</a>

Keep that in mind if you have problems embedding an email link in your blog's navbar.

--- Denise