अगर आप अपनी वेबसाइट से ज़्यादा CTR (Click-Through Rate) और Ad Revenue कमाना चाहते हैं, तो यह Slide-In Side Alert Ad स्क्रिप्ट आपके लिए एक गेम-चेंजर हो सकती है।
इस स्क्रिप्ट की खास बातें:
- Auto Slide-In: Page load होते ही 0.5 सेकंड बाद ad अपने आप side से show होता है – user का ध्यान खींचने के लिए बिल्कुल सही तरीका।
- User-Friendly Close Button: अगर user चाहे तो ad को easily बंद कर सकता है, मतलब user experience खराब नहीं होता।
- Responsive Ad Sizes: इसमें [responsive] जैसे Google Ad Manager के top-performing ad sizes लगे हुए हैं।
- Modern और Clean UI: सुंदर बॉर्डर, शैडो और smooth animation वाली design हर वेबसाइट पर premium look देती है।
- High CPM Potential: Slide-in format वाले ads ज़्यादा eCPM और engagement देते हैं, जिससे आपकी कमाई automatically बढ़ती है।
क्यों करें इस्तेमाल?
Google Ads या Ad Manager से असली फायदा तभी मिलता है जब आप सही समय पर, सही format में ad दिखाएं। ये स्क्रिप्ट बिना किसी रुकावट के user को engage करती है और आपकी site की earning और performance दोनों बढ़ाती है।
अगर आप चाहते हैं कि एक visitor आपकी site पर 10 गुना ज़्यादा interact करे, तो इसी तरह की smart slide-in ad script से शुरुआत करें।
Google ad manager Code:
<!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>
Google Adsense Ad Code :
<!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://pagead2.googlesyndication.com/pagead/js/adsbygoogle.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>
<div id="sideAd" class="side-ad">
<div class="side-ad-header">
<button class="close-btn" aria-label="Close">×</button>
</div>
<div class="ad-content">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-client="ca-pub-xxxxxxxxxxxx"
data-ad-slot="xxxxxxxxx"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</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>
बस copy करें, अपनी site में paste करें – और result खुद देखें।
अगर आपको इसमें कोई और feature add करवाना है – जैसे scroll-based popup, mobile-only ad या delay timer – तो मुझे बताइए, मैं उसी हिसाब से update करके दे दूँगा।
