Создайте кнопку загрузки с таймером для Blogger

Как создать кнопку загрузки в Blogger с таймером? В этой статье вы получите подробное пошаговое руководство по этой теме... Сегодня я предлагаю вам краткое руководство о том, как добавить кнопку загрузки в blogger с таймером времени.

Пример

Название файла

Downloading

Размер файла: 248 мб

Как создать кнопку загрузки в Blogger?

Вам нужно выполнить указанные шаги, чтобы создать на своем сайте красивую кнопку загрузки, как показано выше.

/* 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;}{codeBox}

Шаг 1.   

Вам нужно найти  ]]></b:skin> в HTML-коде вашей темы блога. После того, как вы его нашли, просто вставьте код CSS прямо над ним.

CSS-код

Шаг 2. 

Вам нужно найти </body> в вашем Html-коде и вставить код javascript точно над ним.

Javascript-код

<!--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>{codeBox}

Шаг 3. 

Вы должны вставить данный HTML-код в сообщение или на страницу, где вы хотите использовать кнопку загрузки.

HTML-код

<div class="batas-downx">

<div class="dalam-downx">

<div class="bungkus-info">

<div class="file-info">Введите здесь свой заголовок</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: Введите размер файла </div>

</div>

</div>

</div>{codeBox}

Если вы хотите использовать кнопку загрузки в своем сообщении, просто перейдите к новому сообщению и щелкните HTML вверху, а затем вставьте туда код.

Чтобы изменить заголовок, URL-адрес и размер файла, отображаемые в счетчике загрузок, вы можете просто отредактировать HTML-код на свой собственный.