 |
| Download Box with Countdown Timer |
আসসালামু আলাইকুম।আপনি যদি আপনার ব্লগে কোনো ফাইল প্রোভাইড করে থাকেন,তবে ব্লগারের জন্য কাউন্টডাউন বক্স আপনার জন্য অনেক হেল্পফুল হবে।আপনি হয়তো দেখে থাকবেন অনেক ওয়েবসাইট থেকে কোনো ফাইল ইন্সটল করার সময় কাউন্টডাউন দেখায় ফাইলটি ইন্সটল হওয়া কিংবা ফাইনাল লিংকে যাওয়ার আগে।
আজ আমি আপনাদের সাথে শেয়ার করবো,কিভাবে ব্লগারে ইন্সটল বক্স সহ কাউন্টডাউন টাইমার সেট করবেন।যখন কোনো ভিজিটর ইন্সটল বাটনে ক্লিক করবে,তখন তাকে একটি নির্দিষ্ট সময় অপেক্ষা করতে বলবে ফাইনাল ডেস্টিনেশনে যাওয়ার জন্য।এতে করে আপনার ওয়েবসাইটের বাউন্স রেট কম যাবে।
Benefits of Download Box with Countdown Timer
আমরা যারা ব্লগিং করি,তারা জানি যে বাউন্স রেট আমাদের ওয়েবসাইটের জন্য অনেক গুরুত্বপূর্ণ একটি বিষয়।বাউন্স রেট যদি অনেক বেশি হয়ে যায়,সেটা মোটেই আমাদের ওয়েবসাইটের জন্য ভালো না।বাউন্স রেট মানে কি যারা জানেন না তাদের বলি, যখন কোনো ভিজিটর আমাদের ওয়েবসাইট ভিজিট করার পর সাথে সাথেই লিভ নেয় এবং ভিজিট করার পর অন্য কোনো পেজে নেভিগেট না করার যে সময় টা,সেটার ভিত্তিতেই বাউন্স রেট নির্ণয় করা হয়।
বাউন্স রেট কম হওয়া একটি পজিটিভ দিক।তাই এই Download Box with Countdown Timer আমাদের সাহায্য করবে আমাদের ওয়েবসাইটের বাউন্স রেট কম রাখার জন্য।
পাশাপাশি আমাদের যাদের ওয়েবসাইটে অ্যাডসেন্স রয়েছে,তারা জানি যে ইম্প্রেশন এবং ক্লিক আমাদের জন্য অনেক মূল্য রাখে।কারণ,যদি আমাদের ওয়েবসাইটের অ্যাডসেন্সের অ্যাডস এ ক্লিক না পড়ে,তবে সেখান থেকে আমাদের কোনো ইনকাম হবে না।আর ইনকাম না হলে কারো পক্ষেই নিজের পকেট থেকে আজীবন ওয়েবসাইটের ব্যয় বহন করা সম্ভব নয়।
Download Timer with Countdown Timer for Blogger
আমাদের ওয়েবসাইটের অ্যাডসেন্সের অ্যাডস ইম্প্রেশন এবং ক্লিক বাড়াতে সাহায্য করবে।এতে করে আমাদের ওয়েবসাইট থেকে আসা ইনকামের পরিমাণ বেড়ে যাওয়ার সম্ভাবনা রয়েছে।
How to make a Countdown Download Box in Blogger?
Countdown Download Box বানাতে আপনার HTML,CSS,JS সম্পর্কে অনেক বেশি ধারণা থাকতে হবে না।কারণ,আমি আপনাদের সাথে পুরো রেডী স্ক্রিপ্ট শেয়ার করবো।আপনাদের শুধু এই স্ক্রিপ্টটি পোস্টের ভিতর পেস্ট করতে হবে যেখানে আপনি ইন্সটল টাইমার সেট করতে চান।
ইম্পর্ট্যান্ট!ইন্সটল বক্স সহ কাউন্টডাউন টাইমার স্ক্রিপ্টটি থিমের ভিতর অ্যাড করার আগে আমি রেকমেন্ড করবো আগে আপনার থিমের একটি ব্যাকআপ নিয়ে নিন।যাতে করে পরবর্তীতে কোনো সমস্যা হলে আবারও থিমটি রিস্টোর করে নিতে পারেন।
Step 1 : প্রথমে যাবেন আপনার Blogger Dashboard এ।
Step 2 : ব্লগার ড্যাশবোর্ড থেকে Theme এ যাবেন।
Step 3 : Customize বাটনের পাশে arrow বাটনে ক্লিক করুন।
Step 4 : তারপর Edit HTML এ ক্লিক করুন।আপনাকে থিমের ভিতর রিডাইরেক্ট করে নিয়ে যাবে।
Step 5 : এখন ]]></b:skin> সার্চ করুন।তারপর নিচে দেয়া কোডগুলো ]]></b:skin> এর ঠিক উপরে পেস্ট করে দিন।
মোবাইল দিয়ে থিমের ভিতর সার্চ দেয়ার জন্য Hackers Keyboard ইউজ করুন।Ctrl + f দিয়ে সার্চ করতে পারবেন।
/* Countdown Download Box */
.dldCo{
--boxC : #08102b; /* Font Color */
--boxBg : #fffdfc; /* Container Background */
--fontF : inherit; /* Font Family */
--svgS : #fffdfc; /* Button SVG Stroke */
--btnBg : #482dff; /* Button Background */
--darkC : #fffdfc; /* Dark Font Color */
--darkBt : #e91e63; /* Dark Button Background */
--darkBa: #2d2d30; /* Dark Background Alt */
--darkBs: #252526 ; /* Dark Background Sec */
}
.dldCo{-webkit-tap-highlight-color:transparent;position:relative;width:100%;max-width:480px;margin:30px 0;color:var(--boxC);font-family:var(--fontF);transition:margin .6s ease;-webkit-transition:margin .6s ease}
.dldBx{position:relative;z-index:2;background:var(--boxBg);width:100%;padding:15px;display:flex;flex-direction:column;font-size:14px;border-radius:10px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.dldTp{display:flex;flex-direction:row} .dldIm{position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:60px;height:60px;padding:10px;margin-right:15px;background:rgba(0,0,0,.08);border-radius:6px;transition:all .4s ease;-webkit-transition:all .4s ease} .dldIm::before{content:attr(data-text);opacity:.7} .dldIm[style]:not([style='']){width:100px;height:100px;background-size:cover;background-position:center;background-repeat:no-repeat;box-shadow:0 0 10px rgba(0,0,0,.1)} .dldIm[style]:not([style=''])::before{display:none}
.dldSv{opacity:0;position:absolute;width:calc(100% + 12px);height:calc(100% + 12px);top:-6px;bottom:-6px;right:-6px;left:-6px;-webkit-transform:rotate(-90deg);-ms-transform:rotate(-90deg);transform:rotate(-90deg);stroke-width:1.5;transition:all .5s ease;-webkit-transition:all .5s ease} .dldIm[style]:not([style='']) .dldSv{width:calc(100% + 20px);height:calc(100% + 20px);top:-10px;bottom:-10px;right:-10px;left:-10px} .dldSv .b{fill:none;stroke:#e6e6e6;opacity:.9} .dldSv .c{fill:none;stroke:var(--btnBg);stroke-dasharray:100 100;stroke-dashoffset:100;stroke-linecap:round;transition:all .5s ease;-webkit-transition:all .5s ease}
.dldIn{flex-grow:1;width:calc(100% - 115px)} .dldIn >*{line-height:20px;font-size:14px;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .dldIn >*::before{content:attr(data-text) ': ';opacity:.8}
.dldBt{background:var(--btnBg);position:absolute;width:40px;height:40px;bottom:-20px;right:20px;outline:none;border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 0 15px rgba(0,0,0,.09);transition:all .3s ease;-webkit-transition:all .3s ease;cursor:pointer} .dldBt:hover{-webkit-transform:scale(1.03);-ms-transform:scale(1.03);transform:scale(1.03)} .dldBt svg{width:24px;height:24px;fill:none;stroke:var(--svgS);stroke-linecap:round;stroke-linejoin:round;stroke-width:1.2} .dldBt.dldDl{visibility:visible;opacity:1} .dldBt.dldRt{visibility:hidden;opacity:0;bottom:-40px}
.dldSl{z-index:1;position:absolute;bottom:0;height:60px;width:100%;background:var(--boxBg);border-radius:0 0 10px 10px;transition:all .6s ease;-webkit-transition:all .6s ease} .dldMe{position: absolute;width:100%;height:40px;bottom:0;display:flex;align-items:center;justify-content:center;font-size:14px} .dldMe span{color:var(--btnBg);font-size:18px;font-weight:600;margin:0 5px}
.dldCo.dldAlt{margin:30px 0 70px} .dldCo.dldAlt .dldIm{-webkit-transform:scale(.8);-ms-transform:scale(.8);transform:scale(.8);border-radius:50%} .dldCo.dldAlt .dldSv{opacity:1} .dldCo.dldAlt .dldDl{visibility:hidden;opacity:0;bottom:-40px} .dldCo.dldRty .dldRt{visibility:visible;opacity:1;bottom:-20px} .dldCo.dldAlt .dldSl{bottom:-40px;box-shadow:0 0 35px rgba(0,0,0,.09)}
.darkMode .dldCo{color:var(--darkC)} .darkMode .dldBx{background:var(--darkBs)} .darkMode .dldIm, .darkMode .dldSl{background:var(--darkBa)} .darkMode .dldSv .b{stroke:#404045} .darkMode .dldSv .c{stroke:var(--darkBt)} .darkMode .dldBt{background:var(--darkBt)} .darkMode .dldMe span{color:var(--darkBt)}
.darkMode এর সাথে আপনার ব্লগের থিমের ডার্ক মোডের ক্লাস রিপ্লেস করে নিবেন।
<script>
/*<![CDATA[*/
/* Countdown Download Script */
function download(link, time, newtab, id){
var dldCo = document.querySelector(id),
dldMe = document.querySelector(id + ' .dldMe'),
dldPg = document.querySelector(id + ' .dldPg'),
dldDl = document.querySelector(id + ' .dldDl'),
dldRt = document.querySelector(id + ' .dldRt'),
dldLf = time;
dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';
dldCo.classList.add('dldAlt');
var downloadTimer = setInterval(function timeCount(){
dldLf -= 1;
dldMe.innerHTML = 'Starting Download in <span>' + dldLf + '</span> seconds...';
dldPg.style.strokeDashoffset = Math.floor((dldLf / time) * 100);
if(dldLf <= 0){
clearInterval(downloadTimer);
dldMe.innerHTML = 'Please wait...';
if (newtab == 'true'){
window.open(link, '_blank');
} else {
window.location.href = link;
};
dldRt.onclick = function (){
if (newtab == 'true'){
window.open(link, '_blank');
} else {
window.location.href = link;
}
};
setTimeout(() => {
dldCo.classList.remove('dldAlt');
dldCo.classList.add('dldRty');
}, 4000);
}
}, 1000);
};
/*]]>*/
</script>
<!--[ Countdown Download Box ]-->
<div class='dldCo' id='download1'>
<div class='dldBx'>
<div class='dldTp'>
<div class='dldIm' data-text='.png' style='background-image:url(image_url_here)'>
<svg class='dldSv' viewBox='0 0 34 34'>
<circle class='b' cx='17' cy='17' r='15.92' />
<circle class='c dldPg' cx='17' cy='17' r='15.92' />
</svg>
</div>
<div class='dldIn'>
<span data-text='Name'>Music_Wallpaper.png</span>
<span data-text='Category'>Music</span>
<span data-text='Size'>3.05MB</span>
<span data-text='Resolution'>1920×1080</span>
<span data-text='Extension'>.png</span>
</div>
</div>
<button onclick='download("#", "10", "false", "#download1")' class='dldBt dldDl'><svg viewBox='0 0 24 24'><polyline points='8 17 12 21 16 17'/><line x1='12' x2='12' y1='12' y2='21'/><path d='M20.88 18.09A5 5 0 0 0 18 9h-1.26A8 8 0 1 0 3 16.29'/></svg></button>
<button class='dldBt dldRt'><svg viewBox='0 0 24 24'><polyline points='23 4 23 10 17 10'/><path d='M20.49 15a9 9 0 1 1-2.12-9.36L23 10'/></svg></button>
</div>
<div class='dldSl'>
<div class='dldMe'></div>
</div>
</div>