.

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,

Unread Message


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!

COMMENTS

BLOGGER: 4
Loading...
Hosted by HostGator
Name

Adsense Adsense hacks Advertising Affiliate Marketing Announcement Antivirus Application hacks Applications Backlinks Blog Blogger Blogger Features Blogger Help Blogger Roll Blogger Templates Blogger Widgets Blogging Bluetooth hack Bootable Browsers Business Cell phones Contest Cool tricks CSS Device Download Email Marketing Entertainment Facebook FeedBurner FIFA World CUP Files n Folders Flash Free software Fun with Windows Games Gmail hacks Google Google hacks Google Plus Graphic Hacking tools Hosting How to HTML Info Internet Tips ip address iphone hack Ipod hacks Javascript Keyword Research Make Money Blogging Make money online Mobiles Monetize Nokia hacking Page Rank Password Hacks PC Games PC Hacks Photoshop Promote site Reviews SEO Social Bookmarking Social Media Symbian hack Tips n Tricks Traffic Tutorials USB Virus Web 2.0 Web design Widget Windows Tricks WordPress WordPress Themes
false
ltr
item
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips: Automatically Remove Widget after Visited using CSS
Automatically Remove Widget after Visited using CSS
http://3.bp.blogspot.com/_b0xJ7qk6DTc/THOlzVSA-nI/AAAAAAAAA5o/IhYAVN462yc/s1600/code.jpg
http://3.bp.blogspot.com/_b0xJ7qk6DTc/THOlzVSA-nI/AAAAAAAAA5o/IhYAVN462yc/s72-c/code.jpg
Hack Tutors — Blogger Tricks, Blogging and Social Media Tips
http://www.hacktutors.info/2010/08/automatically-remove-widget-after.html
http://www.hacktutors.info/
http://www.hacktutors.info/
http://www.hacktutors.info/2010/08/automatically-remove-widget-after.html
true
7369343002377078183
UTF-8
Not found any posts VIEW ALL Readmore Reply Cancel reply Delete By Home PAGES POSTS View All RECOMMENDED FOR YOU LABEL ARCHIVE SEARCH ALL POSTS Not found any post match with your request Back Home Sunday Monday Tuesday Wednesday Thursday Friday Saturday Sun Mon Tue Wed Thu Fri Sat January February March April May June July August September October November December Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec just now 1 minute ago $$1$$ minutes ago 1 hour ago $$1$$ hours ago Yesterday $$1$$ days ago $$1$$ weeks ago more than 5 weeks ago Followers Follow THIS CONTENT IS PREMIUM Please share to unlock Copy All Code Select All Code All codes were copied to your clipboard Can not copy the codes / texts, please press [CTRL]+[C] (or CMD+C with Mac) to copy