 |
| 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 এর সাথে আপনার ব্লগের থিমের ডার্ক মোডের ক্লাস রিপ্লেস করে নিবেন।
Step 6 : এখন নিচের JavaScript কোডগুলো </body> ট্যাগ এর উপরে পেস্ট করে দিন।যদি </body> ট্যাগ খুঁজে না পান,তবে </body> এই ট্যাগ সার্চ করুন এবং এর উপর JavaScript কোডগুলো পেস্ট করে দিন।
<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>
Step 7 : এবার থিম সেভ করে দিন।
Step 8 : এখন নিচে দেয়া কোডগুলো আপনার ব্লগ পোস্টের HTML মোড এ যেখানে ডাউনলোড বক্স সহ কাউন্টডাউন টাইমার চান সেখানে পেস্ট করে দিন।
<!--[ 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>
আপনার ইচ্ছে মত উপরে দেয়া কোডগুলো রিপ্লেস করে নিতে পারেন।যেমন : # এর জায়গায় দিবেন ডাউনলোড লিংক।10 সেকেন্ড দেয়া আছে ডিফল্ট ভাবে,আপনি এটা পরিবর্তন করে আপনার ইচ্ছে মত সময় সেট করে দিতে পারেন।যদি লিংক নতুন ট্যাবে ওপেন করতে চান,তবে false কে true বানিয়ে দিবেন।যদি একের অধিক ডাউনলোড বক্স অ্যাড করতে চান,তবে download1 এবং #download1 রিপ্লেস করুন।যেমন:যদি দ্বিতীয় ডাউনলোড বক্স অ্যাড করতে চান তবে আগের টা তে যেমন আছে তেমন ই রেখে দিবেন,এবং দ্বিতীয়টাতে download1 কে download2 এবং #download1 কে #download2 করে দিবেন।
Conclusion
আশা করি আজকের এই How to make Download Box with Countdown Timer পোস্টটি আপনার উপকারে আসবে।যদি কোনো সমস্যা ফেস করেন,তবে কমেন্ট করতে ভুলবেন না।দেখা হবে পরবর্তী পোস্টে,আল্লাহ হাফেজ।
