How to setup download gateway page
aap Blogger par ek professional aur fast-loading Download Gateway Page setup karna chahte hain, to ye guide aapke liye sabse best hai. Is system ki madad se aap apne download links ko secure kar sakte hain aur users ko ek behtar interface provide kar sakte hain.
| Feature |
Description |
| Timer System |
Isme automatic countdown timer chalta hai jo security badhata hai. |
| Manual Shortener |
Aap gateway ke liye khud manual link generate kar sakte hain. |
| Custom UI |
Clean aur professional design jo desktop aur mobile dono me sahi dikhta hai. |
| 10+ Buttons |
Default me 10 alag-alag design ke download buttons milte hain. |
Setup Main Gateway Structure
Gateway system ko activate karne ke liye sabse pehle aapko iska main structure setup karna hoga. Iske liye hum ek single file (jisne HTML, CSS aur JS combine hai) ka use karenge. Aapko apna Blogger Dashboard open karke Layout section me jana hai aur wahan Footer area me ek naya HTML/JavaScript gadget add karna hai. Ye code aapke pure gateway system ka base hai jo interface aur logic ko handle karta hai.
| Step |
Action |
| 1. Open Dashboard |
Blogger login karein aur 'Layout' menu par jayein. |
| 2. Add Gadget |
Footer section me 'Add a Gadget' par click karein. |
| 3. Select Type |
List me se 'HTML/JavaScript' option ko chunein. |
| 4. Save Code |
Diye gaye single-file code ko paste karke Save karein. |
<style>
.timerPage{
text-align:center;
font-family:sans-serif;
padding:40px;
}
.continueBtn{
padding:14px 30px;
background:#ff3d00;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
display:none;
}
.arcWrap{
position:relative;
width:160px;
height:160px;
margin:40px auto;
}
.arc{
position:absolute;
border-radius:50%;
border:3px solid transparent;
}
.arc1{
width:160px;height:160px;
border-top:3px solid #6c63ff;
animation:spin 2s linear infinite;
}
.arc2{
width:130px;height:130px;
top:15px;left:15px;
border-top:3px solid #000;
animation:spin 1.6s linear infinite reverse;
}
.arc3{
width:100px;height:100px;
top:30px;left:30px;
border-top:3px solid #6c63ff;
animation:spin 1.2s linear infinite;
}
.arc4{
width:70px;height:70px;
top:45px;left:45px;
border-top:3px solid #000;
animation:spin 1s linear infinite reverse;
}
@keyframes spin{
0%{transform:rotate(0deg)}
100%{transform:rotate(360deg)}
}
.timerNum{
position:absolute;
top:50%;
left:50%;
transform:translate(-50%,-50%);
font-size:32px;
font-weight:bold;
color:#000;
}
.unlockBtn{
display:block;
margin:40px auto;
padding:14px 32px;
background:#2196f3;
color:#fff;
border:none;
border-radius:6px;
cursor:pointer;
}
.scrollMsg{
text-align:center;
font-weight:bold;
margin-top:10px;
}
</style>
<script>
document.addEventListener("DOMContentLoaded",function(){
function param(n){
return new URL(location.href).searchParams.get(n);
}
document.querySelectorAll(".download-btn").forEach(btn=>{
btn.onclick=function(e){
e.preventDefault();
let encoded=btoa(this.href);
location.href="/p/timer.html?r="+encoded;
};
});
let encoded=param("r");
let go=encoded ? atob(encoded) : null;
let customTime=param("time");
let time=customTime?parseInt(customTime):40;
if(go && document.getElementById("loaderArea")){
document.getElementById("loaderArea").innerHTML=
'<div class="arcWrap">'+
'<div class="arc arc1"></div>'+
'<div class="arc arc2"></div>'+
'<div class="arc arc3"></div>'+
'<div class="arc arc4"></div>'+
'<div class="timerNum" id="timerNum">'+time+'</div>'+
'</div>';
let t=time;
let timer=setInterval(function(){
t--;
document.getElementById("timerNum").innerHTML=t;
if(t<=0){
clearInterval(timer);
document.getElementById("loaderArea").innerHTML="";
document.getElementById("continueBtn").style.display="inline-block";
}
},1000);
document.getElementById("continueBtn").onclick=function(){
fetch("/feeds/posts/default?alt=json&max-results=20")
.then(r=>r.json())
.then(data=>{
let posts=data.feed.entry;
let random=Math.floor(Math.random()*posts.length);
let post=posts[random].link.find(l=>l.rel=="alternate").href;
location.href=post+"?r="+encoded;
});
};
}
let download=encoded ? atob(encoded) : null;
if(!download || document.getElementById("loaderArea")) return;
let post=document.querySelector(".post-body,.entry-content,.post");
if(!post) return;
function run(btn,next){
let box=document.createElement("div");
box.innerHTML=
'<div class="arcWrap">'+
'<div class="arc arc1"></div>'+
'<div class="arc arc2"></div>'+
'<div class="arc arc3"></div>'+
'<div class="arc arc4"></div>'+
'<div class="timerNum">10</div>'+
'</div><div class="scrollMsg"></div>';
btn.replaceWith(box);
let t=10;
let timer=setInterval(function(){
t--;
box.querySelector(".timerNum").innerHTML=t;
if(t<=0){
clearInterval(timer);
box.querySelector(".arcWrap").style.display="none";
box.querySelector(".scrollMsg").innerHTML="Scroll Down";
if(next) next.style.display="block";
}
},1000);
}
let top=document.createElement("button");
top.className="unlockBtn";
top.textContent="Unlock";
let center=document.createElement("button");
center.className="unlockBtn";
center.textContent="Verify";
center.style.display="none";
let bottom=document.createElement("button");
bottom.className="unlockBtn";
bottom.textContent=" Continue";
bottom.style.display="none";
let last=document.createElement("button");
last.className="unlockBtn";
last.textContent="Click Here";
last.style.display="none";
post.prepend(top);
let mid=post.children[Math.floor(post.children.length/2)];
mid.before(center);
post.appendChild(bottom);
post.appendChild(last);
top.onclick=function(){ run(top,center); };
center.onclick=function(){ run(center,bottom); };
bottom.onclick=function(){ run(bottom,last); };
last.onclick=function(){ location.href=download; };
});
</script>
Timer Page Setup
Gateway setup ka sabse important part Timer Page hai. Jab koi user aapke short link par click karega, to wo is page par aayega jahan use thodi der wait karna hoga. Is code me humne ek 'Please Wait' message aur ek hidden 'Continue Button' rakha hai. Ye button tabhi dikhayi deta hai jab background me timer khatam ho jata hai. Is code ko aap apne Blogger ke kisi bhi post ya page me HTML View me ja kar paste kar sakte hain.
How to Create Timer Page
Gateway system sahi se kaam kare iske liye aapko Blogger me ek dedicated page banana hoga. Is page ka main kaam countdown timer dikhana hai. Dhyan rahe ki is code ko hamesha HTML View me hi paste karna chahiye, agar aap ise direct Compose view me paste karenge to code sahi se execute nahi hoga. Niche diye gaye steps ko follow karke aap apna timer page ready kar sakte hain.
| Step |
Description / Process |
| Step 1 |
Blogger Dashboard me 'Pages' option par click karein. |
| Step 2 |
'New Page' button par click karke naya page banayein. |
| Step 3 |
Page ka Title 'Timer' ya 'Download' rakhein. |
| Step 4 |
Pencil icon par click karke 'HTML View' select karein. |
| Step 5 |
Purane content ko delete karke Timer Page wala code paste karein. |
| Step 6 |
Page ko 'Publish' karein aur uska URL copy kar lein. |
<div class="timerPage">
<h1>Please Wait</h1>
<div class="infoBox">
Preparing your download
</div>
<div id="loaderArea"></div>
<button id="continueBtn" class="continueBtn" style="display:none">
Click Here
</button>
</div>
Button CSS Integration
Gateway system me jo 10+ professional download buttons diye gaye hain, unka look aur design setup karne ke liye aapko CSS code add karna hoga. Blogger me CSS add karne ka sabse sahi tarika Theme Designer ka 'Advanced' option hai. Isse aapka button design site-wide apply ho jata hai aur template ke original code me koi chhed-chhad nahi karni padti. Niche di gayi table me poora process samjhaya gaya hai.
| Step |
Action / Process |
| Step 1 |
Blogger Dashboard se 'Theme' menu par click karein. |
| Step 2 |
'Customize' button ke sath wale arrow par click karke Customize select karein. |
| Step 3 |
Side menu me niche scroll karke 'Advanced' option par click karein. |
| Step 4 |
Dropdown list me se 'Add CSS' option ko select karein. |
| Step 5 |
Diye gaye CSS code ko box me paste karke 'Save' icon (floppy disk) par click karein. |
.btn-row{display:flex;justify-content:center;margin:10px 0}
.download-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:9px 16px;font-size:13px;text-decoration:none;cursor:pointer;min-width:140px;max-width:160px}
.s1 .download-btn{background:#111;color:#00ffc3;border-radius:999px;box-shadow:0 0 8px #00ffc3}
.s1 .download-btn:hover{box-shadow:0 0 18px #00ffc3}
.s2 .download-btn{background:linear-gradient(135deg,#ff416c,#ff4b2b);color:#fff;border-radius:8px}
.s2 .download-btn:hover{transform:scale(1.05)}
.s3 .download-btn{background:#fff;color:#000;border:1px solid #ccc;border-radius:8px}
.s3 .download-btn:hover{background:#000;color:#fff}
.s4 .download-btn{background:#2563eb;color:#fff;border-radius:999px;box-shadow:0 4px 10px rgba(0,0,0,.2)}
.s4 .download-btn:hover{transform:translateY(-2px)}
.s5 .download-btn{background:#000;color:#0ff;border:1px solid #0ff;border-radius:6px}
.s5 .download-btn:hover{background:#0ff;color:#000}
.s6 .download-btn{background:#22c55e;color:#fff;border-radius:6px;animation:p1 1.5s infinite}
@keyframes p1{0%{box-shadow:0 0 0 0 rgba(34,197,94,.6)}70%{box-shadow:0 0 0 8px rgba(34,197,94,0)}100%{box-shadow:0 0 0 0 rgba(34,197,94,0)}}
.s7 .download-btn{background:#7c3aed;color:#fff;border-radius:12px}
.s7 .download-btn:hover{background:#5b21b6}
.s8 .download-btn{background:linear-gradient(90deg,#06b6d4,#3b82f6);color:#fff;border-radius:999px}
.s8 .download-btn:hover{opacity:.85}
.s9 .download-btn{background:#f97316;color:#fff;border-radius:8px;box-shadow:0 3px 0 #c2410c}
.s9 .download-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #c2410c}
.s10 .download-btn{background:#fff;color:#111;border-radius:999px;border:2px solid #111}
.s10 .download-btn:hover{background:#111;color:#fff}
10+ Unique Download Button Designs
Is gateway system ki sabse badi khasiyat iske 10 predefined button designs hain. Aapko alag se mehnat karne ki zarurat nahi hai, bas aapko post likhte waqt apni pasand ka button style choose karna hai. Har button ke liye alag CSS class (s1 se s10) di gayi hai. Aap inme se koi bhi code copy karke apne post ke HTML View me paste kar sakte hain aur apna link replace kar sakte hain.
| Class |
Design |
| s1 - s3 |
Clean aur Simple design jo har template par suit karta hai. |
| s4 - s6 |
Gradient aur Modern UI buttons jo user ka dhyan attract karte hain. |
| s7 - s10 |
Advanced Hover effects aur Shadow animations wale buttons. |
| LINK |
'LINK1' ki jagah apna actual download link paste karein. |
<div class="btn-row s1">
<a href="LINK1" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s2">
<a href="LINK2" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s3">
<a href="LINK3" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s4">
<a href="LINK4" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s5">
<a href="LINK5" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s6">
<a href="LINK6" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s7">
<a href="LINK7" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s8">
<a href="LINK8" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s9">
<a href="LINK9" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
<div class="btn-row s10">
<a href="LINK10" class="download-btn"><i class="fa-solid fa-download"></i> Download</a>
</div>
Manual Link Shortener Tool Setup
gateway system ko use karne ka sabse best tarika ye Manual Shortener Tool hai. Is tool ki madad se aap kisi bhi long URL ko ek secure short link me badal sakte hain jo direct aapke 'Timer Page' par redirect karega. Ye tool Base64 encoding ka use karta hai, jisse aapka original link hide ho jata hai aur user ko sirf gateway link dikhta hai. Ise setup karne ke liye aapko Blogger me ek alag page banana hoga.
| Step |
Process |
| Step 1 |
Blogger me 'Pages' par jayein aur 'New Page' banayein. |
| Step 2 |
Page ka title 'Link Shortener' ya 'Safe Link' rakhein. |
| Step 3 |
HTML View select karke niche diya gaya code paste karein. |
| Step 4 |
Code me '/p/timer.html' ko apne timer page ke URL se match karein. |
| Step 5 |
Publish karein aur ab aap link generate karne ke liye raddy hain. |
<style>
.shortenerTool *{
box-sizing:border-box;
font-family:sans-serif;
}
.shortenerTool{
max-width:500px;
margin:60px auto;
padding:25px;
background:#ffffff;
border-radius:12px;
box-shadow:0 0 15px rgba(0,0,0,0.08);
text-align:center;
}
.shortenerTool h2{
margin-bottom:20px;
font-size:22px;
}
.shortenerTool input{
width:100%;
padding:12px;
border:1px solid #ccc;
border-radius:6px;
margin-bottom:15px;
font-size:14px;
}
.shortenerTool button{
padding:12px 25px;
border:none;
border-radius:6px;
cursor:pointer;
font-size:14px;
}
#shortBtn{
background:#ff3d00;
color:#fff;
}
.copyBtn{
background:#2196f3;
color:#fff;
margin-left:8px;
}
.resultBox{
margin-top:20px;
display:none;
}
.resultInput{
width:100%;
padding:12px;
border:1px solid #ddd;
border-radius:6px;
margin-bottom:10px;
font-size:13px;
}
@media(max-width:600px){
.shortenerTool{
margin:30px 15px;
padding:20px;
}
}
</style>
<div class="shortenerTool">
<h2>Url Shotner</h2>
<input type="text" id="longUrl" placeholder="Paste your original URL here">
<button id="shortBtn">Generate Link</button>
<div class="resultBox" id="resultBox">
<input type="text" id="shortUrl" class="resultInput" readonly>
<button class="copyBtn" onclick="copyLink()">Copy Link</button>
</div>
</div>
<script>
function generateShort(){
let url=document.getElementById("longUrl").value.trim();
if(url===""){
alert("Enter a URL first");
return;
}
let encoded=btoa(url);
let shortLink=location.origin+"/p/timer.html?r="+encoded;
document.getElementById("shortUrl").value=shortLink;
document.getElementById("resultBox").style.display="block";
}
document.getElementById("shortBtn").onclick=generateShort;
function copyLink(){
let input=document.getElementById("shortUrl");
input.select();
input.setSelectionRange(0,99999);
navigator.clipboard.writeText(input.value);
alert("Short link copied!");
}
</script>
Ab Aapka Download Gateway Ready Hai!
is guide me humne step-by-step dekha ki kaise ek professional Download Gateway Page setup kiya jata hai. Is system ki madad se aap apne links ko safe rakh sakte hain aur users ko ek behtar interface de sakte hain. Sabhi codes ko sahi se add karne ke baad, aapka Blogger ek professional download site ki tarah kaam karega. Agar aapko koi error aaye, to niche di gayi checklist ek baar zaroor check karein.
| Checklist |
Key Points to Remember |
| Footer Setup |
Check karein ki single-file code Layout gadget me sahi se save hai. |
| Timer Page URL |
Shortener code me '/p/timer.html' ko apne original link se match karein. |
| CSS Design |
Button ka design dikhne ke liye CSS ko Advanced menu me zaroor add karein. |
| Testing |
Ek baar manual link generate karke check karein ki countdown sahi chal raha hai. |
Font Awesome aur Timer Customize Kaise Karein?
is gateway system ko perfect banane ke liye 2 baatein dhyan me rakhna bohot zarurat hai. Pehla ye ki jo buttons humne use kiye hain, unke Icons (Download Symbol) tabhi dikhenge jab aapke blog me Font Awesome ki library add hogi. Dusra ye ki agar aap timer ka time (jise 15 ya 30 seconds) badalna chahte hain, to wo aap code me kahan se kar sakte hain.
| Topic |
Solution |
| Font Awesome Link |
Agar icons nahi dikh rahe, to Theme ke <head> me Font Awesome CDN link add karein. |
| Change Timer Time |
Timer page ke script code me 'let time = 15' ko change karke seconds badal sakte hain. |
| Redirect Issue |
Check karein ki aapka Timer Page URL sahi hai, warna redirect nahi hoga. |
| Mobile Responsive |
Ye pura setup mobile-friendly hai, isliye alag se kuch karne ki zarurat nahi hai. |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css">
