Как создать собственный шаблон 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 для документа. Он также имеет атрибут языка для документа. Если вы кодируете свой шаблон на языке, отличном от английского, измените код языка .

См. также:  5+ виджетов последних сообщений для Blogger

Пустой <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> тег. Это предопределенный атрибут, который автоматически добавляет все необходимые функции для этого конкретного раздела.

См. также:  Адаптивная Фото галерея с CSS3 для Blogger и Wordpress.

Он автоматически генерирует необходимый контент для домашней страницы, страницы архива, страницы поиска, и конечно, для отдельной страницы поста.

Дополнительные виджеты могут быть добавлены в этот раздел, потому что мы добавили 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>

См. также:  Как зарегистрировать Blogger в Новостях Google

 

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

 

Ознакомьтесь также

Самые популярные компьютерные игры в России

Самые популярные компьютерные игры в России

Компьютерные игры популярны среди людей всех возрастов. В России также можно найти множество любителей игр, …

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

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