Как сделать эффектное подчеркивание текста в Блоггер при наведении курсора

Приветствую вас дорогие друзья на блоге bloguspeh.ru! Сегодня я хочу предложить вам забавную фишечку для блогов на площадке Blogspot. Покажу вам как сделать эффектное выдвижное подчеркивание текста. Причем делается это довольно легко и просто и не требует от вас особых знаний.

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

Сейчас я покажу вам как действует этот эффект. Наведите курсор на нижние строчки:

Эффектное подчёркивание Заголовка

Эффектное подчеркивание ссылки

Как вы видите подчеркивание происходит слева на право, но так же можно сделать обратный эффект, т.е. справа на лево.

Обратное подчеркивание справа на лево.

Ну что ж, если вас впечетлила эта фишка, то тогда давайте приступим к её установлению на ваш блог.

Итак, заходим в Панель упраления -> Шаблон -> Настроить -> вверху слева "Дополнительно" -> добавить CSS -> вставляете код который находится ниже в окошко -> нажимаете кнопку "Применить к блогу".

Более наглядно вы можете мосмотреть в этом видео:

Скопируйте и вставьте этот код в разделе CSS и не забудьте нажать на кнопку "Применить к блогу:

/* Underline Slide */
.uslide {
display: inline-block;
}
.uslide:after {
content: '';
display: block;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide:hover:after {
width: 100%;
background: #990000;
}
/*Slide Right To Left*/
.uslide2 {
display: inline-block;
position: relative;
padding-bottom: 3px;
}
.uslide2:after {
content: '';
display: block;
position: absolute;
right: 0;
bottom: 0;
height: 3px;
width: 0;
background: transparent;
transition: width .5s ease, background-color .5s ease;
}
.uslide2:hover:after {
width: 100%;
background: #990000;
}

Теперь вам остается только выделить специальными тегами те участки текста в вашей статье для которых вы хотите применить данный эффект. Только обязательно в редакторе вверху слева переключитесь на HTML.

Эффект слева на право:

Текст, который вы хотите подчеркнуть

Эффект справа на лево:

Текст, который вы хотите подчеркнуть

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

P.S. Хотите выжать максимум с своего блога? Тогда узнйте 7 Секретов Высокодоходного Блогинга здесь>>>