Adult Content Warning with JavaScript for Image Hosting Sites

This is a simple piece of code I wrote myself to give a content warning to visitors about content of the page they’re about to view. If you have pages with adult content, you must warn viewer about content that they’re about to view.

I’m not going to talk about legal and social issues in this post. This code will also come handy if you’re using pop-under or pop-up advertisements on your site. I already told you that I have tested some pop-under advertisements on my adult sites and had good result with Juicy ads (Read Best Pop-up Advertising for Adult Sites). Yesterday I went through my analytics and saw that I had about 3k visits yesterday. But my pop-up count is pretty low. It was about 500 pops for total of 3k visits. The reason is clear. Almost all web surfers have a pop-up blocker software or add-on installed. They block my pops being popping.

I must say that there is no complete solution for this. But it can be controlled a bit if I however get user to click somewhere on my site. Yes, most of the visitors coming to my site don’t view more than one page. It’s an image hosting site. I drive traffic manually. So they don’t stick around for long. They just close the window after viewing first page they land.

The pop-up ad code Juicy Ads give you is already optimized to activate on click. You just have to make sure that user clicks somewhere while pop-up code is loaded in the background. Most of pop-up blockers out there won’t be able to block these pop-ups. But there are some programs that block these as well. So this is not a 100% solution.

So my best solution to get user to click is to have an adult content warning, where user must click ‘Enter’ button to view content. This strategy is used by large image hosting sites like pixhost and imageveniue. So it works. Problem is how I’m going to do this. I need a code to do this. I search hours but couldn’t find anything. So I wrote it myself. This is just a basic JavaScript code. No big deal. I like to share it hopping it’ll save someone’s time someday.

What is code does is it hides content of the page with content warning message. If user wants to see hidden content that already loaded in background, he or she needs to click enter button. Warning message will disappear with the click and it’ll also activate pop-up code. So here the code,

First we’ll need good design which will cover the page, paste following code to your css file.

[css] #popact{
position:fixed;
width:100%;
top:10%;
bottom: 10%;
}
#popact div{
width:900px;
height:500px;
margin:0 auto;
background:#bbffff;
}[/css]

Then we need to call it within the body tag of the theme. Following code will do it. But first find following code within your theme,
[html]<body>[/html]

And add following code just after it.
[html] <div id="popact">
<div>
<br/><br/><br/><br/>
<center><span>Adult Content Warning!</span></center>
<br/><br/><br/><br/>
<span style="font-size: large;">##### Replace This with Your Massage #####</span>
<br/><br/><br/><br/>
<center><a onclick="document.getElementById(‘popact’).style.display=’none’" href="javascript:void(0)"><span style="color: #ff0000;"><span style="font-size: xx-large;">Enter</span></span></a> | <span style="color: #0000ff;"><a href="http://kids.yahoo.com/"><span style="color: #0000ff;"><span style="font-size: xx-large;">Exit</span></span></a></span></center></div>
</div>[/html]

The code will give users 2 options, to enter or exist. If user click Enter button, the message will disappear immediately. And if user clicks Exit, he or she will be redirected to kids.yahoo.com. Replace the url on above code to have them redirected to another site.

Tharindu

Hey!! I'm Tharindu. I'm from Sri Lanka. I'm a part time freelancer and this is my blog where I write about everything I think might be useful to readers. If you read a tutorial here and want to hire me, contact me here.

Related Articles

14 Comments

      1. Nope i have added the code in Css
        Then i added code in Viewers.tpl of my Website it didn’t work….
        My Skype:bsid91 If u can help me there….

      1. Nope i have added the code in Css
        Then i added code in Viewers.tpl of my Website it didn’t work….
        My Skype:bsid91 If u can help me there….

  1. I have used the code on my blog…changed the background color to dark grey and added opacity of 0.9, everything is fine… but my home page has a slider and the slider appears on top of the warning screen, also the menu items appear above the warning screen and are functional…how can i resolve it..one option for me is to to turn off the slider all together in which case i am sure it will display properly, but i want to keep the slider with appealing images when users visit the adult section of my blog

  2. I have used the code on my blog…changed the background color to dark grey and added opacity of 0.9, everything is fine… but my home page has a slider and the slider appears on top of the warning screen, also the menu items appear above the warning screen and are functional…how can i resolve it..one option for me is to to turn off the slider all together in which case i am sure it will display properly, but i want to keep the slider with appealing images when users visit the adult section of my blog

Leave a Reply

Your email address will not be published. Required fields are marked *

Back to top button