Лайфтайп или живой текст в блоге.

Привет, друзья. Сегодня создадим живой текст, используя сайт livetyping.ru. Это очень быстро, просто и бесплатно. Такой текст может стать прекрасной альтернативой бегущей строки или любого участка текста в сообщении, на который вы хотели бы обратить внимание читателей.
Или поставить свою живую подпись на форуме. А как же оригинально будет выглядеть целое письмо с таким текстом!

Я уже делилась информацией о том, как сделать самопечатающийся текст в блоге. Тоже интересный вариант. Здесь же мы получаем gif-файл с анимированным вводом текста. После набора, будет сгенерирован код, который вставим в тело поста в режиме HTML или в гаджет HTML/JavaScript.

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

Большое спасибо всем за вни

Заходим по ссылке и проходим самую простую регистрацию. Или же активацию через Фейсбук или аккаунт ВК. Попадаете на страницу создания лайфтапа.


В поле набираем нужный текст. Функций не так уж много. К сожалению, текст выдаётся только в чёрном цвете. Ну ниже что-нибудь смудрим. Стиль текста, формат, скорость анимации и ширина  картинки  - на ваше усмотрение. Нажимаем кнопку оживить. Всё.

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

Выглядеть он будет примерно так-
<a href="http://text.livetyping.ru/1650739"><img border="0" src="http://text.livetyping.ru/1711043.gif" alt="Большое спасибо всем за вни"></a><br><small><a href="http://text.livetyping.ru">Text.LiveTyping.ru</a></small>
Немного его подкорректируем (да не обидятся на нас создатели) - убираем ссылку, отмеченную красным. И закроем картинку тегом noindex.
<noindex>  <a href="http://text.livetyping.ru/1650739"><img border="0" src="http://text.livetyping.ru/1711043.gif" alt="Большое спасибо всем за вни"></a></noindex>
Чтобы предать немного красоты и привлекательности, можно заключить это всё в рамочку. Просто добавим стили CSS. Варианты таких есть здесь. Или же оформить всё в качестве цитаты. К примеру вот так -

<div style="border-radius: 30px; border: 5px double #0D129D; padding: 8px;">тут код </div>

Результат-

                Шум ничего не доказывает. К�

Пофантазируйте где и как можно использовать такой живой текст. Конечно же, он не оставит без внимания ваших посетителей.

И у меня сегодня всё. Спасибо за визит и до новых встреч.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


15 комментариев:

  1. Замечательная шпаргалка! Виктория, rel="nofollow" здесь не надо вставлять?

    ОтветитьУдалить
  2. Ирина, да по желанию. Ира, если будешь реализовать у себя, дай посмотреть потом.

    ОтветитьУдалить
  3. Виктория, я пока сделала в тестовом блоге "БиблиоИрина" http://irinapoleshenko.blogspot.ru/

    ОтветитьУдалить
  4. Да, Ирина, просмотрела. Интересно и ничего сложного.

    ОтветитьУдалить
  5. Такой текст оживляет..
    Вика, ты мне в Контакте писала сообщение?

    ОтветитьУдалить
  6. Jozzi N , да это я писала тебе.

    ОтветитьУдалить
  7. Хорошо, я тебе там отвечу.

    ОтветитьУдалить
  8. Вика доброго времени суток! Я может не по теме, но тоже с анимацией только цифр. Вы спец по спец.эффектам! Можно ли цифры, поместить в рамку и увеличить их шрифт в таком коде: script
    function scroll(val,el,timeout,step){
    var i=0;
    (function(){
    if(i<=val){
    setTimeout(arguments.callee,timeout);
    document.getElementById(el).innerHTML=i;
    i=i+step;
    }else{
    document.getElementById(el).innerHTML=val;
    }
    })();
    }
    scroll(60000,'shethik-cifra',10,100);
    /script
    НАС УЖЕ: div class="shethik-cifra" id="shethik-cifra">/div (script и div оформлены в <> с ними не редактор не дает опубликовать) Или как-то оформить это красиво? С уважением Тата.

    ОтветитьУдалить
  9. Да, попробуйте так к примеру, от этого и исходите. Это я так понимаю таймер отсчёта. Попробуйте
    div class="shethik-cifra" id="shethik-cifra" style="border: 4px double red; padding: 2px; width: 120px;color: #0000FF;font-size:20px;">
    нас уже
    /div
    Кстати завтра пост опубликую, идейку вы подкинули.

    ОтветитьУдалить
  10. Ой класс!!! Спасибо Вика, я вот так оформила, а закруглить рамочку можно, пробовала border-radius, чет не получилось! И шрифт в тексте "нас уже" увеличить можно?
    centerНАС УЖЕ: div class="shethik-cifra" id="shethik-cifra" style="border: 4px double red; padding: 2px; width: 120px;color: #0000FF;font-size:20px;">
    /div</center. С уважением Тата!

    ОтветитьУдалить
  11. P.S. Да Вика, это таймер отчета!

    ОтветитьУдалить
  12. При публикации и в режиме просмотра нет Нас уже Там задан класс для shethik-cifra
    напишите просто текстом вверху или где вы это публиковать думаете.

    style="border-radius: 10px 10px 10px 10px; border: 4px double red; color: blue; font-size: 20px; padding: 2px; width: 100px;

    ОтветитьУдалить
  13. Вика, спасибо за округление рамки! Буду публиковать в сообщении, я попробовала в режиме редактирования текста увеличить, получилось! Жду ваш пост на эту тему, там я думаю еще "красивости" будут предложены!

    ОтветитьУдалить
  14. Tata, пожалуйста. Да нет, пост не про это, а про первую букву. Кое-что дополнила, чтобы с картинкой.

    ОтветитьУдалить
  15. Вика, это чтоб пост начинался с картинки(справа), а потом текст с большой красивой буквы? Класс, я никак не могла нигде найти как это сделать!

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

Пользовательский поиск