share your email address, but hide it from spammers

Type the following code in your “contact” page or wherever you want your contact information to appear on your website:

htmlcodeforjavaemailaddress

Copy the code below, paste it in a text file and edit the content in red:
(You can use any text editor, like the Notepad app in Windows.)

<!– Begin

// NOTE: If you use a ‘ add a slash before it like this \’
// NOTE: to turn any code into a comment, type two forward slashes //
in front of the line of code
// NOTE: I left the css code in, but you would need to create it in your own style sheet

document.write(‘<span class=”phonetitle”><nobr>’);

document.write(‘Your Name Here‘);

document.write(‘</nobr></span><br>’);

document.write(‘10901 Your Street<br>’);

document.write(‘City, ST 12345<br>’);

document.write(‘PHONE: <span class=”phonetitle”>(555) 555-5555<BR></span>’);

//document.write(‘<br>’);

document.write(‘EMAIL: <A HREF=”mailto:yourown@emailaddress.com” class=”link”>yourown@emailaddress.com</a><br>’);

//  End –>

Name the text file “phone.js” and save it in the same folder as the file containing the first code.

Now, your email isn’t underlying text that’s easily found by scammers and spammers, it’s buried in code. The downside is that anyone who’s not running javascript can’t see your content – rare, but possible.

Caveat: If your website is hosted on WordPress.com, they don’t allow javascript, so this code won’t work for your site.

(code snippet credit allwebcodesign.com)

wordpress: where can I find the post id?

When I’ve used the [display post] feature of wordpress, I sometimes need to find an id number for a particular post. There are two quick, easy ways to find the post id:

1. If you’re logged into your WordPress dashboard, click Posts > All Posts. Find the post you need and hover or roll your mouse over the title. The post id number will appear in the progress bar in the bottom left of the browser.

wordpress-post-id-hover-over-post-title

2. If you are editing a post, it’s displayed in the URL.

wordpress-post-id-in-edit-post

Hope this was helpful!

html: prevent line break after text link

preventlinebreakafterlinkwith_inlineThe problem:
Creating a text link seemingly inserts a line break and causes the text following the link to wrap to the next line. Notice the second paragraph is not a link – and it doesn’t wrap.

This is what the original code looks like:
preventlinebreakafterlinkwith_inline_codebefore

To prevent the text from wrapping/inserting a line break, add an inline property to your anchor tag.

Here’s what the inline property looks like:
preventlinebreakafterlinkwith_inline_codeafter

preventlinebreakafterlinkwith_inline_finalAnd here’s the result:
I know the font size of the link is slightly larger than the paragraph text. I’ll be fixing that next.

html lists: indent spacing and change bullet styles

Working on my website recently and created a multi-level unordered list. The spacing of the second level indent was much more than I needed and I wasn’t loving the fact that the bullets were the same for both levels.

I found code to solve both those problems, so as usual, I’m posting it here for my future reference and, hopefully, to help someone else looking to solve the same problems.

I changed the second level bullet style to square and reduced the second level indent to 15px. Here’s a screen shot of my final list, followed by the code snippets I used:

Continue reading “html lists: indent spacing and change bullet styles”