Author Prestones
2015
3
Premium
Rank 15072

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
greenwoodtam Premium
how do i back up a whole blog file?
Reply
vic62 Premium
HI
I use a plugin called BackWPup and backup my entire website on a regular basis. Depending on the number of posts you make, you can set it to back up every week, every day, every month, hourly etc - your choice.

I hope this helps
Victoria
Reply
greenwoodtam Premium
Thanks victoria
Reply
AnnieB Premium
Hi Dennis, I was thinking alt text, as in SEO'ing images. Are you saying that title attributes can be added (in WP text editor) as well as adding alt text to the image, and both can show up when hovering over an image? Or is my brain a bit fried at the moment.... :)
Reply
Prestones Premium
Hi Annie!

The alt text and the text attribute for an image are different beasts entirely.

For example, if I hover over your profile icon above, there's a little bubble that pops up that says "View AnnieB's Profile" - but there is no alt tag for that profile icon - you can verify this by looking at the page source code.

Clear as mud? ;)

Dennis
Reply
AnnieB Premium
Dennis, me thinks I should do this, to sort it out in my head. I need to combine theory and practice sometimes. And this is a sometime. But yeah, I do sort of get it a the moment. Thanks, Annie
Reply
turborick Premium
Thank you Dennis. I updated one of my posts and it worked just as you said on the text. i don't know how it can be done on the images though. When I change over to text from visual my image goes away and there is no code for the image. The image comes back when I switch back to visual.
Reply
Prestones Premium
Hi Rick!

You should see the image code in the Text tab, but not to worry.

If you select the picture (while in the Visual tab), then click on Edit icon (the pencil), and finally click on Advanced Options as shown in the attached screenshot, you'll be able to add the text popup to the image.

Good luck with it!

Dennis
Reply
turborick Premium
I got it. I'm not sure why I couldn't see it the first time under the text but it it there now. This is a nice touch. Appreciate everything you share. Rick
Reply
AnteroM Premium
Thanks for sharing!!!
Reply
Prestones Premium
Greetings Antero!

Glad to see the little popup titles may be of use to you :)

Dennis
Reply
NWTDennis Premium
Not sure I'm ready to try this, but I will be very soon. Just in case, I think I might follow TA's advice and set up a "Crash Site" first :-).
Reply
Prestones Premium
Everybody needs a test site Dennis.

In my case, I have one in my hosted account and one on my desktop. I keep backups of all the sites - including the test sites.

I've been known to screw things up so badly that there was no going back, so I'd delete all the files on the site (GULP!) and reload everything from a backup file.

Presto! The site is back up - and hopefully I've learned something.

Second best feeling in the world!

Dennis
Reply
JewelCarol Premium
Great tip, thanks for sharing, Dennis. Have an awesome day. :))
Reply
Prestones Premium
Hi Jewel!

Glad to hear you like the share, and hope your day is going well too!

Dennis
Reply
2Al Premium
It's something I need to learn. Thank you for sharing.
Reply
Prestones Premium
Greetings Alma!

One more thing to put on the list...

Just remember to do some blogging too - not just learning! ;)
Dennis
Reply
krazykat Premium
I love it! Thanks!
Reply
Prestones Premium
Hi Val ~

Little tiny popups - what fun!

Dennis
Reply
Mark1957 Premium
Hi Dennis

This likes like good stuff from a quick read through but it's going to need my undivided attention so...bookmarked for a quieter moment ;-)

Have a mad weekend Dennis, I'm sure you will!!

Mark
Reply
Prestones Premium
Hello Mark -

When you finally settle in to read or watch it, you'll realize the whole works is hardly worth your undivided attention. Add a few words to your Text tab, and little tiny popups begin appearing on your site!

Dennis
Reply
Mark1957 Premium
I'll need to go through it Dennis to get any sort of understanding but I won't let it beat me into submission, no sir!!
Reply
gmegs Premium
Morning Dennis!

I'm using a paid theme which does that for me if I wish - it's pretty cool - great tips though!

Question - I use WP Edit as my editor; what do you use?
I think I saw a couple of features in yours that I like - Google etc.?

Thanks!
Joanne
Reply
Prestones Premium
You called it Joanne!

I'm using WP Edit Pro - it makes quick work of many hand coding tasks, and just generally makes my life simpler.

Good catch!

Dennis
Reply
gmegs Premium
Ahh - paid version.
... I might just have to pay - looks really good!
Thanks!
Reply
bsmith1222 Premium
Thanks and have bookmarked!
Reply
Prestones Premium
Good to hear Brian!

Now it only remains to take a moment when next you blog - play with it!

Dennis
Reply
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