How To Implement EU Cookies Warning

Due to these EU cookies laws, all the website must display a cookie warning for reader to continue or leave.  After so much time to search for the best solution since we display Ad-sense and Amazon ads, we need to comply and finally we found a cookie consent website that shows us how to do it. It’s quite simple.

While we’re searching, we found a way to display the text box with a close button to turn it off.

cookie warning float right text box with close button

We need the scripts

$jC(document).ready(function(c) {
$jC('.alert-close').on('click', function(c){
$jC(this).parent().fadeOut('slow', function(c){
});
});
});

no-conflict and set in the footer.php

<script type="text/javascript">
var $jC=jQuery.noConflict();
$jC(document).ready(function(){
});
</script>
<script src="<?php bloginfo('template_url'); ?>/ijs/cookie.js" type="text/javascript"></script>

The textbox with close button

<div id="cookie"> <p style="text-align=center";><em> Dognmonkey uses <a href="http://www.dognmonkey.com/techs/privacy-policy" target="_blank">cookies</a> to give you the best experience. Please continue if you're OK with this.<div class="alert-close">×</div></em></p></div>

CSS for the text box

#cookie {position:fixed;font-size:.6em; background:url(../images/info_icon.png) 10px 11px #0079a9;background:url(../images/info_icon.png) 10px 11px,-webkit-gradient(linear,50% 0,50% 100%,color-stop(0,#009ddc),color-stop(100%,#0079a9));background:url(../images/info_icon.png) 10px 11px,-moz-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,-ms-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,-o-linear-gradient(top,#009ddc,#0079a9);background:url(../images/info_icon.png) 10px 11px,linear-gradient(top,#009ddc,#0079a9);background-repeat:no-repeat;width:100%;color:#fff;height:auto;text-align:center;padding: 2px;word-wrap:break-word;border: 2px solid #fff;bottom:80px;z-index:1000 }

.alert-close{background:rgba(255,255,255,.1);-webkit-border-radius:50%;-moz-border-radius:50%;-ms-border-radius:50%;-o-border-radius:50%;border-radius:50%;-webkit-box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);-moz-box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);box-shadow:inset 0 1px 2px rgba(0,0,0,.4),inset 0 -1px 2px rgba(255,255,255,.25);color:#FFF;cursor:pointer;font-size:24px;font-weight:600;height:24px;line-height:20px;position:absolute;right:11px;top:9px;-webkit-transition:color .2s ease-in-out;-moz-transition:color .2s ease-in-out;-o-transition:color .2s ease-in-out;transition:color .2s ease-in-out;width:24px}

Leave a Reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.