Download Timer Script for Blogger  with Safe Link

इस बटन से आप आर्टिकल व पेज दोनों पर timer चला पाओगे साथ ही इसमे आपको बार बार पेज बनाने की जरूरत भी नहीं है आप विडियो में डेमो जरूर देखे मे दावा करता हूँ इसके बाद आपको यह बटन 100% पसंद आएगा। आप अपनी वैबसाइट पर advance professional Download Timer button double timer with safe link लगाना चाहते हो तो आप नीचे दिये गए कोड का उपयोग करके बहुत ही अच्छा टाइम download button लगा सकते हो जिसमे आपकी वैबसाइट का download URL लिंक भी safe रहेगा। 

Page Code

सबसे पहले आपको अपनी वैबसाइट के लिए एक पेज create करना है और नीचे दिये गए CSS और JavaScript code को paste कर देना है और पेज को publish कर देना है।

	<script src="https://web.archive.org/web/20240403102228/https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js">"</script>
	<link href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' rel='stylesheet' />
	<style>
	.sapnaitgk, .sapnaitgk a {
	font-size: 10px;
	}
	button.getlink:hover,button#gotolink:hover {
	background-color: #4e32a8;
	box-shadow: 0px 15px 20px rgb(167 45 250 / 40%);
	transform: translateY(-4px);
	cursor: pointer;
	}
	button.getlink, button.btn.bt-wait, button#gotolink {
	border: none;
	padding: 10px 35px;
	border-radius: 5px;
	color: white;
	background: linear-gradient(99deg, rgba(2,0,36,1) 0%, rgba(44, 0, 120, 0.8) 0%, rgba(93, 0, 255, 0.8) 100%);
	font-weight: bold;
	box-shadow: 0px 8px 15px rgb(0 0 0 / 10%);
	}
	button.btn.bt-wait {
	background:red;
	}
	.first-container, .second-container{
	margin:auto;
	text-align:center;
	}
	button.btn.bt-wait, .second {
	display: none;
	}
	.sapnaitgk {
	display: none;
	}
	.fa-check:before {
	content: "\f013";
	font-family: 'FontAwesome';
	}
	.fa-right:before {
	content: "\f00c";
	font-family: 'FontAwesome';
	}
	span.fa-check {
	animation-name: spin;
	animation-duration: 5000ms;
	animation-iteration-count: infinite;
	animation-timing-function: linear;
	}
	@keyframes spin {
	from {
	transform:rotate(0deg);
	}
	to {
	transform:rotate(360deg);
	}
	}
	svg.radial-progress{max-width:100px;padding:0;transform:rotate(-90deg);/*background-image:linear-gradient(-225deg,#FF057C 0%,#8D0B93 50%,#321575 100%);*/border-radius:50%;}
	svg.radial-progress circle{fill:transparent;/*stroke:#fff;*/stroke:silver;}
	/* svg.radial-progress circle.bar-static{stroke:#fafafa!important;} */
	svg.radial-progress circle.bar--animated{stroke-dasharray:219.91148575129;/*stroke:#ffffff;*/stroke:darkgreen;stroke-dashoffset:219.91148575129;stroke-width:4px;stroke-linecap:round;}
	svg.radial-progress text{/*fill:#fafafa;*/font-family:Roboto;font-size:16px;font-weight:700;text-anchor:middle;text-shadow:0 0 5px #0000007a;}
	</style>
	<script>
	var timeleft = 1;
	var waitleft = 1;
	document.querySelector(".entry-title").innerHTML = localStorage.getItem("Post Title");
	</script>
	<script src="https://web.archive.org/web/20240403102228/https://sapnaitgk.github.io/Blogger/safe-page-first.js"></script>
	<script src="https://web.archive.org/web/20240403102228/https://sapnaitgk.github.io/Blogger/safe-page-second.js"></script>

view rawDownload Timer Script for Blogger Page Code hosted with ❤ by GitHub

Style CSS

इस कोड़े को आपको head section के अंदर paste करना है।

<style>

.svgdiv {

    transform: rotate(-90deg);

}button.generateBtn, button.getlinkbtn {

    border: none;

    color: white;

    padding: 10px;

    border-radius: 7px;

    font-size: 15px;

    font-weight: bold;

}

button.generateBtn:hover, button.getlinkbtn:hover {

    background: lightseagreen;

    font-size: 16px;

    padding: 11px;

    transition: .5s;

}

button.getlinkbtn {

    background: green;

}

button.generateBtn{

    background: blue;

}

text {

    /* fill: #fafafa; */

    font-family: Roboto;

    font-size: 11px;

    font-weight: 700;

    text-anchor: middle;

    text-shadow: 0 0 5px #0000007a;

}

.download-icon, .getlinkbtn {

    display:none ;

}

.timerbtn{

    margin: auto;

    text-align: center;

}

.download-icon svg{

    margin: auto; 

    background: none; 

    display: block; 

    shape-rendering: auto; 

    animation-play-state: running; 

    animation-delay: 0s;

    width:150px;

    height:150px;

}

.download-icon svg g{

    animation-play-state: running;

    animation-delay: 0s;

}

.download-icon svg g rect{

    animation-play-state: running;

    animation-delay: 0s;

   width:4px;

   height:11px; 

   fill:#0a0a0a;

    x:48;

   y:24.5;

   rx:1.87;

   ry:1.87;

}

.download-icon svg g rect animate{

    animation-play-state: running;

    animation-delay: 0s;

}

/*   button */

.progress {

    display: flex;

    height: 1rem;

    overflow: hidden;

    font-size: .75rem;

    background-color: #e9ecef;

    border-radius: 0.25rem;

}

.jt-bg-primary {

    background-color: var(--jt-primary);

}

.progress-bar {

    display: flex;

    flex-direction: column;

    justify-content: center;

    overflow: hidden;

    color: #fff;

    text-align: center;

    white-space: nowrap;

    background-color: #0d6efd;

    transition: width .6s ease;

   width:0%;

}

</style>

HTML Code

इसके बाद आपको नीचे दिये गए script को अपनी ब्लॉगर वैबसाइट के </body> टैग के तुरंत ऊपर paste कर देना है।

<script>

   var postTime = 1;

   var safepageurl = "https://techrakesh2501.blogspot.com/p/safe.html" ; //page safe page link

   var postTitle = document.querySelector(".post-title");

</script>

<script src='https://sapnaitgk.github.io/Blogger/moreadvance.js'></script>

Article Code

• अब आपको जब भी किसी आर्टिक्ल में time download button लगाना हो तो a टैग में class="safe" डालकर आप टाइम download button create कर सकते हो।
• अगर template के अनुसार अगर आपने a tag का पहले से ही class दिया हुआ है तो आपको multiple class भी दे सकते है जैसे class="button btn download safe" इस प्रकार से ।
• for exmple <a href="https://www.sapnaitgk.com" class="safe">SapnaITGK</a>