நண்பர்கள் அணைவருக்கும் வணக்கம், இந்த பதிவில் HTML, CSS மற்றும் JavaScript பயன்படுத்தி பதிவிறக்க பொத்தானை (Download Button With Countdown Timer) எவ்வாறு உருவாக்குவது என விரிவாக காண்போம்.
திட்ட விவரம் (Project Details)
| திட்ட விவரம் (Project Details) | |
|---|---|
| திட்டத்தின் பெயர் (Project Name) | Download Button With Timer |
| திட்டம் வெளியிடப்பட்ட தேதி (Project Released Date) | 17 FEB 2020 |
| கடைசியாக புதுபிக்கப்பட்டது / புதுபிப்பு அடையாள எண் (Last Updated / Version) | 17 FEB 2020 / 1.0.0 |
| திட்டத்தில் பயன்படுத்தப்பட்ட நிரலாக்க மொழிகள் (Programming Languages Used) | CSS, JavaScript |
| CDNs Used | Font Awesome 4.7.0 |
திட்ட உள்ளடக்கங்கள் (Project Contents)
/*! Download Button With Timer Using CSS & JS
Version: 1.0.0
Author: Siva - Creators Help Tamil
Website: https://creatorshelptamil.blogspot.com/
*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css); /* FontAwesome 4.7.0 */
a.cht-dt,p.cht-dt {
display: block;
margin: 2em auto;
text-align: center;
width: -webkit-fit-content;
width: -moz-fit-content;
width: fit-content;
padding: 1em 5em;
max-width: 100%;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: sans-serif;
border: 0
}
a.cht-dt {
background: #255ff4; /* Background Color */
text-decoration: none;
color: #fff;
font-weight: 400;
text-transform: uppercase;
-webkit-box-shadow: 0 2px 25px rgb(37 95 244/45%);
box-shadow: 0 2px 25px rgb(37 95 244/45%);
border-radius: 5px
}
p.cht-dt {
text-transform: capitalize;
cursor: progress
}
a.cht-dt:before {
content: '\f0ed';
font-family: 'fontawesome';
font-weight: 400;
font-size: larger;
margin-right: 5px
}
/*! Download Button With Timer Using CSS & JS
Version: 1.0.0
Author: Siva - Creators Help Tamil
Website: https://creatorshelptamil.blogspot.com/
*/
var opt = { time: 30, txt1: "You Can Download The File In ", txt2: " Seconds", onload: true }; /* Customizable Values */
var a = document.querySelectorAll("a");
a.forEach((a) => {
if (a.href.match(/#cht-dt/g)) {
a.href = a.href.replace(/#cht-dt/g, "");
a.className = "cht-dt";
var t,id,d = opt;
if (d.onload) {
counter();
} else {
a.onclick = () => {
counter();
return false;
};
}
function counter() {
const p = document.createElement("p");
p.className = "cht-dt";
t = d.time.toString();
p.textContent = d.txt1 + t + d.txt2;
a.parentNode.replaceChild(p, a);
id = setInterval(() => {
t--;
if (t < 0) {
clearInterval(id);
p.parentNode.replaceChild(a, p);
if (!d.onload) {
window.location.href = a.href;
}
} else {
p.textContent = d.txt1 + t + d.txt2;
}
}, 1000);
}
}
});
<a href="Your_Link#cht-dt">Click Here</a>
விருப்பத் திருத்தங்கள் (Customizable Options)
| Download Button With Timer - Options Refference | ||||
|---|---|---|---|---|
| Option Name | Option Description | Type | Default Value (Given) | Customization Options |
| time | Describes Total Time Duration Of Countdown Timer | Number | 30 | Any Number Value [1,2,3.....] |
| txt1 | Describes Text Before Decreasing Of Numbers | String | You Can Download The File In | Any String Value |
| txt2 | Describes Text After Decreasing Of Numbers | Seconds. | ||
| onload | Describes When The Countdown To Load, If True The Timer Will Start While Page Loading, OtherWise Timer Will Start When User Click On The Link | Boolean | true | Boolean Values [TRUE or FALSE] |
என் பதிவிறக்க இணைப்புடன் இதனை சேர்ப்பது எப்படி ?
(Heading In English) - How To Set This Timer To My Download Link ?
இதனை உங்கள் பதிவிறக்க இணைப்புடன் சேர்ப்பது மிகவும் எளிதானதாகும் கீழ் குறிப்பிடப்பட்டுள்ள படிநிலைகளை பின்பற்றுங்கள்.
- முதலில் உங்கள் இணையதளத்தின்
</head>என்பதை கண்டறியுங்கள். - அதற்கு முந்தைய வரியில், இப்பதிவில் குறிப்பிடப்பட்டுள்ள CSS Code Snippet -இல் உள்ளவற்றை நகலெடுத்து உள்ளீடு (Copy & Paste) கொள்ளுங்கள்.
- அதன்பின்,
</body>என்பதை கண்டறிந்து அதற்கு முந்தைய வரியில், இப்பதிவில் குறிப்பிடப்பட்டுள்ள JavaScript Code Snippet -இல் உள்ளவற்றை நகலெடுத்து உள்ளீடு (Copy & Paste) செய்து கொள்ளுங்கள். - அவ்வளவு தான், அனைத்து முதன்மை செயல்பாடுகளும் முடிந்துவிட்டது. இனி உங்களுக்கு எந்தெந்த இணைப்புகளுக்கு இந்த Timer (டைமர்) வேண்டும் என நினைக்கிறீர்களோ, அந்தந்த இணைப்புகளின் இறுதியில்
#cht-dtஎன்பதை மட்டும் இணைக்கவும். - இப்போது உங்களின் அதை இணைப்பு Countdown Timer (கவுண்டோவ்ன் டைமர்) பொருந்தியதாக மாறிவிடும்.
திட்டத்தில் மேற்கொள்ளப்பட்ட மாற்றங்கள் (Project Change Log)
Change Log
1.0.0 - 14 Jan 2021
- Code Created
உபயோக உதாரணம் (Example Of Usage)
பிளாக்கரில் இதனை இணைப்பது எப்படி ? (How To Add This On Blogger ?)
- முதலில் உங்கள் பிளாக்கரில் Theme Section-க்கு செல்லுங்கள்.
- பின், அதிலுள்ள Edit HTML என்பதனை அழுத்துங்கள்.
- இப்போது திரையில் தோன்றுவவற்றுள்
]]></b:skin>என்பதனை கண்டறியுங்கள். - மேலே கொடுக்கப்பட்டுள்ள CSS Code Snippet-இல் உள்ளவற்றை நகலெடுத்து (Copy)
]]></b:skin>என்பதற்கு மேலுள்ள வரியில் உள்ளிடு (Paste) செய்து கொள்ளுங்கள். - அதன் பின் அதில்
</body>என்பதனை கண்டறிந்து அதற்கு மேலுள்ள வரியில், மேலே கொடுக்கப்பட்டுள்ள JavScript Code Snippet-இல் உள்ளவற்றை நகலெடுத்து (Copy)<script>//<![CDATA[//]]></script>என்பதற்கு இடையில் உள்ளிடு (Paste) செய்து கொள்ளுங்கள்.
]]></b:skin> In Blogger Theme's HTML
</body> In Blogger Theme's HTMLசுருக்கப்பட்ட கோப்பு (Minimized File)
இந்த பதிவில் குறிப்பிடப்பட்டுள்ள இந்த திட்டம் சம்பந்தப்பட்ட அனைத்து Codes -யும் ஒன்றிணைத்து சுருக்கிய பதிப்பாக (Minimized Version), இந்த கோப்பில் கொடுத்துள்ளேன்.
தேவையெனில், இதனை நீங்கள் பதிவிறக்கம் செய்து கொள்ளலாம்.
Click Here To Downloadவலையொளி காணொளி (YouTube Video)
இந்த பதிவில் குறிப்பிடப்பட்டுள்ள இந்த திட்டம் பற்றிய விவரம் மற்றும் இதனை எவ்வாறு உங்கள் இணையதளத்தில் சேர்ப்பது என்பன உள்ளிட்ட விவரங்களை நமது வலையொளி சேனலில் உள்ள இந்த காணொளியில் குறிப்பிட்டுள்ளேன். விவரங்களுக்கு காணொளியை பார்த்து தெரிந்து கொள்ளுங்கள்.
இந்த பதிவு உங்களுக்கு நிச்சயம் பயனுள்ள வகையில் இருக்கும் என நம்புகிறேன். அவ்வாறு பயனுள்ளதாக இருந்தால், உங்கள் நண்பர்களுக்கும் இதனை பகிருங்கள். அவர்களுக்கு இது பயனுள்ள வகையில் அமையட்டும். இது போன்ற ஒரு நல்ல பதிவில் மீண்டும் உங்களை சந்திக்கிறேன் அதுவரை, கற்றுக்கொண்டே இருங்கள் கற்றுக்கொள்பவர்களிடமிருந்து...!