Recently we did a post on the Art of Easter Egging in blog articles to help gain subscribers. Since that post, I have also been including other sneakier easter eggs into our articles using HTML.
Today’s post is to satisfy the requests that have come in for a brief tutorial on how it’s done.
The bad news:
We need to dig into the HTML of the blog article to apply this easter egg.
The good news:
It couldn’t be simpler
When a reader of your blog article ‘rolls’ their mouse over the word that has been ‘enhanced’ a hidden message appears. The display before ‘rolling over’ is dramatically different in Firefox than it is in Internet Explorer.
You will see that the hidden message is much harder to locate in Internet Explorer. The Firefox egg is visible because of the thin, dotted line that appears below the indicator phrase.
The trick is that we are using the Abbreviation command in the HTML. It’s original function was to give copy writers the ability to describe the abbreviations they used. MLS for example, would have the hidden words “Multiple Listing Service” appear upon the roll-over’.
We’re modifying this feature and using it as an opportunity to include alternative messages. I intend for the alternative messages to be fun and engaging. These messages can also be used to improve SEO or build description.
Getting to the HTML of your blog article.
This step takes place after you have written, but not published an article.
In the upper most area of your article editor (aka WYSIWYG), in the back end of the blog, look for a link, button or tab that says either “Code” or “HTML”. Selecting this will take you to the actual code for the post you have written.
Note – Depending on where you first started the article, either in the article editor of your blog, or something like WORD, you may see very different code structure. WORD and other text processing programs can carry a ton of luggage in their raw code that make for a very ugly mess. My recommendation is to avoid using 3rd party software for your blogging if you want to maintain a consistent look and formatting for your articles.
Related article: Word is like gum in your blog’s hair
Choosing the location of your egg.
In the code, find the word or phrase that you intend to tie the hidden message. We’re looking for English here, so ignore all the code if you are feeling lost.
Adding the Abbreviation commands in the code.
The command has a Beginning, Middle and an End:
The Beginning: <abbr title=”Your Hidden Message Here”>
The Middle: Original word of phrase to which we are tying the hidden message.
The End: </abbr>
So if we wanted to tie the hidden message “Bloggers make better lovers” to the word “commitment” in an article, then the code you would have to write would look like this:
Before: Blogging is a serious commitment
After: Blogging is a serious <abbr title=”Bloggers make better lovers”>commitment</abbr>.
Save or publish the article.
Test it out.
You can now ‘roll over’ the word with the hidden message and it will display like magic.
Happy hiding and hunting!