<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Slide-In Side Alert Ad</title>
<script async src="https://securepubads.g.doubleclick.net/tag/js/gpt.js"></script>
<style>
:root {
--ad-width: 320px;
--ad-top: 60px;
--ad-offset: 20px;
--slide-duration: 0.5s;
--bg-color: #fff;
--shadow: 0 4px 16px rgba(0,0,0,0.2);
--btn-size: 24px;
--btn-color: #666;
--btn-hover: #000;
}
.side-ad {
position: fixed;
top: var(--ad-top);
right: calc(-1 * var(--ad-width) - var(--ad-offset));
width: var(--ad-width);
background: var(--bg-color);
box-shadow: var(--shadow);
border-radius: 8px 0 0 8px;
overflow: hidden;
transition: right var(--slide-duration) ease;
z-index: 10000;
}
.side-ad.show {
right: var(--ad-offset);
}
.side-ad-header {
display: flex;
justify-content: flex-end;
padding: 8px;
background: #f5f5f5;
}
.side-ad-header .close-btn {
font-size: var(--btn-size);
background: none;
border: none;
color: var(--btn-color);
cursor: pointer;
transition: color 0.2s ease, transform 0.2s ease;
padding: 0;
}
.side-ad-header .close-btn:hover {
color: var(--btn-hover);
transform: rotate(90deg) scale(1.1);
}
.side-ad .ad-content {
width: 100%;
text-align: center;
}
.side-ad-footer {
font-size: 12px;
text-align: center;
color: #888;
padding: 6px;
background: #fafafa;
}
</style>
</head>
<body>
<!-- Slide-In Side Alert Ad -->
<div id="sideAd" class="side-ad">
<div class="side-ad-header">
<button class="close-btn" aria-label="Close">×</button>
</div>
<div class="ad-content">
<div id="div-gpt-ad-side" style="width:100%;"></div>
<script>
window.googletag = window.googletag || { cmd: [] };
googletag.cmd.push(function() {
googletag.defineSlot(
'/1234567/Your_Ad_Unit_Path',
[[300, 250], [320, 50], [728, 90]],
'div-gpt-ad-side'
).addService(googletag.pubads());
googletag.pubads().enableSingleRequest();
googletag.enableServices();
googletag.display('div-gpt-ad-side');
});
</script>
</div>
<div class="side-ad-footer">
Powered by <strong>MukeshLPM</strong>
</div>
</div>
<script>
const sideAd = document.getElementById('sideAd');
const btn = sideAd.querySelector('.close-btn');
window.addEventListener('load', () => {
setTimeout(() => sideAd.classList.add('show'), 500);
});
btn.addEventListener('click', () => {
sideAd.classList.remove('show');
});
</script>
</body>
</html>
No comments:
Post a Comment