Привет, друзья и гости моего блога! Сегодня покажу вам ещё один способ, как сделать прямую ссылку на скачивание файла, чтобы посетитель мог спокойно скачать файл не покидая страницу сайта/блога. В прошлый раз мы использовали для этого Сайты Google, а теперь возьмёмся за Диск 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: "Добавить или удалить ссылку":
Всё, готово. Друзья, а можно для этого использовать не текстовою ссылку, а красивую кнопку скачать. Я покажу вам, как создать кнопки Скачать и Демо, а вы можете использовать их вместе или по одной. Вот такие кнопки на CSS. Наведите на них мышкой, как переливаются красиво, просто супер:
Как вы можете наблюдать, работают кнопочки даже на платформе WordPress, поэтому такие штучки можно использовать на любом сайте.
Красивые кнопки Демо и Скачать на CSS для сайта или блога
Для того, чтобы создать такое великолепие на своём блоге, надо добавить в ваш шаблон стили кнопок. Находите такую строчку ]]></b:skin> и чуть выше вставляете такой код:
1 2 3 4 5 6 7 8 | /* -- 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:
1 2 3 4 5 6 7 | <div style="text-align: center;"> <ul class="button"> <li><a class="demo" href="здесь, ссылка на демонстрацию" target="_blank">Demo</a></li> <li><a class="download" href="здесь, ссылка на файл" target="_blank">Скачать</a></li> </ul> </div> <div class="clear"></div> |
Далее, ставим свои нужные ссылки и готово. Если надо использовать одну кнопку, естественно надо убрать одну строчку из кода. Вот, други мои, как то так. На этом позвольте мне с вами попрощаться, совсем не на долго. Удачи вам и всего хорошего.
Добрый день, Сергей!
Всё получилось, очень подробно и просто всё расписано. Ссылка на файл у меня имеет сейчас такой вид:
drive.google.com/open?id=0B9M_cQ_tqRzUTjNVN2pyY2N6Yjg&authuser=0
соответственно индентификатор файла будет: 0B9M_cQ_tqRzUTjNVN2pyY2N6Yjg
далее сделал по уроку как у Вас и всё получилось. Немного не понял с красивыми кнопками, вот эту часть: «… при написание статьи, в том месте где будут размещены кнопки вставляете кодик, в режиме HTML.» Я так понял, что когда пишешь новое сообщение в блоге, то сразу есть возможность добавить HTML-код, верно? И ещё один вопрос, не пробовали ли Вы размещать файлы на google диск в формате .swf, чтобы например можно было разместить flash-баннер у себя в блоге.
Привет, Михаил! Всё верно. Когда пишите статью в редакторе сообщений, переключаетесь в режим HTML и вставляете код кнопок, вставляете нужные ссылки.
Нет, такой файл не размещал, для этого по моему, есть специальные хостинги. 🙂
Не работает, может гугл что-то поменял.
Александр, что именно не работает? Ссылка или кнопки. 🙂
Разобрался. Пытался сделать прямую ссылку на скачивание на гугл док. В общем моя ошибка. Ссылка на PDF получилась. Спасибо.
Вот и хорошо. 🙂
Спасибо большое! так красивенько получилось!!!
Пожалуйста, Ирина! Вы имеете ввиду кнопки? 🙂
давно искал подобное буду пробавать!
Спасибо! Частенько есть в этом нужда. Теперь — проще ))
Спасибо Вам огромное ! многое узнал от вас и буду внедрять в свой сайт | блог 🙂
Здравствуйте, Сергей! А если мне нужно, чтобы не скачивали с диска, а читали информацию. Подскажите пожалуйста такой вариант решения. Буду признательна Вам! С уважением, Елена!
Привет!
Так просто возьмите ссылку общего доступа для чтения файла и не меняйте её.
Спасибо!
Чтобы дать ссылку на папку с файлами, а не на ее открытие, алгоритм будет такой же?
Спасибо. Работает.