Фиксированный уголок с бегущей строкой для Блоггер

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


Совершенно просто код.

<style type="text/css">div.notice-banner{_position:absolute;position:fixed;text-align:center;z-index:99000}div.notice-banner-inner{-moz-transform:rotate(-45deg);-moz-transform-origin:50% 0;-ms-transform:rotate(-45deg);-ms-transform-origin:50% 0;-o-transform:rotate(-45deg);-o-transform-origin:50% 0;-webkit-transform:rotate(-45deg);-webkit-transform-origin:50% 0;_bottom:auto;_top:expression(ie6=(document.documentElement.scrollTop+document.documentElement.clientHeight-52+"px") );background: #f6f6f6;background: -webkit-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));background: -moz-linear-gradient(linear, 0% 40%, 0% 70%, from(#f9f9f9), to(#f1f1f1));border:1px solid #aaa;color:#fff;font-family:'trebuchet ms',verdana,arial,sans-serif;font-size:16px;height:30px;left:-190px;opacity:0.9;padding:10px;text-align:center;top:110px;transform:rotate(-45deg);transform-origin:50% 0;width:600px;-moz-box-shadow: 0 5px 5px -5px #999;-webkit-box-shadow: 0 5px 5px -5px #999;box-shadow: 0 5px 5px -5px #999;}.notice-banner-text{-moz-border-radius:8px;-webkit-border-radius:8px;background-color:#fff;border:1px solid #aaa;border-radius:8px;height:28px;margin-right:15px;padding-left:10px;padding-right:10px;width:290px}</style><div class="notice-banner notice-banner-inner"><center><div class='notice-banner-text'><marquee onmouseover="this.stop();" onmouseout="this.start();" style="line-height:28px;color:#000;">Привет, друзья!!! Рада вас видеть:)</marquee></div></center></div>


Замените текст на свой. Если нужна кликабельная текстовая ссыла в строке, отмеченной синим цветом, вставьте такой код

<a href="здесь адрес страницы на которую ссылаемся " target="_blank"><b>ваш текст</b></a>

Код устанавливаем в гаджет HTML/JavaScript в любое место блога. У вас могут появиться свои идеи для чего можно такой уголок приспособить. Хотелось бы посмотреть если решите применить у себя. 

Всем успехов, спасибо за визит и до встречи. 


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

Введите Ваш email


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

  1. Виктория, у меня раньше была в Волшебном фонарике бегущая строка. Потом я ее убрала.

    ОтветитьУдалить
    Ответы
    1. Ирина, иногда бегущие строчки можно ставить, удалять и опять ставить. многие так делают. Вся фишка кода в том что она в уголке. Можно просто дать ссылку на свой блог или объявление не бегущее.

      Удалить
  2. Когда у меня был свой сайт,я ставил строчки бегущие, кстати,как-то и на своем блоге ставил, потом убрал.Спасибо Вам за интересный пост.

    ОтветитьУдалить
    Ответы
    1. Семён, все проходили через это. Пригодится сея конструкция кому - то. Сама уже подумываю иногда её применять.

      Удалить
  3. Спасибо. Применила на одном из блогов. Мне нравится.
    (17 сентября моему городу 190 лет) Посмотрите http://moygorodbrd.blogspot.com/

    ОтветитьУдалить
    Ответы
    1. Людмила, очень красиво получилось. Это ещё раз подтверждает мои слова, что иногда можно такое делать. А на блогах учителей так вообще выводить нужную информацию.

      Удалить
  4. Спасибо! Очень нужная шпора. Просьба, во всех блогах полетели Карты блога. Перепробовала переустановку и новых и старых. Скрипты написаны в http, а все блоги переведены на https. Публикую не выходя их HTML. Подскажите, что делать.

    ОтветитьУдалить
    Ответы
    1. Татьяна, Карты блога все у всех всегда слетают. У меня на шпаргалках пришлось руками всё переделывать. Сейчас публикую пост и бегу ручками добавляю в содержание. Увы но что делать. Посмотрите у меня карту на http://www.dela-domashnie.ru/p/blog-page_10.html она хоть и подгружается долго, но пока стоит. А так начните всё же начинайте про запас делать вручную.

      Удалить
  5. Вика, спасибо! Хочу попробовать, вот только не знаю что у меня получится, не сильна я в этих вопросах.

    ОтветитьУдалить
  6. Алла, а тут ничего и делать не нужно. Скопировал код написал свой текст и всё.

    ОтветитьУдалить
  7. Ответы
    1. Татьяна, если хотите попробовать такую карту напишите мне на почту, вышлю код

      Удалить
  8. Вика,привет.В рубрике "Картинки",когда нажимаешь на "Красивые эффекты для картинок при наведении",то попадаешь сюда,на код с уголочком.

    ОтветитьУдалить
  9. Бывает, в ручную добавляю. Спасибо исправила.

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

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML

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