Красивые заголовки статей в Blogger

Заголовки статей в Blogger оформляются с помощью части кода шаблона, ответственной за css, где записаны все стили и свойства для каждого сегмента в блоге.
Обычно в нормальных шаблонах заголовки связаны с конкретным тегом, типа h1 или h2, в свойствах которого указаны шрифт, цвет, размеры, тень и т.п.
Сделано это централизовано, и все заголовки во всех статьях блога одинаковые.

В поисках русских (кириллических) url'ов для статей, я наткнулся на интересный хак в Blogger: в название статьи можно вставлять html теги, даже картинку, т.е. каждый заголовок статьи получится уникальным по своему оформлению.

Вот конкретный пример, на котором я сделал заголовок для статической страницы ↓


Внимательный читатель скорее всего сразу задаст вопрос: а как это выглядит в исходном коде страницы?
Красота красотой, но надо в первую очередь думать о поисковой оптимизации.

Вот тут как раз и кроется загвоздка.
Во-первых, есть шаблоны, на которых данный хак не срабатывает (лучше всего получилось на дефолтовом шаблоне).
Во-вторых, срабатывает везде, но неправильно отображается на вкладке браузера - это мой случай ↓


Дело в том, что у меня в шаблоне прописано такое условие для заголовков:

  • внутренние страницы - только название статьи
  • главная страница - только название блога
  • статические страницы - название блога:название статьи

Только в последнем случае описываемый хак у меня заработал и показал содержание заголовка статьи во вкладке и шапке браузера без видимых паразитных тегов (как на предыдущем скриншоте) ↓


В исходнике страницы получилось так:


То есть название статьи, которое мы разукрасили, отображено, как текст, между тегами title.

С какими тегами получилось?
Успешно смог вставить: span, div, b, i, u, sup и даже бегущую строку=).

Если кто заинтересовался - экспериментируйте, а о своих "открытиях" пишите мне в комменты.

2 комментария:

  1. Как метод отличиться от других - прикольно :)

    ОтветитьУдалить
  2. Да, есть такое :) Я как-то тоже заметил такую возможность, но благодаря дырявой памяти, благополучно затихорился :)
    Такое можно делать и названии гаджетов, я делал с <b> и <i>, <span> не пользовал. Но к тегам <b> и <i> также можно применить глобально CSS + псевдоклассы, тогда не будет проблем с отображением.
    Запись можно строить так
    h2>b {
    color: green;
    }
    h2>b:first-child {
    color:red;
    }
    h2>b:last-child {
    color:yellow;
    }
    h2:first-letter {
    color:pink;
    }
    <>

    ОтветитьУдалить