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

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


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

<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


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

  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. Татьяна, если хотите попробовать такую карту напишите мне на почту, вышлю код

      Удалить

Пользовательский поиск
Foto Saya
My Photo