দেখেনিন কিভাবে আপনি আপনার ব্লগার ওয়েবসাইটে Timed Download Button Add করবেন | how to Create a Timed Download Button in Blogger

Admin

Jan 5, 2022

How to Create Timer Download Button For Blogger

আসসালামু আলাইকুম। কেমন আছেন? আশা করি ভালো আছেন!☺

আজ আমি আপনাদেরকে দেখাতে যাচ্ছি যে কি করে আপনি আপনার ব্লগার ওয়েবসাইটে Timer Download Button Add করবেন।

How Timed Download Button Works

When the visitor clicks the Download button, it will run the Javascript and the visitor has to wait for a while (depending on the webmaster set) before going to the download link.

It is the same as safelink but will not redirect to a new page. Do not worry, it will not affect the loading speed of the blog.

How to Create Timed Download Button For Blogger

To create a download button with a timer is very simple, please follow the steps below.

1 : Go to Blogger.com

2 : Select Theme and go to Edit HTML.

3 : Add CSS For Download Button.

To add CSS, find the ]]></b:skin> tag and paste it above it.

CSS Code:

/* Download Button */
:root {
--download-info-color: #fefefe;
--download-info-color-type: #f1f1f0;
--download-info-color-a: #f09800;
--darkmode-download-info-color: #252526;
--darkmode-filetype-color: #1e1e1e;
}
.downloadInfo{max-width:500px;background-color: var(--download-info-color); box-shadow:0 10px 8px -8px rgb(0 0 0 / 12%); border:1px solid #eceff1;border-radius:5px; padding:15px;margin-top:20px;margin-bottom:20px; display:flex;align-items:center; line-height:1.8em;font-size:14px}
.downloadInfo a, .downloadInfo .fileType{flex-shrink:0;display:flex;align-items:center;justify-content:center; width:50px;height:50px; padding:10px; background: var(--download-info-color-type);border-radius:10px}
.downloadInfo a{background-color: var(--download-info-color-a);color: var(--download-info-color); margin:0;padding:10px 12px;border-radius:3px; width:auto;height:auto; line-height:20px;font-size:13px}
.downloadInfo a:after{content:attr(aria-label)}
.downloadInfo .fileType:before{content:attr(data-text)}
.downloadInfo .fileName{flex-grow:1; width:calc(100% - 150px);padding:0 15px}
.downloadInfo .fileName > *{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.downloadInfo .fileSize{line-height:1.4em;font-size:12px;opacity:.8}
.icon.download{background-image:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fefefe' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5'><path d='M3 17v3a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-3'/><polyline points='8 12 12 16 16 12'/><line x1='12' x2='12' y1='2' y2='16'/></svg>")}
.icon{flex-shrink:0; display:inline-block;margin-right:12px; width:18px;height:18px; background-size:cover;background-repeat:no-repeat;background-position:center}
.theTargetLink{display:none} 
@media screen and (max-width:480px){
.downloadInfo{padding:12px}
.downloadInfo a{width:50px;height:50px;border-radius:10px}
.downloadInfo a:after{display:none}
.downloadInfo a .icon{margin:0}} 
/* CSS darkMode */
.darkMode .downloadInfo{background-color: var(--darkmode-download-info-color); border:0}
.darkMode .downloadInfo .fileType{background-color: var(--darkmode-filetype-color)}

Alternatively, you can add above the </head> tag, add the following.

<style>

</style>
</head>

4 : Add JavaScript so the download button can count.

To make the download button count the time, you can't do without JavaScript, add this JavaScript above the </body> tag.

JavaScript Code:

Replace 10 with time to wait

5 : Click To Save!

How To Use Timed Download Button

After completing the above steps, the rest to use is very simple. When posting and inserting the download button, you just need to switch to Edit HTML and copy the HTML download button and paste it where you need it.

HTML Code: