(Последнее обновление: 30.05.2019)

Привет, друзья и гости моего блога! Сегодня покажу вам ещё один способ, как сделать прямую ссылку на скачивание файла, чтобы посетитель мог спокойно скачать файл не покидая страницу сайта/блога. В прошлый раз мы использовали для этого Сайты Google, а теперь возьмёмся за Диск Google. Надо же нам, использовать хостинг по максимуму, не только хранить там файлы, скрипты, но и дать читателям скачивать файл на прямую, не переходя ни на какие сторонние сервисы. И так, прямая ссылка на скачивание файла с Диск Google (Google Drive).

Прямая ссылка на скачивание файла с хостинга Google Диск

Бесплатный хостинг Google Диск

Прямая ссылка на скачивание файла с хостинга Google Диск

Показываю небольшую хитрость, как можно скачивать файлы с хостинга корпорации добра Google, не покидая страницы сайта. Нам нужна будет только ссылка общего доступа для чтения файла, вот эта:

Ссылка общая для просмотра файла

Документ доступен для чтения всем пользователям Интернета

Дамы и господа, кто не знает как создать папку, загрузить файл и открыть доступ к нему, прошу посмотреть подробную статью, тут. Там правда инструкция по старому интерфейсу, но принцип такой же. Для тех, кто в курсе, продолжим. Ссылка общего доступа имеет такой вид:

https://drive.google.com/file/d/0B5-UW792ytkKY2d6azFaUlpRa2M/view?usp=sharing

Такая ссылка нам не нужна, нам нужен только идентификатор файла, посмотрите выделено красным цветом. Вот этот ID файла подставляем к этой ссылке, после знака  =

https://drive.google.com/uc?export=download&id=

И в итоге, у нас должна получится вот такая ссылка на наш файл.

https://drive.google.com/uc?export=download&id=0B5-UW792ytkKY2d6azFaUlpRa2M

Вставляем ссылку на скачивание, как обычно вы делаете при написание статьи в Blogger: "Добавить или удалить ссылку":

Прямая ссылка на скачивание файла

Добавить ссылку на скачивание файла

Всё, готово. Друзья, а можно для этого использовать не текстовою ссылку, а красивую кнопку скачать. Я покажу вам, как создать кнопки Скачать (download) и Демо, а вы можете использовать их вместе или по одной. Вот такие кнопки на CSS. При наведите на них мышкой, они переливаются красиво, просто супер:

Кнопочки download и demo для сайта

Красивые кнопки для сайта Blogger или WordPress

Работают кнопочки на платформе Blogger и WordPress. И поэтому такие штучки можно использовать на любом сайте.

Кнопки Демо и Скачать на CSS для сайта

Для того, чтобы создать такое великолепие на своём блоге Blogger, надо добавить в ваш шаблон стили кнопок. Находите такую строчку ]]></b:skin> и чуть выше её вставляете код CSS, а вставить в Вордпресс: Настроить - Дополнительные стили:

Как добавить код CSS в Вордпресс

Вставляем код CSS

/* -- Button --*/
.button{float:left;list-style:none;text-align:center;width: 100%;margin:5px 0;padding:0;font-size:14px;clear:both;}
.button ul {margin:0;padding:0}
.button li{display:inline;margin:0;padding:0}
.demo {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #E55E48; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s;letter-spacing:1px; }
.download {border: none; -moz-border-radius:2px;-webkit-border-radius:2px;border-radius:2px;padding: 8px 80px !important; background: #5FAAE3; color: #fff !important;text-align: center; text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -webkit-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -moz-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); -ms-text-shadow: 0 0 1px rgba(0, 0, 0, 0.3); transition: background-color 1s ease-out 0s; -moz-transition:background-color 1s ease-out 0s; -webkit-transition:background-color 1s ease-out 0s; -o-transition:background-color 1s ease-out 0s; letter-spacing:1px;}
.demo:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }
.download:hover { background: #454242; text-shadow: 0 0 1px #222; -moz-text-shadow: 0 0 1px #222; -webkit-text-shadow: 0 0 1px #222; -ms-text-shadow: 0 0 1px #222 }

Всё, сохраняете шаблон и при написание статьи, в том месте где будут размещены кнопки вставляете кодик, в режиме HTML/Текст:

<div style="text-align: center;">
<ul class="button">
 	<li><a class="demo" href="######" target="_blank" rel="noopener noreferrer">Demo</a></li>
 	<li><a class="download" href="######" target="_blank" rel="noopener noreferrer">Скачать</a></li>
</ul>
</div>

Далее, ставим свои нужные ссылки вместо решёток и готово. Если надо использовать одну кнопку, естественно надо убрать одну строчку из кода. Да, на сайтйте Вордпресс можно использовать специальный плагин для таких целей.

Вот, други мои, как то так. На этом позвольте мне с вами попрощаться, совсем не на долго. Удачи вам и всего хорошего.