Как настроить внешний вид заголовка сообщения Blogger.

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

Настройка заголовка сообщения Blogger

В этой статье я расскажу о названии с другой точки зрения, то есть о его внешнем виде. Размер шрифта и цвет заголовка блога определяются шаблоном и могут быть изменены путем поиска в шаблоне блока кода, который начинается с h3.post-title и который содержит информацию о цветах, размерах, полях. семействf шрифтов  между фигурными скобками.  .

Во многих моделях Blogger класс заголовка сообщения связан с классом заголовка комментариев с добавлением .comments h4 к предыдущему классу после запятой разделения. Таким образом, эти два элемента будут выглядеть одинаково . Конечно, вы можете заменить этот один блок кода двумя отдельными блоками для заголовка и комментариев.

Как добавить изображение в название сообщения

Поле название поста Blogger поддерживает теги HTML, как и образы . Также вы можете добавить изображения до и / или после заголовка . Если в " Редакторе Blogger вы вставляете в поле заголовка кода , как этот

<img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbHHboHNAZYUCOLlBu4PX2edOWPU-OYzZbcM7zvoJELHe48yzju6Gr-tta5rm-N7WM3hJQBlEL9IdjMJymEEWoTjGguW3KNsTRQgotGRBrq_1rM36Np1CuXTRJuUf33U9EYF62jvT7q4/s32/cuore.png" /> Post San Valentino <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbHHboHNAZYUCOLlBu4PX2edOWPU-OYzZbcM7zvoJELHe48yzju6Gr-tta5rm-N7WM3hJQBlEL9IdjMJymEEWoTjGguW3KNsTRQgotGRBrq_1rM36Np1CuXTRJuUf33U9EYF62jvT7q4/s32/cuore.png" />

таким образом,

вы получите результат, подобный следующему

который может быть хорошей идеей для статей определенных типов блогов.

Индивидуальные настройки названия

Заголовки Blogger имеют символы одинакового размера и цвета . Вы можете создать многоцветный заголовок с разными символами, используя тег <font> и цветовые коды. Вот этот код

<font size="5" face = "Arial" color="#000"><em>C</em></font><font size="4" face = "Verdana" color="#0f0"><b>O</b></font><font size="2" face = "Courier" color="#off"><em>L</em></font><font size="4" font="Impact" color="#f0f"><b>0</b></font><font size="5" face = "Arial" color="#036"><em>R</em></font>

если вставить в поле « Заголовок» в редакторе Blogger, это приведет к такому результату

Были использованы разные семейства шрифтов и теги <em> курсив и <b> жирный шрифт. В текст заголовка также могут быть присутствовать изображения. Например с этим кодом

<font size="5" face = "Arial" color="#000"><em>C</em></font> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbHHboHNAZYUCOLlBu4PX2edOWPU-OYzZbcM7zvoJELHe48yzju6Gr-tta5rm-N7WM3hJQBlEL9IdjMJymEEWoTjGguW3KNsTRQgotGRBrq_1rM36Np1CuXTRJuUf33U9EYF62jvT7q4/s18/cuore.png" /> <font size="2" face = "Courier" color="#off"><em>L</em></font> <img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgHbHHboHNAZYUCOLlBu4PX2edOWPU-OYzZbcM7zvoJELHe48yzju6Gr-tta5rm-N7WM3hJQBlEL9IdjMJymEEWoTjGguW3KNsTRQgotGRBrq_1rM36Np1CuXTRJuUf33U9EYF62jvT7q4/s18/cuore.png" /> <font size="5" face = "Arial" color="#036"><em>R</em></font>

приведет к наличию такого заголовка

Как добавить текст над заголовком и под заголовком сообщения

В типографии Occhiello определяется как текст, который появляется над заголовком статьи, а Cappello - как текст под заголовком . Желая получить такой результат

мы должны начать с кода, который определяет внешний вид Eyelet и Hat . Этот код должен быть вставлен в редактор Blogger в начале тела сообщения в режиме HTML. Вот пример кода

<style>.post-title small {display:block !important;color:#aaa;border-bottom:1px dotted #000;margin-bottom:10px;padding-bottom:15px;font-size:18px !important;font-weight:normal !important;}.post-title div {display:block !important;color:#aaa;border-top:1px dotted #000;margin-top:20px;padding-top:15px;font-size:18px !important;font-weight:normal !important;}</style>

это должно быть вставлено в статью таким образом

Структура заголовка, который будет вставлен в соответствующее поле, будет выглядеть следующим образом:

<small> Это текст над заголовком, расположенное над </small> Main Title <div>,
это текст под заголовком, который появляется под основным заголовком </div>

с Occhiello тегами <small> и </small> и Cappello между тегами <div> и </div>. В заголовке вы также  можете добавить что то одно. В коде есть параметры для цветовых кодов , для стиля границы , для размера символов и для полей между Ocello, Cappello и названием поста.

Если мы решим очень часто вставлять Occhiello и / или Cappello вместе с заголовком поста, то желательно вставлять код в шаблон, а не в каждый пост. Код должен быть вставлен в Тема> Изменить HTML, выше строки </head>, потом сохраните шаблон. При редактировании новой статьи просто введите структуру заголовка в соответствующее поле, не добавляя другой код.

Как показать часть названия красивом

Я заканчиваю эту статью небольшим драгоценным камнем в пользу блогеров-ботаников или тех, кто имеет дело с латинской научной номенклатурой. По соглашению название вида растений или животных на латыни должно быть опубликовано курсивом. Это создает трудности, когда это латинское имя вставляется непосредственно в заголовок. Наша цель будет публиковать названия, которые выглядят так

с латинским названием вида курсив. После сохранения шаблона перейдите в Тема> Изменить HTML и, сразу над строкой ]]></b: skin>, вставьте этот код

.post-title span {font-style: italic;}

Затем сохраняете шаблон. При создании сообщения в поле заголовка вы будете вводить следующие символы:

Ромашка - <span> Рецепт ромашки </span>

Само собой разумеется, что курсивом также могут быть выделены две части, и они могут быть в начале, в конце, а середина без каких-либо изменений.