ДОСТИГНУТО:

01.11.2016-300 страниц в индексе Google;
19.01.2017-300 страниц в индексе Яндекса;
03.02.2017-40 ТИЦ;
05.02.2017- сайт принят в DMOZ каталог;

Бегущая строчка на сайте

.

beg

Как добавить бегущую строку на сайт!

Приветствую друзья!

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

  • Бегущая строка может быть частью шаблона сайта, распологатся к примеру в header.php, footer.php, сайдбаре или любом другом месте шаблона сайта;
  • Бегущую строку можно вставлять в любое место любой статьи, как я сделал это в самом начале данного поста;

Как вставить код на сайт
Примеры различных кодов бегущей строки, будут чуть ниже, а сейчас давайте разберем куда вставлять эти самые коды. Если строку необходимо вывести в статье, то и код соответственно вставляется в необходимое место поста. Вставлять код необходимо в текстовом редакторе WordPress. Здесь все просто.
C вставкой кода в шаблон сайта немного сложнее. Если бегущую строку необходимо вставить в шаблон, к примеру в header.php, то необходимо найти открывающий тег и вставить код чуть ниже .Эксперементируйте дорогие друзья!
Коды бегущей строчки
Переходим непосредственно к разбору кодов бегущей строчки. Для вывода строки используется теги

, между которыми и вставляется необходимый текст:

Вот таким образом мы выводим текст! и

Для того чтобы вывести такую строчку,я вставил в текст следующий код:

 

Так же по мимо вывода, простой бегущей строки мы можем вставить код, который будет выводить бегущую ссылку. Вот так:

Предлагаем Вам обменятся ссылками с нашими сайтоми

Делается это следующим образом:

Бегущей строке можно придавать различные стили css, которые необходимо прописать в самом коде или же задать в файле style.css. Строку можно заставить двигаться в различных направлениях, задать размер, цвет и многое другое.
Вот еще один пример бегущей строки с заданными стилями:

Давайте разберем все возможные стили, которые можно придать бегущей строке.
Отредактированная бегущая строка. Спасибо за то что посетили наш сайт!

  • width— это ширина бегущей строки. Задается в пикселях (px) или же процентах от размера страницы. Если установить- width="100%", то ширина строки будет равняться ширине текста в статье;
  • height— высота текста, которая измеряется в пикселях;
  • bgcolor-фоновый цвет текста, в некоторых темах может не поддерживаться;
  • direction-функция которая отвечает за направление движения бегущей строки, существует 4 варианта;
    1. right-движение строчки слева направо;
    2. left-движение строчки справа налево. Если не задать данный стиль, то этот вариант задается по умолчанию;
    3. up— строчка двигается снизу вверх ,как и в нашем примере;
    4. down— движение строчки осуществляется сверху вниз;
  • scrollAmount— функция отвечающая за скорость движения строки. Чем выше цифровое значение, тем больше скорость движения строки;
  • behavior— еще один стиль, который мы не рассмотрели на примере, но который возможно Вам пригодится. Данная функция задает тип движения. Есть 2 варианта;
    1. alternate— перемещение только между правой и левой границами шаблона;
    2. slide— Заставляет строчку останавливаться у края статьи;

Также имеется возможность вставлять бегущую картинку, как с текстом так и без.


shtmlМного уроков HTML на нашем сайте!

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

 

Вот и все теперь Вы знаете, как легко можно создать бегущую строчку, ссылку или картинку на своем сайте.
На этом данную статью заканчиваю. Жду от Вас комментариев и вопросов .Как правило отвечяю Всем.
БЕРЕГИТЕ СЕБЯ
!




лайк

Эти красотки хотят чтобы ты их жестко лайкнул и даже несколько раз твитнул!

4 комментариев к записи Бегущая строчка на сайте

  • Олег П. сказал:

    Давно искал подобный пост.Обязательно добавлю бегущюю статью на свой сайт.Ваш сайт мне пришелся по душе.Можете смело добавить меня в число ваших постоянных читателей!Подписываюсь и лайкаю.Успехов Вам в работе!

  • Olga сказал:

    У страха глаза велики! А все, оказывается, до безобразия просто! 🙂

  • Галина сказал:

    Замечательная мысль с бегущей строкой. Теперь надо придумать в какой пост лучше сделать. Спасибо за подсказку!

  • iriki сказал:

    Помогите, пожалуйста! Сделала бегущую строку, решила сменить вариант, стара редактировать, но в результате у меня теперь «бежит» вся страница. А щёлкнуть на «отредактировать» не удаётся! Ужас! Буду очень признательна за подсказку.

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

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