Author Prestones
2015
3
Premium
Rank 18116

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!

Dennis



Join the Discussion
Write something…
Recent messages
Chessie Premium
Thanks Dennis, another tutorial to add to my list (I wish there were more hours in the day)! Ches
Reply
Prestones Premium
My pleasure Chessie!

I know there are lots of moving pieces to our online businesses (and even more for life in general). I'm sure this is a tiny bit that can wait it's turn for your attention ;)

Dennis
Reply
AlexEvans Premium
This will be worth a very good look . Starting to think about the possibilities . Thanks so much Dennis .
Alexander
Reply
Prestones Premium
Something to play with Alexander!

Hopefully adding the titles to links and images will make your visitors' experience better - and make the search engines happier.

Good luck with it!

Dennis
Reply
RonAlderman Premium
Thanks for this. It will come in handy. I have it bookmarked for when I am ready.
Reply
Prestones Premium
Great to hear Ron!

Hopefully it'll make your pages a little more informative or enjoyable for visitors - and maybe net you a little more SEO juice in the bargain!

Dennis
Reply
Kathy331 Premium
Nice one Dennis, thank you!
Reply
Prestones Premium
Glad to hear you may find value in it Kathy!

Something you can add to pages and posts - when you have nothing better to do ;)

Dennis
Reply
MarionBlack Premium
One more thing I've learned today! I've been using the same text for "Title" as I use for "Alt text" when I upload a new image so I would have expected WordPress to do this for me if it was possible. Perhaps in a future WP update. Now you've given me a lot of work :) So much to do, so little time...
Reply
Prestones Premium
Hello Marion!

Great to see the little smiley icon in your message - but not so great to see it after the comment that I've given you a lot of work!

Shame on me! ;)

Dennis
Reply
Top