A vignette ad, also known as a vignette banner ad or interstitial ad, is a type of online advertising format that typically appears as a full-screen or overlay ad between the content transitions on a website or mobile app. Vignette ads are designed to capture the user's attention by covering the entire screen, providing a visually engaging experience. They are often used for various marketing purposes and can contain multimedia elements such as images, videos, and interactive content.
In this Article, I'll show you how to create your own Vignette Ads and implement on your Website and Blogs. We all know that vignette ads are important in the digital advertising landscape because they offer a visually engaging way for advertisers to convey their message, capture user attention, and drive user actions simply leading to grab more Ad impressions which results Higher Ad Revenue. So lets get into it!
STEP 1. Go to your Blogger Theme settings and open edit html mode. Find the <body> tag just by pressing ctrl+f on your keyboard.
STEP 2. Now copy and paste the Html code given below. Do not forget to replace your ad unit code!
STEP 3. Similarly find the custom css inside your theme code. If your theme does not have any custom css option then simply find the css codes and then below the css code just paste this code.
STEP 4. Then find the </body> close tag and paste the javascript code before the close tag.
Codes.
<div class="vignette-ad" id="vignetteAd"> <button id="closeAdButton">x</button> <div class="iframe-container"> "Your Ad Codes here!" </div> </div>
.vignette-ad {
position: fixed; /* Use absolute positioning for the ad container */
top: 50%; /* Center vertically */
left: 50%; /* Center horizontally */
transform: translate(-50%, -50%); /* Center both horizontally and vertically */
width: 300px; /* Set the width to 300px */
height: 250px; /* Set the height to 250px */
background-color: rgba(0, 0, 0, 0.7); /* Semi-transparent black overlay */
display: none; /* Initially hidden */
justify-content: center;
align-items: center;
display: flex; /* Use flexbox for centering */
flex-direction: column; /* Center horizontally and vertically */
text-align: center; /* Center text content */
z-index: 9999; /* Ensure the popup is above other content */
}
/* Container for the iframe */
/* CSS styles for the close button (customize as needed) */
#closeAdButton {
position: absolute;
top: 10px;
right: 10px;
background-color: white;
color: black;
border: none;
padding: 5px 10px;
cursor: pointer;
}
let clickedLink = null; // Variable to store the clicked link
let linkClickCount = 0; // Counter for link clicks
const adDisplayFrequency = 3; // Display the ad every 3rd link click
// Function to show the vignette ad popup
function showVignetteAd(link) {
const vignetteAd = document.getElementById('vignetteAd');
const iframe = document.querySelector('.iframe-container iframe');
// Store the clicked link
clickedLink = link.href;
linkClickCount++;
// Check if it's time to display the ad
if (linkClickCount % adDisplayFrequency === 0) {
// Prevent the default link behavior only when the ad is shown
link.addEventListener('click', (event) => {
event.preventDefault(); // Prevent the default link behavior
});
// Set the iframe source (replace with your desired content URL)
iframe.src = "https://example.com"; // Replace with your content URL
vignetteAd.style.display = 'flex'; // Display the popup
}
}
// Function to close the vignette ad popup and navigate to the clicked link
function closeVignetteAd() {
const vignetteAd = document.getElementById('vignetteAd');
vignetteAd.style.display = 'none'; // Hide the popup
// Navigate to the clicked link
if (clickedLink) {
window.location.href = clickedLink;
}
}
// Automatically show the ad popup when any link is clicked
const links = document.querySelectorAll('a');
links.forEach(link => {
link.addEventListener('click', (event) => {
showVignetteAd(link); // Show the vignette ad popup after a certain number of link clicks
});
});
// Add event listener to close the vignette ad popup
document.getElementById('closeAdButton').addEventListener('click', closeVignetteAd);
This custom Vignette Ad works when user navigates through your blog or website by clicking the links. So everytime a link is clicked ad will be displayed.