Is there a way to configure this footer ad in my blogger so that it only displays for visitors who are unique?

I am seeking a solution to customize this "footer ad code" so that it only appears for unique visitors to my blog and does not reappear if the visitor has previously closed it. In essence, once a visitor closes this footer ad on one page of my website, it should not display again when they navigate to another blog post or page within the same site.

<style>
.Arpian-ads {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    min-height: 70px;
    max-height: 90px; /* Modify based on your design */
    padding: 5px 0;
    box-shadow: 0 -6px 18px 0 rgba(9,32,76,.1);
    -webkit-transition: all .1s ease-in;
    transition: all .1s ease-in;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fefefe;
    z-index: 20;
}

.Arpian-ads-close {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px 0 0;
    position: absolute;
    right: 0;
    top: -30px;
    background-color: #fefefe;
    box-shadow: 0 -6px 18px 0 rgba(9,32,76,.08);
}

.Arpian-ads .Arpian-ads-close svg {
    width: 22px;
    height: 22px;
    fill: #000;
}

.Arpian-ads .Arpian-ads-content {
    overflow: hidden;
    display: block;
    position: relative;
    text-align:center;
    height: 70px;
    width: 100%;
    margin-right: 10px;
    margin-left: 10px;
}
</style>


<div class='Arpian-ads' id='Arpian-ads'>
    <div class='Arpian-ads-close' onclick='document.getElementById(&quot;Arpian-ads&quot;).style.display=&quot;none&quot;'>
        <svg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'>
            <path d='M278.6 256l68.2-68.2c6.2-6.2 6.2-16.4 0-22.6-6.2-6.2-16.4-6.2-22.6 0L256 233.4l-68.2-68.2c-6.2-6.2-16.4-6.2-22.6 0-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3l68.2 68.2-68.2 68.2c-3.1 3.1-4.7 7.2-4.7 11.3 0 4.1 1.6 8.2 4.7 11.3 6.2 6.2 16.4 6.2 22.6 0l68.2-68.2 68.2 68.2c6.2 6.2 16.4 6.2 22.6 0 6.2-6.2 6.2-16.4 0-22.6L278.6 256z' />
        </svg>
    </div>
    <div class='Arpian-ads-content'> Insert your Ad Code here </div>
</div>
htmlcssjsonbloggersticky-footer

Answer №1

To achieve this functionality, CSS alone is not sufficient. However, you can implement it by using cookies or local storage to track whether the ad-container has been closed. Cookies provide persistence even when the browser is closed, allowing you to determine if the visitor has interacted with the ad on another page.

Here is a sample code snippet:

const ad = document.getElementById('#Arpian-ads-close');
const wasVisible = window.localStorage.get('adShown');

/**
 * Remove the ad if the user has previously closed it
 */
if(!wasVisible){
  ad.remove();
}

/*
 * Add an event listener to set a key in local storage once the ad is clicked
 */
ad.addEventListener('click', () => {
  window.localStorage.set('adShown', true);
  ad.remove()
});

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Retrieving JSON Arrays in PHP through an AJAX Request

Having trouble extracting data from multiple arrays in an AJAX request. Can anyone help? Here's what I'm trying to send: https://i.stack.imgur.com/4MEL4.png Executing a jQuery AJAX POST to a PHP file, but uncertain how to retrieve the data. An ...

javascriptphpjqueryjsonajax

The text on the HTML page reads from left to right in a page that

Currently, I am facing the challenge of showing a negative number in an HTML page with rtl direction. Despite using direction: ltr, the label does not display correctly. To demonstrate the issue, I have created a jsFiddle showcasing the reverse scenario ...

htmlcssright-to-left

Issue with Term Parsing in Elasticsearch Query

Here is the query I'm working with: { "aggs": { "groupby": { "terms": { "field": "UNIQUE FIELD NAME THAT IS CONFUSING", "missing": "", "orde ...

jsonelasticsearchdsl

The runtime is experiencing difficulty in loading the Bootstrap files

File Structure in eclipse The issue is that the CSS files are not loading at runtime, causing me to lose the design I created. Below is my code for the login page. When clicking on the links for the CSS files, they open in the Eclipse IDE instead of load ...

csstwitter-bootstrapspring-mvc

Converting numerical values into currency format using Angular

Can anyone provide guidance on how to format a number received from the API as currency in Angular 15? This is what my HTML currently looks like: <thead class="fixed-top cabecalhoTabela"> <mat-card-header> & ...

htmlangularformatangular15

Querying the height of an image element using jQuery and dynamically adding padding if necessary

I've got a Bootstrap carousel displaying images with different heights, and I'm looking to vertically center these images. My approach involves determining the image height, subtracting it from a fixed height value, and if the result is less than ...

jquerycss

What is the best way to organize controls on my website?

My web page controls need to be organized in the specific layout below: Header Left Content - Main Content - Right Content Footer Is there a control available that can assist me with achieving this layout? I prefer not to use a table since it may not b ...

asp.nethtmlcss

Locating the JSON path within an object

Need help with checking if a specific path is present in a JSON object? var data = { "schemaOne": { "name": "abc", "Path": "i.abc", "count": 5347, "subFolders": [ ] }, "schemaTwo": { "name": "cde", "Path": "i.cde", " ...

javascriptjson

What is the process for transforming XML into JSON with C# and LINQ?

Trying to convert an XML file into JSON on the server but facing a challenge due to different value types in each column. Any suggestions or examples of similar implementations using C#/LINQ would be really helpful as I am new to working with XML. The goa ...

c#jsonxmlxml-parsing

I'm looking to showcase information from a nested JSON file within the ng-click event in Angular. How can this be achieved effectively?

I am currently exploring ways to display nested JSON data that relates to the data retrieved from the previous ng-click event. Any suggestions or insights on this matter would be highly appreciated. Thank you! Check out the plunker example here: http://p ...

jsonangularjsangularjs-ng-repeat

Can you trigger a button click on one HTML page from another HTML page?

I am working on a project with two custom HTML pages: 'first.html' and 'second.html'. In 'second.html', there is a hidden div that I want to unhide when a button on 'first.html' is clicked. Both pages should be open ...

javascriptjqueryhtmldjangoweb

Creating a new page break in an Excel cell produced through HTML

Currently, I am facing an issue while attempting to create an excel file using PHP with HTML and responding with an excel Content-type. Everything seems to be working smoothly except the preservation of new lines within a cell. Various methods like &#1 ...

phphtmlexcelnewline

Unraveling the Mystery of JSON Objects in PHP

Here is the format of my JSON data : { "amount":550, "items":[ {"item_id":12334, "price": 504}, {"item_id":12335, "price":206} ] } Can someone guide me on how to properly parse this data so that I can retrieve each piece of information in in ...

phpandroidjsondecode

Displaying an input element within a column using jQuery when clicked

I currently have a table formatted as follows: <table> <tr> <th>Column 1</th> <th>Column 2</th> <th>Column 3</th> </tr> <tr> <td class='core'> ...

javascriptjqueryhtml

After clicking on a link, there will be a brief pause before the page transition occurs, once

I've been looking for solutions to similar problems, but none of them have worked for me. Here's my issue: I have a few links in the header of my website (such as about, portfolio, etc.) and I have a JavaScript animation that triggers when an &l ...

javascriptjquerycssanimation

Tips for dynamically adjusting the CSS cursor in a Vue.js application

Is it too ambitious to try and recreate a custom cursor tool like cursomizer using Vuejs? I've hit a roadblock where I need to dynamically change the cursors displayed. These cursors are SVG files that should be accessible from the next component, all ...

cssvue.jscursorvue-component

What is the best way to eliminate empty space at the bottom of a page that is being caused by a button?

I have identified the reason for the blank space at the bottom of my page - it's due to a sticky "back to top" button. However, I am unsure how to resolve this issue. Here is the layout of the page: <nav> navbar </nav> <div> car ...

htmlcssbootstrap-5

What is the best way to have my sliding panel automatically close when I click outside of it?

I have created a sleek sliding navigation panel for my website that appears when the screen width is reduced. Although I am satisfied with how it functions currently, I would like the panel to close when the user clicks/taps outside of it. What adjustments ...

javascriptjquerycssresponsive-designpanel

Ways to rearrange items in the navigation bar?

I am working with a Bootstrap template and I am trying to adjust the layout to be right-to-left (RTL). Currently, when I set the site title to RTL in the navbar, the buttons in the navbar also switch to RTL alignment. This is not the desired layout I want. ...

javascripthtmlcssfrontendbootstrap-5

What steps can I take to address the issue with the jquery dropdown?

I am struggling with implementing JavaScript functionality on my website. Specifically, I have a dropdown menu in the hamburger menu that is causing some issues. Whenever I click on the services option, the dropdown opens but quickly closes again. I'v ...

javascripthtmljquerycssnavbar