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

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

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

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

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

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

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

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

 

<img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png» /> Post San Valentino <img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s32/cuore.png» />

 

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


 Редакторе Blogger вы вставляете в поле заголовка кода


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

 

 

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

 

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

Заголовки 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, это приведет к такому результату

См. также:  Создавайте анимированные кнопки с помощью CSS3

 

 

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

<font size=»5″ face = «Arial» color=»#000″><em>C</em></font> <img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/s18/cuore.png» /> <font size=»2″ face = «Courier» color=»#off»><em>L</em></font> <img src=»https://lh4.googleusercontent.com/-gJtXH4TVqqY/UZNAPDnUD9I/AAAAAAAAhtw/VXu-hbTs9Jg/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 и названием поста.

См. также:  Шаблон минимального кода Blogger

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

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

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

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

 

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

 

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

 

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

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

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

 

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

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

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

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

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

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