Как разместить CSS и JavaScript файлы Blogger на Google Drive

Хостинг для CSS и JavaScript файлов на блоге Blogger всегда была предметом озабоченности для многих блогеров и веб-мастеров. Многие люди предпочли бы держать все свои коды каскадных таблиц стилей в одном файле, чтобы их можно было загружать на свой хостинг и поле легко применять на своем сайте.

Размещаем файлы css, js и html Blogger на Диске Google

К сожалению, BlogSpot имеет несколько небольших ограничений, в плане хостинга для скриптов и html-кодов файлов. К счастью для этого есть Диск Google, который предоставляет всем блогерам и веб-мастерам возможность размещения у них CSS, JavaScript и HTML файлов бесплатно. В этой статье я покажу вам, как разместить HTML-коды, стили и скрипты Blogger на Google Drive.

Почему стоит размещать файлы на Google Drive?


Много места: Google Drive предоставляет вам хранилище размером в 5 ГБ для всех аккаунтов Google, так что вы легкого можете загружать много документов. Однако, если ваш дисковое пространство будет заполнено, то вы можете обновить свою учетную запись от начального до премиум-класса.

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

Надежный и заслуживающий доверия: При 100% времени безотказной работы, она предоставляет вам свободу для размещения всего, что вам нужно. Имеет неограниченный трафик, но вы должны заботиться о своем пространстве на диске он не должен превышать лимита в 5 Гб в противном случае вы можете обновить свой ??аккаунт или создать другой :).

Вносите изменения в свои старые документы: Google Диск отслеживает практически все ваши изменения, которые вы делали в своих документах – поэтому, когда вы будете сохранять документ, новая версия также сохраняется. Вы можете вернуться назад и внести все нужные вам изменения.

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

Безопасность в лучшем виде: Google Drive является самым надежным бесплатным хостингом с неограниченным трафиком. Кроме того, чтобы обеспечить полную безопасность в Google Drive используется шифрование по протоколу HTTPS, чтобы держать все ваши документы в надежности.

И это все БЕСПЛАТНО: Все эти впечатляющие возможности бесплатны.

Каковы преимущества хранения CSS/JavaScript на хостинге?

Blogger не предоставляет своим пользователям место для размещения CSS или JavaScript файлов в одной отдельной ссылке. Они размещаются в коде вашего блога через HTML-теги.

Для каскадных таблиц стилей <style> тег используется для определения информации о стиле HTML документа. Между двумя <style><style> тегами помещается CSS код, который указывает на то, как HTML элементы должны отображаться в веб-браузере. Каждый HTML документ может содержать несколько тегов <style>.

JavaScript <script> теги используется для определения скриптов, таких как JavaScript. Тег <script> либо содержит описание скриптов, либо оно указывает на внешний файл через атрибут src. Каждый HTML документ может содержать несколько тегов <script>.

Объединение всех кодов стилей и скриптов в один файл помогает веб-ресурсу загружаться быстрее. Кроме того, это помогает поисковой системы легко сканировать все ваши страницы сайта.

Как разместить CSS файлы Blogger на Диске Google:

Итак, для этого есть много сторонних приложений, которые могут помочь вам разместить файлы BlogSpot, как Google Apps, Google Code, и Google App bot. Но Google Drive идеален и работает намного лучше, чем все эти приложения, потому что нет никакой необходимости беспокоиться о пропускной способности как допустим с App bot.

Шаг № 1: Копирование CSS кода с шаблона:

Чтобы разместить CSS файлы Blogger на Диске Гугл, вам нужно скопировать все коды каскадных таблиц стилей с вашего шаблона в пустой блокнот. Перейдите в Blogger >> Выберете блог >> Шаблон >> Изменить HTML. Далее и выполните поиск тега <b:skin><![CDATA[. Как найдете этот тег, вы увидите большой кусок CSS кода, нужно скопировать всю каскадную таблицу стилей до тега ]]></b:skin>. Для получения дополнительной информации см. следующий скриншот.

Скопируйте весь CSS код, который есть в шаблоне!

Шаг № 2: Подготовка файла style.css:

После копирования CSS кода, удалить его из шаблона и вставьте весь свой код в новый пустой блокнот. Далее просто сохраняем файл с названием style.css (расширение файла должно быть в формате css, что браузер воспринял его как должное). Для получения дополнительной информации посмотрите на следующий скриншот.

Имя файла style.css

Шаг № 3: хостинг для вашего style.css файла на Google Drive:

Следующий важный момент, это загрузка файла style.css на свой Google Диск. Перейдите на страницу Google Drive и войдите на свой аккаунт. Теперь вы должны создать новую папку, чтобы вы могли загрузить все свои файлы в одно место. Нажмите кнопку «Создать», из выпадающего списка выберите «Папка». Далее введите имя папки, например, веб-хостинг, веб-файлы и т. д. В конце, нажмите «Создать».

Создаем новую папку

Теперь откройте папку, которую вы только создали несколько минут назад (правой кнопкой мыши на название папки и жмите «Открыть»). Как откроете папку, нажмите на красный значок загрузки в левой стороне экрана, выпадет список, который покажет вам два варианта, то есть «Файлы…» и «Папку…». Просто выберите первый вариант «Файлы…» и перейдите к следующему шагу.

Загрузка файла

Теперь вам нужно выбрать документ style.css, которые вы создали какое-то время назад. После выбора файла, нажмите кнопку «Открыть» и перейдите к следующему шагу.

Файл style.css

При нажатии на кнопку «Открыть» у вас на правой стороне экрана появиться небольшой мастер загрузки. Обычно загрузка занимает минуту или две, но полностью это зависит от размера файла и скорости вашего интернет-провайдера.

Окно загрузки

Как только завершиться загрузка нажмите кнопку «Поделиться». Теперь вы можете сделать этот файл доступным для всех. Нажмите «Изменить», и выберите пункт «всем в Интернете», так чтобы любой в интернете мог его найти и получить доступ. Наконец, чтобы завершить нажмите кнопку «Сохранить». Для подробной инструкции, посмотрите на следующий скриншот.

Совместный доступ

Шаг № 4: Получаем ссылку вашего файла:

Это предпоследний шаг, вам нужно подготовить соответствующую ссылку вашего файла style.css. Щелкните правой кнопкой мыши на файл, который вы загрузили пару минут назад, и выберите «Совместный доступ». Скопируйте весь URL-адрес ссылки как на картинке ниже.

Получаем ссылку css файла

Копируем ссылку

После копирование ссылки с Диска Google, ссылка будет выглядеть так https://docs.google.com/file/d/ваш-файловый-код/. Вы должны изменить скопированную https://googledrive.com/host/ваш-файловый-код. Знайте то, что конец ссылки «ваш-файловый-код» остается тем же до и после внесения изменений.

Давайте я приведу небольшой пример, который поможет вам понять это лучше. Например, если ссылка моего файла https://docs.google.com/file/d/ 0BwHVV_VP1E3VUHlVbGZ5T3NaZXc/, я его изменяю на https://googledrive.com/host/ 0BwHVV_VP1E3VUHlVbGZ5T3NaZXc. Единственное, что остается это конечная оранжевая ссылка файла в конце.

Шаг № 5: Добавление css файлов с Диска Google в Blogger:

После подготовки ссылки вашего файла, перейдите в Blogger >> Выберете блог >> Шаблон >> Изменить HTML. Далее в шаблоне найдите тег <head> и чуть выше него вставьте следующий код. Не забудьте вправить https://googledrive.com/host/ваш-файловый-код конец ссылки как я объяснял выше, и убедитесь, что вы удалили CSS коды со своего шаблона, как объяснялось в шаге № 1. Как только все будет сделано, нажмите кнопку «Сохранить шаблон».

<link href='https://googledrive.com/host/ваш-файловый-код' rel='stylesheet'/>

Надеюсь, что я ответил на все вопросы, связанные с запросом, как размещать файлы на Диске Google, каковы преимущества использования хостинга CSS файлов и еще на многие другие вопросы. Если я что-то забыл упомянуть или отметить, пожалуйста, подправьте меня в комментариях ниже.

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>