Automatically Remove Widget after Visited using CSS

Today I'll teach you, how to show widget only once after viewing it. Your widget will automatically remove after your visitor click the link or image containing in the widget. Your visitor can't see the widget on the second time if they already viewed it. This process can be applied to your each visitors using some HTML and CSS tricks.

First you have to see the DEMO to get clear information about this. You can see the image of New Message on the top of the post in this blog. Note: If you already clicked that image then, it may not visible. To make it visible, clear the cookie of your browser or open your alternative browser.


So, you found it cool? You can apply this unique HTML / CSS tricks to your website or blog. Follow the following steps:

1. In you HTML file, find the DIV code of the widget which you want to use this trick.

2. Copy the ID of the DIV widget. It may be something like this, <div id="yourid">

3. Now, in your Style section, use the following CSS code:

#yourid a:visited {
display:none;
}

Replace yourid with your DIV id. Now, view your blog or website!

Example

Let me show you an example of this work. Suppose I have the following DIV code:

<div id="image">

<a href="http://www.hacktutors.info/p/new-message-from-admin.html"><img src="http://1.bp.blogspot.com/_b0xJ7qk6DTc/THOGg9HAWII/
AAAAAAAAA5g/elVMNdR5AL0/s1600/unread+mail.png"/></a>

</div>

In the above example, I have the image with link between the image DIV code. Now, I apply the following CSS code in my CSS section:

#image a:visited {
display:none;
}

Now, the result may looks like this,




Click the image above and refresh this page, you may not see the image in second time. Finally you're done.

How it Worked?

The CSS tag a:visited can be recognized as the visited link, image or anything that consists on specific widget. With the help of a:visited and display:none; tag, the hole widget removed after any person view or click the link containing on the widget.

display:none; tag hides the contents of the widget. If there is no a:visited tag, your widget will not visible in the first time even someone haven't visited already.

So, this was the unique trick to hide the widget after the first click or view of each individual visitor of your blog / website. This may be helpful if you are regular web designer or blogger. You can think yourself how you can use this trick in your work.

I'll be coming soon with the post How to use this trick on blogspot blogger blogs. Till then, Don't forget to show me your work here :)

Do you have a HTML / CSS trick like this? Share with us!