Have a little fun with little tiny popups!
Do you ever wonder how you can engage with your visitors better? Perhaps you'd like to pull them a little deeper into your website, pique their curiosity, or just add a bit of humor to their experience on your site. Here's one way to make that happen.
Invite your visitors to explore your site further or to get them to chuckle with remarks that appear whenever their cursor passes over a text link or a picture on your site. It may reduce your bounce rate or increase the average time your visitor spends on your site.
What's more, you can choose SEO friendly text in your popup that the search engines can read - bumping your page rank just a bit.
Here's how the magic works...
When you look at a text link in the Text tab of the WordPress editor, it will always have the following format:
<a href="http://TargetSiteHere.com/GoToThisPage">Anchor Text Here</a>
You may find there are a few other terms that have been added to the link structure above, but the example link is the basic framework for a text link. Anything else you see just spices up the link a bit, like telling your browser it should open the link in a new window, or telling the search engines the link is a No Follow link.
To make a bit of text pop up when the cursor passes over a text link, you'll want to spice up that basic link a bit yourself. Here's what the link above looks like after you've spiced it up by adding a popup to it:
<a title="Popup text here" href="http://TargetSiteHere.com/GoToThisPage"> Anchor Text Here</a>
You've got this, right? It's just an HTML recipe you follow to create your 'interesting' link.
Making pop up captions for text links
Imagine your visitor's cursor passing over a picture on your site, causing a humorous or descriptive caption to pop up. Alternately, perhaps your popup message informs them they can click on the image to enlarge it. Still another possibility is that the message intrigues them a bit, enticing them to click on the image and go to a landing page or to another internal page on your site. It's all possible, and you're in the driver's seat!
Like the text link, the HTML code for an image has a basic structure, and it looks like this:
<img src="http://StorageSiteForPicture.com/MyPictureCameFromHere.jpg" alt="Text for ALT tag here" style="width:304px;height:228px;">
You could actually cut down the code for the image a bit by removing the ALT tag, but it's not recommended. The same holds true for the width and height parameters.
You can also spice up your images
The extra bit of spice that you need to add to your image code is the same as that shown above for the text link. Here's how it's done:
<img title="Popup text here" src="http://StorageSiteForPicture.com/ MyPictureCameFromHere.jpg" alt="Text for ALT tag here" style="width:304px;height:228px;">
You may find other bits of code added to spice up the image a bit, possibly adding a link to the image in the event your visitor clicks on it. The bits shown above are the framework, and you can add spice to it as well to create space around your picture, align it left or right, etc.
The star of the show for this training is the title attribute though, and it's a spice that's entirely under your control.
Imagine the possibilities!