Миллионы блогов работают на платформе Google Blogger. Самое первое, на что обращает внимание посетитель при посещении блога, — это его дизайн или шаблон. Хорошая тема, созданная по индивидуальному заказу, способна удерживать посетителей в течение более длительного периода времени. Сегодня мы собираемся научиться кодировать собственный шаблон Blogger. Наш акцент и фокус будут в основном на основных концепциях дизайна шаблонов, а не на причудливом дизайне. Таким образом, вы сможете создавать различные типы шаблонов с уникальным дизайном. Если вы уже знакомы с основами HTML и CSS, вы можете поднять свой дизайн на новый уровень — довольно легко. Мне не нужно говорить, что вы должны попробовать эти упражнения по разработке шаблонов в частном демонстрационном блоге. Позже вы можете экспортировать и импортировать его в живой блог. Если вы делаете такой шаблон впервые, Избегайте выбора сложной компоновки и начните с более простой, чтобы овладеть основами. Давайте начнем и научимся разрабатывать собственный шаблон Blogger, выполнив несколько простых шагов.быстро и без каких-либо раздумий.
Почти все концепции дизайна, представленные здесь, могут быть применены и к вашим существующим шаблонам, при условии, что вы точно знаете, что делаете, и как внесенное изменение повлияет на дизайн и макет.
Создать необработанный и минимальный скелет шаблона
Начнем с создания сырого каркаса шаблона. Это поможет нам понять структуру шаблона простым способом.
Используйте ваш любимый редактор кода для создания этого шаблона. Давайте начнем со следующей минимальной структуры.
<?xml version=»1.0″ encoding=»UTF-8″ ?>
<!DOCTYPE html>
<html lang=’ru-RU’ xmlns=’http://www.w3.org/1999/xhtml’
xmlns:b=’http://www.google.com/2005/gml/b’
xmlns:data=’http://www.google.com/ 2005/gml/data’
xmlns:expr=’http://www.google.com/2005/gml/expr’
xmlns:og=’http://ogp.me/ns#’>
<head>
</head>
<body>
</body>
</html>
Самая первая строка шаблона объявляет его как документ XML . Важно, чтобы веб-браузеры могли правильно анализировать и обрабатывать код шаблона.
Следующая строка <!DOCTYPE html>указывает, что мы будем использовать HTML5-код в нашем XML-документе. Еще раз, это помогает веб-браузерам эффективно обрабатывать код шаблона.
Атрибуты, добавленные в <html> тег, объявляют пространство имен XML для документа. Он также имеет атрибут языка для документа. Если вы кодируете свой шаблон на языке, отличном от английского, измените код языка .
Пустой <head> раздел тегов, где находятся метаданные веб-страницы. Он включает в себя различные метатеги, стили CSS и скрипты. У нас также есть пустой <body> раздел, где будет кодировка дизайна и макета.
Давайте перейдем к следующему шагу и добавим основные и необходимые метаданные в <head> раздел.
<head>
<b:include data=’blog’ name=’all-head-content’ />
<title><data:blog.pageTitle/></title>
<meta content=’width=device-width, initial-scale=1′ name=’viewport’ />
<b:skin>
<![CDATA[
/* Custom CSS rules goes here… */
]]></b:skin>
</head>
Самый первый <b:include> тег добавляет некоторые из самых важных тегов SEO в этом разделе. Он также включает в себя очень важный тег описания страницы.
Следующий довольно очевидный и простой для понимания <title> Тег добавляет заголовок страницы в головной части. Все эти теги важны для поисковых систем и сканеров.
Добавлен <meta> тег с атрибутом, name=’viewport’ чтобы активировать режим адаптивного дизайна, чтобы макет хорошо отображался и на небольших устройствах.Тег <b:skin> включает в себя весь код CSS для создания как макета так и дизайна блога. В настоящее время он пуст и будет заполнен соответствующими правилами CSS — на более позднем этапе. Теперь давайте перейдем к разделу <body> и посмотрим все важные элементы в нем.
В этом <body> разделе содержатся все элементы — видимые — для посетителей сайта в веб-браузере. Вы можете добавить предпочтительный макет в этом разделе.
Начнем с <header> раздела. Он отличается от заголовка, который содержит метаданные документа.
<header>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=» type=’Header’></b:widget>
</b:section> </header>
<header> Раздел включает в себя заголовок блога и описание. Можно также заменить их на собственный логотип. Вы можете заметить <b:section> тег. Вот как мы создаем различные типы разделов в шаблоне Blogger.
В этом разделе мы создали <b:widget> атрибут, type=’Header’ включающий все функции типичного заголовка шаблона Blogger.
Следующим является основной раздел сообщений в блоге, где все написанные статьи появляются на странице. Вот как создать этот раздел.
<b:section class=’main’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts Section’ type=’Blog’ />
</b:section>
Вы можете заметить, что мы добавили type=’Blog’ атрибут в <b:widget> тег. Это предопределенный атрибут, который автоматически добавляет все необходимые функции для этого конкретного раздела.
Он автоматически генерирует необходимый контент для домашней страницы, страницы архива, страницы поиска, и конечно, для отдельной страницы поста.
Дополнительные виджеты могут быть добавлены в этот раздел, потому что мы добавили showaddelement=’yes‘ атрибут к <b:section> тегу. Блогеры часто используют эту функцию, чтобы добавить пользовательский контент вверху или внизу поста.
Следующий важный раздел — это боковая панель, которая появится справа от основного содержимого.
<aside>
<b:section class=’sidebar’ id=’sidebar’ maxwidgets=» showaddelement=’yes’></b:section>
</aside>
Мы использовали <aside> тег HTML5 для боковой панели. Хотя использовать его не обязательно и его можно легко заменить обычным <div> тегом, я настоятельно рекомендую использовать его для этого раздела.
Вы можете заметить, что в разделе боковой панели нет виджетов. Итак, в основном, мы создали пустую боковую панель, которая может быть заполнена нужными виджетами через интерфейс панели мониторинга.
И, наконец, что не менее важно, наш раздел нижнего колонтитула. Вот фрагмент кода.
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/>
</strong>
</div></footer>
Это простой нижний колонтитул, состоящий из декларации об авторских правах. Обратите внимание на использование <footer> тега HTML5 для этого. Название блога пишется — динамически — после заявления об авторских правах.
Можно также создать нижний колонтитул с поддержкой нескольких столбцов и виджетов. Сложность или гибкость макета полностью зависит от ваших потребностей и ваших технических навыков.
Итак, вот как выглядит весь код шаблона — на данном этапе.
<?xml version=»1.0″ encoding=»UTF-8″ ?>
<!DOCTYPE html>
<html lang=’en-US’ xmlns=’http://www.w3.org/1999/xhtml’
xmlns:b=’http://www.google.com/2005/gml/b’
xmlns:data=’http://www.google.com/ 2005/gml/data’
xmlns:expr=’http://www.google.com/2005/gml/expr’
xmlns:og=’http://ogp.me/ns#’>
<head>
<b:include data=’blog’ name=’all-head-content’ />
<title>
<data:blog.pageTitle/>
</title>
<meta content=’width=device-width, initial-scale=1′ name=’viewport’ />
<b:skin>
<![CDATA[
/* Custom CSS code goes here… */
]]></b:skin>
</head>
<body>
<div id=»blog-wrapper»>
<header>
<b:section class=’header’ id=’header’ maxwidgets=’1′ showaddelement=’no’>
<b:widget id=’Header1′ locked=’true’ title=» type=’Header’></b:widget>
</b:section>
</header>
<div id=»content-wrapper»>
<div class=»content-table»>
<div class=»content-row»>
<b:section class=’main column’ id=’main’ showaddelement=’yes’>
<b:widget id=’Blog1′ locked=’true’ title=’Blog Posts Section’type=’Blog’ />
</b:section>
<aside class=»column»>
<b:section class=’sidebar’ id=’sidebar’ maxwidgets=» showaddelement=’yes’>
</b:section>
</aside>
<div>
</div>
</div>
<footer>
<div>
Copyright © 2019 <strong><data:blog.title/></strong>
</div>
</footer>
</div>
</body>
</html>
Прежде всего, я вложил содержимое раздела body в <div> тег. Это обертка для всей структуры блога.
Вы можете заметить, что я инкапсулировал как раздел содержимого сообщений, так и боковую панель внутри 3 <div> тегов. Каждому из этих тегов были назначены некоторые классы CSS и идентификаторы.
Вы также можете заметить, что класс CSS .column был добавлен в раздел сообщений и боковой панели. Все эти новые дополнения используются для правильного создания базовой структуры макета нашего блога с помощью пользовательских правил CSS.
Прежде чем мы перейдем к стилизации нашего макета с помощью правил CSS, давайте взглянем на макет, чтобы получить представление об этом. Это будет классический макет из двух колонок, обычно используемый для блогов.
Все пользовательские правила CSS будут записаны между <b:skin> теги, как показано ниже. Я дал общий обзор ( см. Ниже ) о порядке появления этих правил CSS.
<b:skin>
<![CDATA[ /*
1. CSS Reset
2. Core Layout Structure
3. Template Design
4. Utility Classes
5. Media Queries */
]]></b:skin>
Вместо представления всего кода CSS, который довольно длинный, я включил правила CSS для основной структуры макета.
/* Template’s Core Layout */
#blog-wrapper {
width: 1024px;
margin: 0 auto;
}
#content-wrapper {
width: 100%;
height: 100%;
overflow: hidden;
}
.content-table {
display: table;
border-collapse: separate;
}
.content-row {
display: table-row;
}
#main {
padding: 25px 25px 25px 20px;
width: auto;
height: 100%;
display: table-cell;
}
aside {
width: 32%;
height: 100%;
border-left: 1px solid #ddd;
padding: 25px;
display: table-cell;
}
footer {
width: 100%;
clear: both;
border-top: 1px solid #ddd;
padding: 20px;
}
Вы можете внимательно изучить все правила CSS в файле шаблона, который доступен для загрузки в конце этого руководства. И вот частичный скриншот шаблона.
Скачать этот шаблон
Вы можете расширять и распространять этот шаблон. Разработка шаблонов Blogger не так сложна, и с этим шаблоном можно начать изучение, имея базовые знания HTML и CSS. Надеюсь, вы нашли этот урок полезным.
