Blogger – это отличный бесплатный сервис от Google, с помощью которого вы можете создать свой собственный профессиональный блог в Интернете. Есть несколько тем, предоставляемых Blogger на выбор, в комплекте с интерфейсом WYSIWYG (что видишь, то и получаешь), что упрощает их редактирование даже для тех, кто не кодирует. Однако, если у вас есть знания CSS и HTML, вы можете сделать еще больше настроек с помощью такой программы, как Загрузите бесплатную копию Dreamweaver .
Загрузка вашего шаблона Blogger
После создания учетной записи на Blogger.com вам будет предложено настроить новый блог.
- Введите название своего блога, которое будет отображаться на главной странице блога. Например, если вы ведете блог о котятах, заголовком может быть «Блог о котятах Боба».
- Второе поле, которое вам нужно будет заполнить, — это URL-адрес блога. Google предоставляет бесплатный хостинг, поэтому в этом примере URL-адрес блога может быть Bobskittens.blogspot.com. У вас также есть возможность указать собственный URL-адрес, если вы предпочитаете.
- После того, как вы введете эти две части информации, вы попадете на панель инструментов Blogger. Прокрутите меню слева и выберите «Тема».
- По умолчанию будет базовой темой, и вы можете прокрутить вниз, чтобы выбрать другие варианты. Когда вы нажимаете на тему, появляется всплывающее окно, показывающее вам «живую» версию того, как будет выглядеть ваш блог с этой темой. Если вы найдете тот, который вам нравится, нажмите оранжевую кнопку «Подать заявку в блог» в нижней части экрана.
- Теперь посмотрите в правый верхний угол экрана. Нажмите кнопку «Резервное копирование/восстановление», которая появляется под значками вашей учетной записи Google.
- Появится окно с надписью «Тема > Резервное копирование/восстановление». Нажмите на оранжевую опцию «Загрузить тему». Файлы темы будут загружены на ваш компьютер в виде XML-файла.
Прежде чем начать
Если вы впервые используете CSS (каскадные таблицы стилей) и HTML (язык гипертекстовой разметки), вам необходимо хорошо знать эти языки, прежде чем редактировать шаблон Blogger с помощью Dreamweaver.
Обратите внимание, что использование Dreamweaver не идеально подходит для редактирования всех элементов шаблона Blogger. Blogger имеет собственный встроенный редактор для настройки сайтов, и это гораздо более быстрый метод для таких задач, как изменение фоновых изображений и добавление или удаление элементов. Использование Dreamweaver может ускорить редактирование таких элементов, как шрифты, цвета и другие легко доступные для поиска элементы.
Использование Adobe Dreamweaver
Процесс редактирования шаблонов Blogger, описанный в этой статье, актуален для версий Dreamweaver, начиная с CS4 (2008 г.). В настоящее время Adobe Dreamweaver является частью подписки Adobe Creative Cloud с версией, теперь известной как «CC», которая заменила CS6.
Если у вас нет Dreamweaver, вам нужно будет получить его через службу подписки Creative Cloud. Плата варьируется, но в среднем составляет 49,99 долларов США в месяц со скидками для студентов и школ, а также оптовыми ценами на покупку нескольких лицензий предприятиями. Подписка Creative Cloud дает вам доступ ко всем популярным программам Adobe для дизайна, включая Photoshop, Illustrator и другие. В качестве альтернативы вы можете приобрести одну подписку на программное обеспечение, если вам нужен только Dreamweaver за 19,99 долларов США в месяц. Если вы не уверены и хотите попробовать, есть также 30-дневная бесплатная пробная версия.
Учебные ресурсы по HTML и CSS
В Интернете есть множество бесплатных и платных ресурсов для тех, кто хочет научиться понимать и редактировать файлы CSS и HTML.
- W3 Schools : Этот сайт предоставляет бесплатную информацию обо всех аспектах элементов и языка CSS и HTML.
- Проект Odin : доступ к пошаговому учебному пособию по CSS и HTML, а также по Javascript.
- Code Academy : Code Academy, один из самых популярных учебных сайтов по программированию, предоставляет бесплатные учебные пособия по CSS, HTML и другим языкам кодирования.
- Лагерь свободного кода : еще одно очень популярное место для студентов всех типов кода, этот сайт известен своим активным и полезным сообществом.
Формат XML-файла
Файл шаблона Blogger, который вы будете редактировать в Dreamweaver, называется XML-файлом, что означает расширяемый язык разметки. В файле XML используется тот же язык, что и в файлах HTML и CSS, но вся информация для обоих помещается в один файл. Причина этого в том, что файл XML предназначен для «хранения и передачи данных» и, таким образом, является типом формата, который вы увидите при резервном копировании нескольких файлов в один файл, например, с файлом резервной копии сайта WordPress или Blogger.
Если вы знаете HTML и CSS, код в файле XML будет вам знаком. Одним из важных элементов, на который следует обратить внимание, является тег Blogger, который открывается с помощью <b:skin> и закрывается с помощью </b:skin>. Внутри этих тегов находятся все стили CSS, которые записываются как переменные. Код HTML следует за кодом CSS в файле, а шаблон Blogger состоит из «виджетов» и «разделов». Blogger предоставляет их список в разделе справки.
Примером того, как записываются переменные, могут быть шрифты. В шаблоне, используемом в этом примере, основным шрифтом является Damion Regular. В файле XML темы код записывается следующим образом:
Настройка вашего рабочего пространства
Один из недостатков использования Dreamweaver для редактирования шаблона Blogger заключается в том, что вы не будете использовать WYSIWYG. Вы сможете видеть только тот код, который редактируете. Чтобы увидеть изменения «вживую», вам придется загрузить файл обратно в Blogger или сначала внести изменения с помощью функции браузера Inspect Editor . Поэтому рекомендуется сначала выполнить эти шаги.
- Сделайте резервную копию XML-файла шаблона, загруженного из Blogger, чтобы у вас была чистая копия на случай, если вам понадобится вернуться к исходному коду.
- Если у вас уже есть активный сайт, ваш блог будет выглядеть странно, пока вы загружаете изменения в шаблон из файла, отредактированного Dreamweaver. Чтобы решить эту проблему, сделайте свой сайт Blogger закрытым, чтобы только вы могли видеть изменения на своем сайте, пока вы их вносите. Вы можете сделать это, зайдя на панель инструментов и выбрав «Настройки», затем «Разрешения», затем «Только для авторов блога». Конечно, если вы не возражаете, если посетители увидят происходящие изменения, вы можете пропустить этот шаг!
- Другой вариант — создать второй сайт для целей тестирования и сделать его закрытым. Как только вы будете удовлетворены изменениями, внесенными на тестовый сайт, вы сможете применить их к файлу шаблона для «настоящего» блога.
Редактирование файла шаблона Blogger
Теперь, когда вы готовы приступить к редактированию, запустите Adobe Dreamweaver и откройте XML-файл, загруженный из Blogger. Когда вы откроете файл в Dreamweaver, вы увидите весь XML-код в редакторе.
- Используя Inspect Editor вашего браузера с живым блогом, наведите указатель мыши на элемент, который вы хотите изменить, чтобы найти правильный элемент. Вы также можете прокручивать код, но если вы ищете элемент, который упоминается много раз с разными параметрами (например, шрифтом), использование редактора проверки может быть быстрее.
- Например, чтобы изменить тип шрифта для основного заголовка, используйте редактор проверки, чтобы убедиться, что это Robot 45px.
- Войдите в Dreamweaver и с помощью функции «Найти» (Ctrl+F, F3 или с помощью меню «Найти» — «Найти в текущем документе») найдите «roboto». В этом примере переменная для этого конкретного экземпляра шрифта находится в строке 23.
- Чтобы изменить этот шрифт на версию с засечками, такую как Roboto Slab, в строке 23 следует изменить код:
<Variable name=»robotoBold45″ description=»Roboto Slab Bold 45″ type=»font» default=»bold 45px Roboto Slab, serif» hideEditor=»true» value=»жирный 45px Roboto Slab, serif» /> - Затем вы также прокрутите до этого элемента, который можно найти здесь в строках с 75 по 78, и измените значение в строке 78 на «полужирный 45px Roboto Slab, serif».
- Когда вы закончите, сохраните файл, перейдите на панель инструментов Blogger и выберите в меню пункт «Тема». Нажмите кнопку «Резервное копирование/восстановление» и на этот раз выберите вторую кнопку с надписью «Выбрать файл». Найдите только что отредактированный файл XML на своем компьютере. Нажмите на него, а затем нажмите на оранжевую кнопку «Загрузить» во всплывающем окне.
- Дождитесь загрузки файла. Когда это будет завершено, всплывающее окно закроется, и вы вернетесь в область темы на панели инструментов. Теперь, если вы посмотрите свой живой блог, вы увидите, что шрифт заголовка изменился на Roboto Slab. Вы также можете увидеть изменения в Inspect Editor.
- Выполните те же шаги для редактирования других элементов, таких как шрифт, цвета и любые элементы, которые позволяют ваши знания и навыки работы с HTML и CSS!
Поиск шаблонов Blogger
В вашей учетной записи Blogger предустановлено несколько шаблонов, но выбор невелик. Вы можете найти больше шаблонов на других сайтах, таких как следующие.
- Шаблоны BT . Этот сайт содержит бесплатные шаблоны в различных стилях для использования с Blogger. Вы также можете отправить свои шаблоны для использования другими.
- Шаблоны Deluxe : найдите сотни бесплатных шаблонов Blogger с помощью простой в использовании функции поиска, чтобы найти именно то, что нужно.
- Colorlib : 30 лучших бесплатных адаптивных шаблонов Blogger доступны здесь, каждый с полезным описанием его преимуществ.
- Мои темы Blogger . В этой галерее тем Blogger есть бесплатные темы, отсортированные по стилю дизайна, теме и функциям.
- DesignCrazed : этот регулярно обновляемый список лучших бесплатных шаблонов Blogger содержит подробную информацию о каждом шаблоне, а также возможность просмотреть демоверсию и загрузить шаблон.
- Наши шаблоны блогов . В дополнение к более чем 170 бесплатным шаблонам для Blogger на этом сайте также есть несколько учебных пособий по дизайну CSS.
- Шаблоны Blogger . На сайте есть четыре страницы с уникальными тематическими шаблонами, созданными пользователем Blogger.
Настройка вашего блога
Если вы готовы выйти в Интернет и расширить свое присутствие в блогах, это так же просто, как создать учетную запись Blogger и настроить свой шаблон . В Adobe Dreamweaver есть множество бесплатных шаблонов, которые вы можете настроить с помощью нескольких простых шагов, понимания CSS и HTML и своего личного вдохновения!