ប៊ូតុង​ទាញយក Download Button ដែល​មាន​មុខងារ​នាទី​រង់ចាំ​មុន​ទាញយក

on

នៅ​ក្នុង Blogger សម្រាប់​អ្នក​អត់​ចេះ​កូដ​សោះ អាច​ធ្វើការ​ដាក់​តំណ​លើ​ពាក្យ​ដែល​ចង់​ឲ្យ​ទាញយក​បាន​បែប​សាមញ្ញៗ ហើយ​សម្រាប់​អ្នក​ចេះ​កូដ​ខ្លះៗ​អាច​ស្វែអរក​ប៊ូតុង​ CSS សម្រាប់ Blogger យក​មក​ប្រើប្រាស់​បាន ឬ​ក៏ template ដែល​យើង​ដំឡើង​ប្រើ​មាន​មុខងារ​ប៊ូតុង​មក​ស្រាប់​ដែល​អាច​យក​ប្រើ​បាន។

តែ​ក្នុង​គន្លឹះ​នេះ​ ខ្ញុំ​លើក​បង្ហាញ​ប៊ូតុង​ទាញយក​ដែល​​យើង​អាច​ដាក់​បញ្ជាក់​ឈ្មោះ file និង​ទំហំ file ហើយ​បន្ថែម​ពី​លើ​នេះ​ពេល​ចុច​ទាញយក យើង​ត្រូវ​រង់ចាំ​ប៉ុន្មាន​វិនាទី​សិន ដើម្បី​ធ្វើការ​ទាញយក ដែល​នេះ​ជា​គោលការណ៍​មួយ​ដម្រាប់​ឲ្យ​អ្នក​ទាញយក​មាន​ពេល​អាន​អត្ថបទ​បន្តិច​សិន​បាន ។

៙ របៀប​ដាក់​កូដ​ប៊ូតុង ៖

1- ចូល​គណនី blogger.com របស់​អ្នក។
2- ចូល​ទៅ​កាន់ Theme >> ចុច​សញ្ញា​ព្រួញ​ក្បែរ​ពាក្យ CUSTOMIZE ​ហើយ​យក​ពាក្យ Edit HTML។
3- ស្វែងរក​ស្លាក ]]></b:skin> ហើយ​ចម្លង​កូដ​ខាង​ក្រោម​ យក​ទៅ​ដាក់​ខាង​លើ​ស្លាក​នោះ ។ 
/* Download Counter Box */
#btnx{cursor:pointer;padding:10px 20px;border:0;border-radius:3px;background:#fff;color:#FF0000;float:right;text-transform:capitalize;font-weight:500;transition:all 0.5s}#btnx:hover,#downloadx:hover{background:#d35400;color:#fff;outline:none}.batas-downx{display:block;margin:0 auto;border-radius:4px}.dalam-downx{background:#FF0000;color:#fff;padding:20px;display:block;border-top-right-radius:3px;border-top-left-radius:3px}.file-info{color:#fff;display:inline-block;font-size:1.2em;line-height:38px;text-align:left}.catatan-downx{padding:20px;background:#f7f7f7;border-bottom-right-radius:3px;border-bottom-left-radius:3px;color:#555;font-size:14px}#downloadx{float:right}#downloadx{padding:10px 20px;border-radius:3px;background:#fff;color:#e67e22;float:right;text-align:center;font-size:14px;text-transform:capitalize}.bungkus-info span{display:inline-block;line-height:38px;float:right}.file-deskripsi{display:block}.file-deskripsi span{margin-right:3px}
@media screen and (max-width:640px){.batas-downx{float:none;width:100%}}
@media screen and (max-width:320px){.file-info{display:block;text-align:center}#btnx, a#downloadx{width:100%;margin-bottom:10px}.bungkus-info span{float:none;width:100%;text-align:center}.file-deskripsi{text-align:center}}

  table {
  font-family: arial, sans-serif;
 width: 100%;}
td, th {border: 1px solid #dddddd;text-align: left;padding: 8px;}

  body {font-family: Arial, Helvetica, sans-serif;}
/* Solid border */
hr.solid {
border-top: 3px solid #bbb;
}
4- ស្វែងរក​ស្លាក </body> ហើយ​ចម្លង​កូដ​ខាង​ក្រោម​ យក​ទៅ​ដាក់​ខាង​លើ​ស្លាក​នោះ រួច​ចុច Save template ។
    <!--Download Button-->
<script type='text/javascript'>
//<![CDATA[
function generate(){var e,n=document.getElementById("downloadx"),t=document.getElementById("btnx"),a=document.getElementById("downloadx").href,l=20,d=document.createElement("span");n.parentNode.replaceChild(d,n),e=setInterval(function(){--l<0?(d.parentNode.replaceChild(n,d),clearInterval(e),window.location.replace(a),n.style.display="inline"):(d.innerHTML="<i class='fa fa-clock-o' aria-hidden='true'/> File Is Downloading Please Wait "+l.toString()+" Sec....",t.style.display="none")},1e3)}
//]]>
</script>
5- ចប់​ការ​ដាក់​កូដ​ក្នុង template ឥឡូវ​នេះ​ដើម្បី​ដាក់​ប៊ូតុង​ក្នុង​អត្ថបទ post យើង​ត្រូវ​ឈរ​លើ​តាប HTML View ហើយ​ធ្វើការ​ចម្លង​កូដ​ខាង​ក្រោម​យក​ទៅ​ដាក់ ។
<div class="batas-downx">
<div class="dalam-downx">
<div class="bungkus-info">
<div class="file-info">Enter Your Title Here</div>
<button id="btnx" onclick="generate()"><i aria-hidden="true" class="button small download"></i> download</button> <a href="Enter Your Url Here" id="downloadx" style="display: none;"><i aria-hidden="true" class="button small download"></i>Downloading</a>
<div style="text-align: left;">
File Size: Enter Your File Size</div>
</div>
</div>
</div>
6- ធ្វើការ​កែប្រែ​កូដ​នៅ​ត្រង់ ៖
  • Enter Your Title Here : ឈ្មោះ​ឯកសារ។
  • Enter Your Url Here : តំណ​ឯកសារ​ដែល​ចង់​ដាក់​ឲ្យ​ទាញយក។
  • Enter Your File Size : ទំហំ​ឯកសារ ប្រហាក់ប្រហែល។
ជា​ចុង​ក្រោយ សង្ឃឹម​ថា​ប៊ូតុង​នេះ រឹងតែ​ធ្វើ​ឲ្យ​ប្លក់​របស់​លោកអ្នក​ទទួល​បាន​ការ​ទុក​ចិត្ត​ពី​អ្នក​ចូល​មើល ។ ជួប​គ្នា​នៅ​គន្លឹះ​ blogger លើក​ក្រោយ​ទៀត កុំ​ភ្លេច​ជួយ share !

source https://akbalthom.blogspot.com/2022/07/download-button.html

Comments

Post a Comment