Как добавить анимированное подчеркивание к заголовку в Blogger.

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

Вставка строки подчеркивания может быть выполнена путем добавления тега HTML или CSS. В обоих случаях мы должны изменить шаблон, поэтому перед тем как продолжить, вы должны сохранить шаблон для возможного восстановления.

Анимированное подчеркивание в заголовке в Blogger.

Перейдите в Тема> Изменить HTML и найдите раздел <b:skin>, затем нажмите на черную стрелку слева, чтобы раскрыть весь код. Найдите строку с помощью Ctrl + F ]]></b:skin> и, сразу над этой, вставьте это правило для CSS

h3.post-title {border-bottom:2px #036 dotted;}

Затем сохраняете шаблон. Результатом будет следующим.

 

 

Вы можете настроить цветовые коды и стиль рамки, которые я выбрал пунктирными в тесте.

 

Как подчеркнуть название поста с помощью HTML

Теперь мы видим другую систему для достижения аналогичного результата, используя тег горизонтальной линии <hr> вместо тега border-bottom, который вставляет границу внизу элемента. Тема> Редактировать HTML всегда с помощью Ctrl + F, найдите строку

<b:includable id=’post’ var=’post’>

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

<div class=’post-header’> e  
<div class=’post-header-line-1’/>

Между этих строк добавьте этот код

 

<hr align=’center‘ width=’95%’ size=’2‘ color=’#036‘>

 

после того, как он » преобразован » с помощью инструмента Blogcrowds, который преобразует его таким образом

&lt;hr align=&#039;center&#039; width=&#039;95%&#039; size=&#039;2&#039; color=&#039;#036&#039;&gt;

Преобразование из HTML в XML необходимо, чтобы Blogger мог сохранить шаблон . Результат после сохранения шаблона будет следующим

 

 

Конечно значения могут быть настроены для центрирования линии, 95% для определения ширины, размер = ‘2’ для толщины линии и #036 для цветового кода.

 

Показать анимацию при наведении курсора

Теперь давайте посмотрим, как отобразить анимированное подчеркивание заголовка при прохождении курсора. Перейдите в «Тема»> «Изменить HTML» и сразу над тегом </head> вставьте этот код

 

<style> /* DA SINISTRA A DESTRA */.un-sin-des {display: inline-block;}.un-sin-des:after {content: &#39;&#39;;display: block;height: 3px;width: 0;background: transparent;transition: width .5s ease, background-color .5s ease;}.un-sin-des:hover:after {width: 100%;background: #940f04;}/* DA DESTRA A SINISTRA */.un-des-sin {    display: inline-block;    position: relative;    padding-bottom: 3px;}.un-des-sin:after {    content: &#39;&#39;;    display: block;    position: absolute;    right: 0;    bottom: 0;    height: 3px;    width: 0;    background: transparent;    transition: width .5s ease, background-color .5s ease;}.un-des-sin:hover:after {    width: 100%;    background: #940f04;}/* DAL CENTRO AGLI ESTREMI */.un-centro {    display: inline-block;    position: relative;    padding-bottom: 3px;}.un-centro:after {    content: &#39;&#39;;    display: block;    margin: auto;    height: 3px;    width: 0px;    background: transparent;    transition: width .5s ease, background-color .5s ease;}.un-centro:hover:after {    width: 100%;    background: #940f04;}</style>

 

где вы можете настроить цветовые коды и скорость предлагаемого преобразования за полсекунды. Теперь найдите строку <b:includable id=’post’ var=’post’> и прокручивайте код вниз, пока не найдете тег заголовка, который является <data:post.title/>. До и после появления двух заголовков будут добавлены две строки кода, таким образом,

<span class=‘un-sin-des’> <data:post.title/></span>

как показано на следующем скриншоте

 

 

Нажав Enter, вы можете создать необходимое пространство для дополнительных тегов. Для анимированного подчеркивания, который идет справа на лево, вы выбираете un-des-sin , а не un-sin-des , что вместо идет от слева направо , а центрально- создать подчеркивание центра.

 

 

Подчеркивание появится только тогда, когда курсор находится над. Цветовой код #940f04 можно настроить; и подчеркивание толщины операнда: 3px;.