Как создать собственный шаблон Blogger

Миллионы блогов работают на платформе 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> раздел.

Самый первый <b:include> тег добавляет некоторые из самых важных тегов SEO в этом разделе. Он также включает в себя очень важный тег описания страницы.

Следующий довольно очевидный и простой для понимания <title> Тег добавляет заголовок страницы в головной части. Все эти теги важны для поисковых систем и сканеров.

Добавлен <meta> тег с атрибутом, name='viewport' чтобы активировать режим адаптивного дизайна, чтобы макет хорошо отображался и на небольших устройствах.Тег <b:skin> включает в себя весь код CSS для создания как макета так и дизайна блога. В настоящее время он пуст и будет заполнен соответствующими правилами CSS - на более позднем этапе. Теперь давайте перейдем к разделу <body> и посмотрим все важные элементы в нем.

В этом <body> разделе содержатся все элементы - видимые - для посетителей сайта в веб-браузере. Вы можете добавить предпочтительный макет в этом разделе.

Начнем с <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> тег 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. Надеюсь, вы нашли этот урок полезным.

Cancel